Alert
An inline message that draws attention without interrupting the task, with optional actions and a dismiss button.Heads upYou can add components using the CLI.
JSX
<Alert title="Heads up" description="You can add components using the CLI." />
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { Alert, Button } from '@advui/core'
<Alert
variant="warning"
title="Trial ending"
description="Upgrade to keep your projects."
actions={<Button size="sm">Upgrade</Button>}
dismissible
/>Examples
Variants
Preview
Code
Heads upYou can add components using the CLI.
Scheduled maintenanceSunday 02:00–03:00 UTC.
Payment received
Storage almost fullYou have used 92% of your quota.
Build failedCheck the logs for details.
This deletes the projectIts files and history cannot be recovered.
Sizes
Preview
Code
SmallFor forms, tables and other dense layouts.
MediumThe default, for most pages.
LargeFor the one message a page is about.
Actions
Buttons under the text; on a narrow screen they wrap.Preview
Code
Unsaved changesYou have changes that have not been saved. They are lost if you leave this page.
Dismissible
With `open` and `onDismiss` the app decides when it shows. Without `open`, it hides itself.Preview
Code
Connection failedUnable to connect to the server. Changes are kept on this device.
Custom icon, colors and radius
Style props and `color` take precedence over the variant and size; everything else keeps their values.Preview
Code
New: shared workspacesInvite your team and work on the same projects.
TipSort by the last column to see this week's growth.
Composition
Compose `Alert.Title`, `Alert.Description` and any content as children.Preview
Code
Before you upgrade
1. Back up the database.2. Read the migration guide.3. Update every package at once.
Takes about ten minutes.API reference
Alert
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'info' | 'success' | 'warning' | 'error' | 'destructive' | 'default' | Intent: colors, icon and role. `destructive` is a solid fill for an action that cannot be undone. |
size | 'sm' | 'md' | 'lg' | 'md' | Padding, spacing, icon and text size. |
title | ReactNode | — | Shorthand for an `Alert.Title` before the children. Text is styled; an element is rendered as it is. |
description | ReactNode | — | Shorthand for an `Alert.Description` after the title. |
icon | ReactNode | null | from `variant` | Custom icon, or `null` to hide it. |
actions | ReactNode | — | Buttons or links under the text. They wrap onto new lines when space runs out. |
dismissible | boolean | false | Shows a button that hides the alert. |
onDismiss | () => void | — | Called once each time the dismiss button is pressed. |
open | boolean | — | Controls whether the alert is shown. Omit it and a dismissed alert hides itself; pass it to decide in `onDismiss`, or to show the alert again. |
dismissLabel | string | 'Dismiss' | Accessible name of the dismiss button. |
role | 'status' | 'alert' | 'note' | 'region' | from `variant` | `alert` for `warning`, `error` and `destructive`, otherwise `status`. Pass `note` for guidance that is part of the page, not news, or `region` with an `aria-label` for a landmark. |
color | ColorTokens | from `variant` | Color of the title, description and icons. Pair it with a background: `primaryForeground` on `primary`. |
backgroundColor | ColorTokens | from `variant` | Overrides the variant background. |
borderColor | ColorTokens | from `variant` | Overrides the variant border color. |
borderWidth | number | 1 | `0` for a borderless alert. |
borderRadius | RadiusTokens | number | 'lg' | Corner radius. |
padding | SpaceTokens | number | from `size` | Inner padding. |
gap | SpaceTokens | number | from `size` | Space between the icon, the text and the dismiss button. |
Alert.Title
Takes its size and color from the alert.Alert.Description
Takes its size and color from the alert.Accessibility
warning,erroranddestructiveuserole="alert", which screen readers announce at once; other variants userole="status", announced politely. Passroleto change it.- Only render an
alertwhen something just happened. For guidance that is part of the page, passrole="note"so it is not announced. - The dismiss button is a real button with an accessible name (
dismissLabel), reachable with Tab and pressed with Enter or Space. It does not pass the press on to a pressable around the alert. - When the alert hides, focus is not moved for you. If it held focus, move focus to a sensible place in
onDismiss. - Color is paired with an icon and text, never used alone. With
colororbackgroundColor, pick a surface and foreground pair from the theme.
Responsive behavior
Fills the width of its container; pass alignSelf="flex-start" to fit the content instead. The text wraps, the icon and dismiss button stay on the first line, and actions wrap onto new lines.
Platform notes
Web
The frame carries the role, so a live region announces the text and the actions.
iOS
Without actions or a dismiss button the whole alert is one accessible element. With them, the text is one element and each button is its own.
Android
Same as iOS. With
androidRipple (on in material()), the dismiss button shows the native ripple.