Badge

Atom

Durum, kategori veya etiket göstergesi. Feedback varyantları yalnızca semantik anlamlarına uygun bağlamlarda kullanılır.

Props EditorInteractive
Frontend
<Badge>Frontend</Badge>

Success

Preview
Active
Code
<Badge variant="success">Active</Badge>

Error

Preview
Inactive
Code
<Badge variant="error">Inactive</Badge>

Warning

Preview
Pending
Code
<Badge variant="warning">Pending</Badge>

Info

Preview
New
Code
<Badge variant="info">New</Badge>

Neutral

Preview
Design
Code
<Badge variant="neutral">Design</Badge>

Primary

Preview
Frontend
Code
<Badge variant="primary">Frontend</Badge>

Sizes

Preview
SmallMediumLarge
Code
<Badge size="sm">Small</Badge>
<Badge size="md">Medium</Badge>
<Badge size="lg">Large</Badge>

Dot badge

Preview
OnlineAwayBusyOffline
Code
<Badge variant="success" dot>Online</Badge>
<Badge variant="warning" dot>Away</Badge>

Dismissible

Preview
ReactTypeScriptTailwind
Code
<Badge variant="primary" dismissible onDismiss={() => remove(tag)}>React</Badge>
Sourcemodules/ui/Badge.tsx