Alert

PreviewCopy Anchor Link

UsageCopy Anchor Link

import {
  Alert,
  AlertDescription,
  AlertTitle,
} from '@vitnode/core/components/ui/alert'

<Alert variant="warning">
  <AlertTitle>Cron adapter missing</AlertTitle>
  <AlertDescription>
    Scheduled jobs won&apos;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.

VariantsCopy Anchor Link

• 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 readersCopy Anchor Link

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 iconCopy Anchor Link

Pass any icon to icon, or null for none.

<Alert icon={<HardDriveIcon />} variant="info">
  <AlertTitle>Storage is connected</AlertTitle>
</Alert>

DismissibleCopy Anchor Link

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>

PropsCopy Anchor Link