Neumorphism UI

Alert

保存結果や注意事項など、関連する内容のそばに表示し続けるメッセージに使います。

プレビュー

情報・成功・エラーの案内

Registry の更新、同期完了、トークン不足を、それぞれのアイコンと説明で比較します。

インストール

この Registry を初めて使う場合は、先に 基本設定と共通スタイルの導入 を完了してください。

npx shadcn@latest add @neumorphism-ui/alert

共有 base を一度導入した後、CLI でコンポーネントと依存関係を追加します。

Registry JSON

使い方

Alert に AlertTitle と AlertDescription を組み合わせます。意味に合う variant を選び、色だけでなく文章でも結果を伝えます。

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";

export default function Example() {
  return (
    <Alert variant="success">
      <AlertTitle>Changes saved</AlertTitle>
      <AlertDescription>Your workspace is up to date.</AlertDescription>
    </Alert>
  );
}

API リファレンス

アイコン、タイトル、説明を整列できる組み合わせ可能な Alert です。default、success、destructive の各 variant で、色だけでなく border とテキストのコントラストも組み合わせて意味を示します。

コンポーネントプロパティ型デフォルト説明
Alertvariant"default" | "success" | "destructive""default"メッセージの意味と視覚的な表現を選択します。
AlertchildrenReact.ReactNode—アイコン、AlertTitle、AlertDescription を配置します。
AlertclassNamestring—既定のサーフェススタイルを拡張します。

アクセシビリティ

  • 01

    Alert は role=alert を使用し、動的に表示される重要なメッセージに適しています。

  • 02

    初期表示時から存在する静的な案内では、role=alert による即時読み上げが不要な場合があります。必要に応じて role を上書きするか、別の container を使用してください。

  • 03

    装飾用アイコンには aria-hidden=true を設定し、同じ意味をタイトルと説明のテキストでも伝えてください。