display
Badge
ステータスやカウント、カテゴリを示すインラインラベル。
インポート
import { Badge } from '@stella-ds/react'Props
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
| variant | 'solid' | 'outline' | 'subtle' | 'solid' | Visual fill style |
| color | 'default' | 'primary' | 'success' | 'warning' | 'error' | 'default' | Color semantic |
| size | 'sm' | 'md' | 'md' | Size preset |
Preview
DefaultPrimarySuccessWarningError
SubtleOutlineSolid
使用例
Basic
<Badge variant="subtle" color="success">Published</Badge>