Alert

ページ内に置く通知。中身は表示したまま注意を促す。

ページの中に置く通知です。「この画面は失敗した」を表す ErrorState と違い、中身が表示できている上での注意喚起に使います。

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";

パーツと variant

パーツ	役割
`Alert`	枠。`variant`: `default` \| `destructive`
`AlertTitle`	見出し
`AlertDescription`	本文
`AlertAction`	右端に寄せるアクション

アイコンは Alert の直下に置くだけで、グリッドが自動で 2 列になります。lucide-react から直接 import して構いません。

import { Info } from "lucide-react";

<Alert>
  <Info />
  <AlertTitle>読み取り専用です</AlertTitle>
</Alert>;