Alert

Preview

Changes saved

Your search index settings have been updated.

Background jobs require a configured cron adapter

A rebuild won't run until cron is active. Configure an adapter in Integrations to enable scheduled reindexing.

Unable to reach the search engine

Check the connection settings and try again.

Usage

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

<Alert variant="warning">
  <TriangleAlertIcon />
  <AlertTitle>Heads up</AlertTitle>
  <AlertDescription>Something needs your attention.</AlertDescription>
</Alert>

An optional leading icon is picked up automatically - render any icon as the first child and the layout aligns it with the title and description.

Variants

default - neutral, informational messages.
warning - a non-blocking caution the user should act on (amber).
destructive - an error or a failed action (red).

Dismissible

Wrap a control in AlertAction to pin it to the top-right corner, e.g. a close button. The alert reserves space for it automatically.

import { AlertAction } from '@vitnode/core/components/ui/alert'
import { Button } from '@vitnode/core/components/ui/button'
import { XIcon } from 'lucide-react'

;<Alert variant="warning">
  <TriangleAlertIcon />
  <AlertTitle>Heads up</AlertTitle>
  <AlertDescription>Something needs your attention.</AlertDescription>
  <AlertAction>
    <Button aria-label="Dismiss" size="icon" variant="ghost">
      <XIcon />
    </Button>
  </AlertAction>
</Alert>

Props

Prop

Type