Alert

An in-page notice that flags something while the content is still shown.

An in-page notice. Where ErrorState says “this view failed”, Alert flags something while the content is still shown.

export const client = "only";

import {
  Alert,
  AlertTitle,
  AlertDescription,
  AlertAction,
  Button,
} from "@squadbase/vantage/ui";
import { TriangleAlert } from "lucide-react";

export default function Example() {
  return (
    <div className="flex w-[30rem] flex-col gap-3">
      <Alert>
        <TriangleAlert />
        <AlertTitle>集計が遅れています</AlertTitle>
        <AlertDescription>表示中のデータは 3 時間前の時点のものです。</AlertDescription>
        <AlertAction>
          <Button variant="outline" size="sm">
            再取得
          </Button>
        </AlertAction>
      </Alert>
      <Alert variant="destructive">
        <TriangleAlert />
        <AlertTitle>接続できません</AlertTitle>
        <AlertDescription>データソースの認証情報を確認してください。</AlertDescription>
      </Alert>
    </div>
  );
}

import { Alert, AlertTitle, AlertDescription, AlertAction } from "@squadbase/vantage/ui";

Parts and variants

Part	Role
`Alert`	The frame. `variant`: `default` \| `destructive`
`AlertTitle`	The heading
`AlertDescription`	The body
`AlertAction`	An action pinned to the right

Drop an icon as a direct child of Alert and the grid becomes two columns on its own. Importing straight from lucide-react is fine.

import { Info } from "lucide-react";

<Alert>
  <Info />
  <AlertTitle>This view is read-only</AlertTitle>
</Alert>;