Badge
意味のある色と密度の軸を持つコンパクトなステータスラベルです。
主なプロパティ
| プロパティ | 値 | 既定値 |
|---|---|---|
variant | neutral, info, success, warning, danger | neutral |
uiSize | md, lg | md |
インストール
pnpm add @tinyrack/ui長い行はコード領域を横にスクロールして確認できます。
スタイル
@import '@tinyrack/ui/components/badge.css';長い行はコード領域を横にスクロールして確認できます。
インポート
import { TRBadge } from '@tinyrack/ui/components/badge';長い行はコード領域を横にスクロールして確認できます。
プレイグラウンド
使用方法
例
アイコンと幅を制限した長いラベル パーマリンク
隣のテキストが同じ状態を伝える場合、アイコンは装飾用です。長いラベルは親要素の中で折り返されます。
ステータスのバリアント パーマリンク
色だけでなく、ステータスの意味に合うバリアントを選びます。
サイズ パーマリンク
周囲のテキストやコントロールの密度に合わせます。
API
オプション
| プロパティ | 型 | 既定値 | 用途 |
|---|---|---|---|
variant | 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'neutral' | ステータスの意味と色の表現を選びます。 |
uiSize | 'md' | 'lg' | 'md' | バッジの密度を設定します。 |
HTML とアクセシビリティ
TRBadge は span をレンダリングし、ネイティブ属性、イベント、スタイル、React 19 の ref を転送します。TRBadgeProps、TRBadgeUiSize、TRBadgeVariant 型もエクスポートします。ロールやライブリージョンの動作は自動付与しません。ステータステキストを表示し、アイコンだけを使う場合はアプリケーション側でアクセシブルなラベルを指定してください。