Alert
Show a short, important message on a tinted card with a matching icon and the right ARIA role.
Preview
Drafts are private
Only you and staff can see a topic until you publish it.
Reindexing runs in the background
Keep editing while the search index rebuilds.
Changes saved
Cron adapter missing
Scheduled jobs won't run until you configure one in Integrations.
Unable to reach the search engine
Check the connection settings and try again.
Usage
import {
Alert,
AlertDescription,
AlertTitle,
} from '@vitnode/core/components/ui/alert'<Alert variant="warning">
<AlertTitle>Cron adapter missing</AlertTitle>
<AlertDescription>
Scheduled jobs won't run until you configure one.
</AlertDescription>
</Alert>Alerts match the callouts in these docs and the Editor panels, so a warning reads the same everywhere.
Variants
default- a neutral note on a plain card, with no icon.info- useful context.success- something finished and went well.warning- a non-blocking caution worth acting on.destructive- an error or a failed action.
Every variant except default brings its own icon.
Screen readers
warning and destructive get role="alert", so screen readers interrupt to
read them. The rest use role="status" and wait their turn. For a static hint
that's on the page from the start, pass role="note":
<Alert role="note" variant="warning">
<AlertTitle>Exports run nightly</AlertTitle>
</Alert>Custom icon
Storage is connected
Backup finished, no icon needed
Pass any icon to icon, or null for none.
<Alert icon={<HardDriveIcon />} variant="info">
<AlertTitle>Storage is connected</AlertTitle>
</Alert>Dismissible
Maintenance tonight at 22:00
The forum goes read-only for about 15 minutes.
AlertAction pins a control to the top end corner, and the alert makes room
for it.
<Alert variant="warning">
<AlertTitle>Maintenance tonight at 22:00</AlertTitle>
<AlertAction>
<Button aria-label="Dismiss" size="icon-sm" variant="ghost">
<XIcon />
</Button>
</AlertAction>
</Alert>Props
Prop
Type