Alert

Preview

Reindexing runs in the background

You can keep editing content while the search index rebuilds.

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

Every coloured variant shares the same shape - a tinted surface, a matching border, a coloured icon and a readable title - so they read as one family and only the hue tells you how worried to be.

default - neutral, informational messages.
success - something finished and it went well (green).
warning - a non-blocking caution the user should act on (amber).
destructive - an error or a failed action (red).

<Alert variant="success">
  <CircleCheckIcon />
  <AlertTitle>Changes saved</AlertTitle>
  <AlertDescription>Your settings have been updated.</AlertDescription>
</Alert>

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