Alert
Displays a callout for user attention.
Composition
Compose the parts of an Alert together to build your own:
Polymorphism
Alert.Title and Alert.Description support asChild when the alert's surrounding document structure needs a different semantic element.
Mix and match what you put inside the Alert component to create different Alert layouts.
Banners
For banner-like alerts, use the appearance="banner" prop. This automatically removes the top, left, and right border, leaving only the bottom border.
Laboris commodo Lorem anim consequat ut dolore proident.
Dismissal
Alert.DismissIconButton removes nothing on its own. Your state does: stop rendering the alert in its onClick handler. When that unmount happens while the dismiss button holds focus, focus moves to the nearest tabbable element outside the alert: the next one in document order, or the previous one when nothing follows. Without that move, focus falls to <body> and the next Tab restarts at the top of the page. A screen reader user also gets no confirmation that the alert left. If your handler or a layout effect places focus first, the alert keeps that choice.
In the demo below, Tab to the dismiss button and press Enter. Focus lands on the button that follows the alert.
Expand button
Use Alert.ExpandButton for a compact control that reveals related alerts. It sits in the same trailing position as the dismiss button and reserves space for the count and caret, so alert copy remains contained on narrow viewports. It shows +N on mobile and +N more from the md (tablet) breakpoint.
Dismiss and expand
Alert.DismissIconButton and Alert.ExpandButton compose safely in the same alert. Both stay absolutely positioned at the trailing edge; when both are present, the dismiss button moves to the left of the expander and Alert.Content reserves room for the pair. This also handles an alert that first renders dismissable and later gains an expander as more alerts arrive.
Trailing control colors
Alert.DismissIconButton and Alert.ExpandButton share the following CSS custom properties from Alert.Root. Each intent supplies the listed defaults; set them once on the root to theme both controls together.
Custom dismiss icon
Use the icon prop on Alert.DismissIconButton to render a custom icon in place of the default X.
Announcing a dynamic alert
Alert.Root renders a plain <div> with no ARIA role. A static alert that is on the page at load does not need one. When your code inserts an alert after an action, such as "Invalid email or password." after a submit, pass role="alert" so a screen reader announces it.
The role alone is not reliable. Assistive tech can miss a live region that mounts already populated. For an error the user must act on, also move focus to the alert: set tabIndex={-1} and focus it on mount. Focus also puts a sighted user's attention on what went wrong. For a less urgent message, pass role="status" on a region that is already mounted, and write the message into it.
The demo below rejects every sign-in, so the alert mounts after the action. The key remounts the alert on a repeated attempt, so it announces again.
API Reference
Alert.Root
Displays a callout for user attention. Root container for all Alert sub-components. It has no ARIA role of its own. When your code inserts the alert after an action, pass role="alert" and move focus to it; see Announcing a dynamic alert.
All props from div, plus:
Trailing control CSS variables
Alert.Root defines --alert-control-color, --alert-control-hover-color, and --alert-control-hover-bg from its intent. Both Alert.DismissIconButton and Alert.ExpandButton inherit them. Override the variables on the root to theme both trailing controls together.
Alert.Content
The container for the content slot of an Alert. Place Alert.Title, Alert.Description, Alert.DismissIconButton, and Alert.ExpandButton as direct children.
All props from div.
Alert.ExpandButton
Positions a compact expand/collapse control at the trailing edge of an Alert. Its count is displayed beside a caret that rotates when expanded is true. It shares the root-level trailing-control CSS variables with Alert.DismissIconButton.
All props from Button, plus:
Alert.Description
The optional description of an Alert. Renders as a div by default, but can be changed to any other element using the asChild prop.
All props from div, plus:
Alert.Icon
An optional icon that visually represents the intent of the Alert. Pass the svg prop to replace the default icon.
All props from svg, plus:
Alert.Title
The title of an Alert. Renders as an h5 element by default; use asChild to render something else.
All props from h5, plus:
Alert.DismissIconButton
A dismiss icon button. Your onClick handler removes the alert. When that unmount happens while the button holds focus, focus moves to the nearest tabbable element outside the alert; see Dismissal. It shares the root-level trailing-control CSS variables with Alert.ExpandButton.
All props from IconButton, with the following overridden defaults: