Alert

重要な情報をユーザーに伝えるアラート。4種類のバリアント(info、success、warning、danger)をサポート。

インストール

import { Alert } from "@ginga-ui/core";

基本的な使い方

タイトルと説明文を持つシンプルなアラートです。

お知らせ

メンテナンスのため、明日の午前2時から4時までサービスを停止します。

export function BasicExample() {
  return (
    <Alert>
      <AlertTitle>お知らせ</AlertTitle>
      <AlertDescription>
        メンテナンスのため、明日の午前2時から4時までサービスを停止します。
      </AlertDescription>
    </Alert>
  );
}

バリアント

info、success、warning、dangerの4種類のバリアントを指定できます。

情報

新しいバージョンが利用可能です。

成功

変更が保存されました。

警告

ストレージの空き容量が少なくなっています。

エラー

データの読み込みに失敗しました。

export function VariantsExample() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
      <Alert variant="info">
        <AlertTitle>情報</AlertTitle>
        <AlertDescription>新しいバージョンが利用可能です。</AlertDescription>
      </Alert>
      <Alert variant="success">
        <AlertTitle>成功</AlertTitle>
        <AlertDescription>変更が保存されました。</AlertDescription>
      </Alert>
      <Alert variant="warning">
        <AlertTitle>警告</AlertTitle>
        <AlertDescription>
          ストレージの空き容量が少なくなっています。
        </AlertDescription>
      </Alert>
      <Alert variant="danger">
        <AlertTitle>エラー</AlertTitle>
        <AlertDescription>データの読み込みに失敗しました。</AlertDescription>
      </Alert>
    </div>
  );
}

説明文のみ

タイトルを省略して説明文だけを表示できます。動的に挿入して通知する場合はrole属性にalertを渡すか、Toastの利用を検討してください。

プロフィールを更新しました。

export function DescriptionOnlyExample() {
  return (
    <Alert variant="success">
      <AlertDescription>プロフィールを更新しました。</AlertDescription>
    </Alert>
  );
}