Alert
A blocking confirmation message styled for the Mosmox UI system.
Alert is the design-system equivalent of JavaScript's window.alert(): it opens a modal message, blocks interaction with the page, and requires the user to acknowledge it with one confirmation button. Unlike the browser function, it is fully styled, accessible, themeable, and supports controlled React state.
Basic usage
const [open, setOpen] = useState(false);
<Button onClick={() => setOpen(true)}>Show alert</Button>
<Alert
open={open}
onOpenChange={setOpen}
title="Information"
>
<p>Your changes are ready to review.</p>
</Alert>The alert is modal by design. The overlay blocks pointer interaction, body scrolling is locked, Escape does not dismiss it, and clicking the overlay does not dismiss it. The user must activate the single confirmation button.
Programmatic API
Use AlertProvider and useAlert to open an alert from application code. The returned Promise resolves to true when the user confirms and false when it closes without confirmation.
<AlertProvider>
<App />
</AlertProvider>
const { show } = useAlert();
const acknowledged = await show({
variant: 'warning',
title: 'Service interruption',
children: <p>Maintenance starts in five minutes.</p>,
confirmLabel: 'Understood',
});Variants and automatic icons
Use variant to communicate the message meaning:
<Alert variant="neutral" title="Information">...</Alert>
<Alert variant="success" title="Saved successfully">...</Alert>
<Alert variant="warning" title="Please review">...</Alert>
<Alert variant="danger" title="Action required">...</Alert>success, warning, and danger automatically render their semantic icon. The neutral information alert has no icon by default. Use icon when a custom alert icon is needed.
Colored variants use a short top-to-bottom gradient from the semantic color into the shared surface color. The title and icon use the same semantic accent.
Position and size
The default position is top, centered horizontally with a 50px top offset. Set placement="center" to center the alert vertically. The default preset is 520px wide and the compact sm preset is 360px wide; both remain responsive on narrow screens.
<Alert placement="top" size="default" title="Top alert">...</Alert>
<Alert placement="center" size="sm" title="Compact alert">...</Alert>Exit animation
Use exitAnimation to control how the alert leaves the screen after the confirmation button is pressed. The default is none.
<Alert exitAnimation="top" title="Saved">...</Alert>
<Alert exitAnimation="bottom" title="Saved">...</Alert>
<Alert exitAnimation="left" title="Saved">...</Alert>
<Alert exitAnimation="right" title="Saved">...</Alert>The alert stays mounted until the 180ms exit animation completes, then calls the close callback. Users who prefer reduced motion receive an immediate close instead.
Links in alert content
Links rendered inside Alert content always open in a new browser tab. The component enforces target="_blank" and rel="noopener noreferrer", even when the supplied link uses another target value.
<Alert title="Read before continuing">
<p>
Review the <a href="https://example.com/terms" target="_self">updated terms</a>.
</p>
</Alert>Confirmation button
The confirmation button is always present and cannot be removed. Change its label, icon, and action with confirmLabel, confirmIcon, and onConfirm:
<Alert
title="Terms updated"
confirmLabel="I understand"
confirmIcon={<CheckIcon size={16} />}
onConfirm={() => setOpen(false)}
>
<p>Please review the latest terms before continuing.</p>
</Alert>When exitAnimation is enabled, onConfirm, onOpenChange(false), and onClose run after the exit animation finishes. With exitAnimation="none", they run immediately. Pass icon={null} to suppress the automatic variant icon.
API Reference
| Property | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Message content shown below the title. |
title | ReactNode | — | Alert heading. |
variant | 'neutral' | 'success' | 'warning' | 'danger' | 'neutral' | Visual and semantic message style. |
placement | 'top' | 'center' | 'top' | Vertical placement of the alert. |
size | 'default' | 'sm' | 'default' | Alert width preset: 520px for default or 360px for sm, with responsive behavior on narrow screens. |
exitAnimation | 'none' | 'top' | 'bottom' | 'left' | 'right' | 'none' | Direction in which the alert leaves after confirmation. |
icon | ReactNode | Automatic by variant | Replaces the automatic semantic icon. Pass null to hide it. |
confirmLabel | ReactNode | 'OK and Close' | Confirmation button content. |
confirmIcon | ReactNode | — | Optional icon in the confirmation button. |
onConfirm | () => void | — | Runs when the required confirmation button is activated. |
open | boolean | — | Controlled visibility. |
defaultOpen | boolean | false | Initial uncontrolled visibility. |
onOpenChange | (open: boolean) => void | — | Called when visibility changes. |
onClose | () => void | — | Called after the alert closes. |
aria-label | string | — | Accessible name when the title is not a suitable heading. |
id | string | generated | Base ID for title and description relationships. |
className | string | — | Additional class on the alert panel. |
The confirmation action uses the dashed button variant and is centered in the footer by default. Alert intentionally does not expose Cancel, close-button, overlay-dismissal, or Escape-dismissal options. If the user must choose between multiple actions, use Dialog or AlertDialog instead.
Links inside the message use the Alert accent color, a subtle accent background, an external-link marker, and an underline. The component always forces those links to open in a new tab with rel="noopener noreferrer".