Inline Alert

Description

InlineAlert is a compound component that renders an in-flow status surface, a <div> with role="alert", composed of an icon, a title, a description, and optional actions or a dismiss button. It announces itself to assistive tech as a live region without stealing focus, so it can sit inside the page body next to the content it relates to.

Reach for it for system messages anchored to a section: a form-level validation summary above the submit button, a "you're on the free plan" notice inside a settings card, a success confirmation after a saved draft. Seven semantic variants cover the full status spectrum and four appearances let you tune emphasis to the surrounding surface.

Don't use InlineAlert for transient, screen-level feedback that should disappear on its own; use Toast. If you need to interrupt the user with a confirm or cancel decision, use Dialog. For per-field validation messages, use the helper-text slot on Field so the message stays scoped to the input.

Installation

pnpm dlx @create-ui/cli add inline-alert

Anatomy

<InlineAlert>
  <InlineAlertIcon />
  <InlineAlertContent>
    <InlineAlertHeading>
      <InlineAlertTitle />
      <InlineAlertDescription />
    </InlineAlertHeading>
    <InlineAlertActions />
  </InlineAlertContent>
  <InlineAlertClose />
</InlineAlert>

Usage

import {
  InlineAlert,
  InlineAlertContent,
  InlineAlertDescription,
  InlineAlertHeading,
  InlineAlertIcon,
  InlineAlertTitle,
} from "@/components/ui/inline-alert"

<InlineAlert>
  <InlineAlertIcon>
    <InfoIcon />
  </InlineAlertIcon>
  <InlineAlertContent>
    <InlineAlertHeading>
      <InlineAlertTitle>Heads up</InlineAlertTitle>
      <InlineAlertDescription>Your draft is saved.</InlineAlertDescription>
    </InlineAlertHeading>
  </InlineAlertContent>
</InlineAlert>

Examples

Variants

variant selects the semantic intent. The seven options map to the system's status token sets: primary for brand, neutral for system rows, info / success / warning / danger for status, and away for idle states.

Appearances

appearance tunes the surface treatment without changing the semantic variant. default is the quiet, card-like surface; soft is a tinted block; outline keeps the border colored and the fill transparent; solid is the high-emphasis filled treatment.

Layouts

layout="horizontal" (default) keeps the title and description on one row and clamps the description to two lines. layout="vertical" stacks heading and actions so longer descriptions and multi-button rows have room to breathe.

With Actions

Wrap one or more interactive elements in InlineAlertActions. The slot composes Button and TextLink from the design system (never raw <button> or <a>) so emphasis, focus rings, and typography stay consistent with the rest of the page.

Without Icon

The icon slot is optional. Omit InlineAlertIcon for short, text-only notices where the wording carries enough context on its own.

Dismissible

Add InlineAlertClose to render the trailing close button. The component runs an internal fade-and-scale transition, then calls onDismiss on the root once the transition ends; that's the moment to remove the alert from state.

Accessibility

InlineAlert is a custom composition, not a Radix primitive. The root renders with role="alert", so assistive tech announces the contents as a live region the next time the user is idle. The dismiss button is a real focusable CloseButton; the rest of the alert is non-interactive.

ARIA notes:

• The root sets role="alert"; do not double-wrap it in another live region.
• The leading icon is decorative; provide a meaningful InlineAlertTitle so screen readers have something to announce.
• The close button inherits its accessible name from CloseButton ("Close").
• data-dismissed flips while the exit transition is playing; useful for CSS, not announced by AT.
• The alert lives in the page flow, so it does not trap focus and does not steal focus on mount. For a modal interrupt, reach for Dialog.

Styling

Tailwind override: pass className to merge Tailwind classes with the component's CVA classes (via cn()):

<InlineAlert className="rounded-2xl shadow-md">…</InlineAlert>

Data slots and attributes: the component sets these for CSS targeting:

• data-slot="inline-alert" on the root element.
• data-slot="inline-alert-icon" on the icon wrapper.
• data-slot="inline-alert-content" on the content column.
• data-slot="inline-alert-heading" on the title + description wrapper.
• data-slot="inline-alert-title" on the title text.
• data-slot="inline-alert-description" on the description text.
• data-slot="inline-alert-actions" on the actions row.
• data-slot="inline-alert-close" on the dismiss button.
• data-variant="<variant>", data-appearance="<appearance>", data-layout="<layout>" on the root.
• data-dismissed on the root while the exit transition is running.

Target a specific state in CSS:

[data-slot="inline-alert"][data-appearance="solid"][data-variant="danger"] {
  /* … */
}

Related Components

• Toast: transient, screen-level notification that auto-dismisses; use when the message is not anchored to a section.
• Dialog: blocking, focus-trapping interrupt; use when the user must respond before continuing.
• Field: per-field validation surface with helper or error text scoped to a single input.
• Banner: page-level announcement that spans the full chrome; use for site-wide notices.

API Reference

InlineAlert

The root surface. Renders a <div> with role="alert", owns the dismiss state, and broadcasts variant / appearance / layout to every sub-component via context. Extends React.ComponentProps<"div">, so any standard div attribute (id, aria-*, onClick, etc.) is accepted.

Props

Variants

InlineAlertIcon

Leading icon slot. Extends React.ComponentProps<"span">. Sizes its child SVG to size-5 and colors it from the active variant / appearance context.

Props

InlineAlertContent

Layout wrapper that lines up InlineAlertHeading and InlineAlertActions per the active layout. Extends React.ComponentProps<"div">.

Props

InlineAlertHeading

Wraps the title and description into a single column. Extends React.ComponentProps<"div">.

Props

InlineAlertTitle

The bold one-line summary. Renders a <p>. Extends React.ComponentProps<"p">.

Props

InlineAlertDescription

The longer-form body. Renders a <p> and is line-clamped (2 in horizontal layout, 5 in vertical). Extends React.ComponentProps<"p">.

Props

InlineAlertActions

Trailing actions row. Wraps in vertical layout, stays inline in horizontal. Extends React.ComponentProps<"div">.

Props

InlineAlertClose

Absolute-positioned trailing close button. Wraps CloseButton, picks the right variant for the current appearance, and calls the root's internal dismiss handler before invoking your onClick. Extends React.ComponentProps<typeof CloseButton>.

Props