Alert Inline
A dismissible contextual message rendered inside page content.
AlertInline is the non-modal, contextual version of Alert. It renders inside the page layout, does not block interaction, and uses a solid semantic background instead of the modal Alert gradient. It is useful for form feedback, saved-state messages, warnings, and persistent page-level information.
Basic usage
<AlertInline
title="Changes saved"
variant="success"
onClose={() => setVisible(false)}
>
Your workspace has been updated.
</AlertInline>The component is visible by default and includes a close button. Closing removes it from the layout. It uses role="alert" and aria-live-compatible alert semantics without creating a modal layer.
Variants and icons
The available variants are neutral, success, warning, and danger. Each variant uses a solid background tint, semantic accent color, left accent border, and an automatic icon.
<AlertInline variant="neutral" title="Information">Additional context.</AlertInline>
<AlertInline variant="success" title="Success">The operation completed.</AlertInline>
<AlertInline variant="warning" title="Review required">Check the value before continuing.</AlertInline>
<AlertInline variant="danger" title="Could not save">Try again or contact support.</AlertInline>Use icon to replace the automatic icon. Pass icon={null} when the alert should not show an icon.
Sizes
Use size="default" for normal content and size="sm" for compact areas. The default size is default.
<AlertInline size="default" title="Standard message">...</AlertInline>
<AlertInline size="sm" title="Compact message">...</AlertInline>
<AlertInline fullWidth title="Full-width message">...</AlertInline>Set fullWidth when the alert should occupy the entire available width of its parent. It has priority over the content-based default width; the component still respects the parent width and never overflows it.
Controlled and uncontrolled visibility
Use defaultOpen for an initially visible uncontrolled alert. Use open and onOpenChange when the parent owns visibility:
<AlertInline
open={visible}
onOpenChange={setVisible}
title="Draft saved"
>
You can continue editing.
</AlertInline>defaultOpen defaults to true, so an inline alert appears when rendered unless it is explicitly hidden through controlled state. Set defaultOpen={false} to render it closed initially.
Links and content
children accepts any React content, including links and inline markup. Links keep normal inline behavior and are styled with the alert accent color:
<AlertInline variant="neutral" title="Learn more">
Read the <a href="https://example.com/help">help center</a> for details.
</AlertInline>Unlike the modal Alert, AlertInline does not force links into a new tab because it is part of the page content.
Dismiss button mode
By default, the alert is dismissed with a close icon in the upper-right corner. Set dismissMode="button" to replace that icon with a small dashed button below the message:
<AlertInline
dismissMode="button"
dismissLabel="OK and Close"
dismissIcon={<CheckIcon size={16} />}
title="Button dismiss mode"
>
Confirm that you have read this message.
</AlertInline>The button always dismisses the alert. dismissLabel changes its text and dismissIcon changes its optional leading icon. The button uses the sm size and dashed variant by design.
Exit animation
Use exitAnimation to control how the inline alert leaves its place when dismissed. The default is none.
<AlertInline exitAnimation="top" title="Animated message">
This alert leaves through the top edge when closed.
</AlertInline>Supported values are none, top, bottom, left, and right. The component remains mounted until the 180ms animation completes. Users who prefer reduced motion receive an immediate close.
API Reference
| Property | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Message content. |
title | ReactNode | — | Optional heading. |
variant | 'neutral' | 'success' | 'warning' | 'danger' | 'neutral' | Solid semantic visual variant. |
size | 'default' | 'sm' | 'default' | Density and typography preset. |
fullWidth | boolean | false | Stretch the alert to 100% of the available parent width. |
icon | ReactNode | Automatic by variant | Custom icon. Pass null to hide the icon. |
closeLabel | string | 'Close alert' | Accessible name for the required close button. |
dismissMode | 'icon' | 'button' | 'icon' | Use the upper-right close icon or the bottom confirmation button. |
dismissLabel | ReactNode | 'OK and Close' | Text/content of the bottom dismiss button. |
dismissIcon | ReactNode | — | Optional icon in the bottom dismiss button. |
exitAnimation | 'none' | 'top' | 'bottom' | 'left' | 'right' | 'none' | Direction in which the alert leaves when dismissed. |
open | boolean | — | Controlled visibility. |
defaultOpen | boolean | true | Initial visibility for uncontrolled usage. |
onOpenChange | (open: boolean) => void | — | Called when the close button changes visibility. |
onClose | () => void | — | Called when the alert is dismissed. |
aria-label | string | — | Accessible label when the title is not sufficient. |
className | string | — | Additional class on the alert root. |
Alert vs AlertInline
Use Alert when the user must stop and acknowledge a blocking message. Use AlertInline when the message belongs to the page content and the user can continue working without dismissing it.