Button（ボタン）
バリエーション
サイズ
状態
Card（カード）
Default
シャドウ付き
デフォルトのカードスタイル
Bordered
ボーダー付き
ボーダー付きカード
Flat
フラット
シャドウなしカード
Badge（バッジ）
SuccessErrorWarningInfoNeutral
Alert（アラート）
成功しました！処理が正常に完了しました。
エラーが発生しました。もう一度お試しください。
注意：この操作は取り消せません。
お知らせ：新機能が追加されました。
閉じるボタン付きアラート（×をクリック）
Table（テーブル）
| ID | 名前 | ステータス | 件数 |
|---|---|---|---|
| 1 | サービスA | 有効 | 150 |
| 2 | サービスB | 無効 | 42 |
| 3 | サービスC | 保留中 | 89 |
Tabs（タブ）
📊 概要タブの内容
Form（フォーム部品）
選択は必須です
入力は必須です
Modal（モーダル）
Pagination（ページネーション）
全 100 件中 1-10 件を表示
1 / 10
Loading（ローディング）
Spinner
Text
読み込み中...
サイズ比較
PageHeader（ページヘッダー）
このページの上部に表示されているのがPageHeaderコンポーネントです。
<PageHeader title="デザインコンポーネント一覧" subtitle="共通UIコンポーネントのデモページ" backLink="/" />
使い方
// インポート
import { Button, Card, Table, Badge, Alert, Modal, Tabs, Select, Input, Pagination, Loading, PageHeader } from '@/components/ui';
// 使用例
<Button variant="primary" size="md">ボタン</Button>
<Card title="タイトル">{children}</Card>
<Badge variant="success">成功</Badge>