6.1 KiB
6.1 KiB
Badge Component
Badges are used to inform the user of the status of specific data.
| Class name | Type | |
|---|---|---|
| badge | Component | Container element |
| badge-outline | Style | outline style |
| badge-dash | Style | dash outline style |
| badge-soft | Style | soft style |
| badge-ghost | Style | ghost style |
| badge-neutral | Color | neutral color |
| badge-primary | Color | primary color |
| badge-secondary | Color | secondary color |
| badge-accent | Color | accent color |
| badge-info | Color | info color |
| badge-success | Color | success color |
| badge-warning | Color | warning color |
| badge-error | Color | error color |
| badge-xs | Size | extra small size |
| badge-sm | Size | small size |
| badge-md | Size | medium size (default) |
| badge-lg | Size | large size |
| badge-xl | Size | extra large size |
Badge
Badge
<span class="$$badge">Badge</span>
<span class="$$badge">Badge</span>
Badge sizes
<div class="$$badge $$badge-xs">Xsmall</div>
<div class="$$badge $$badge-sm">Small</div>
<div class="$$badge $$badge-md">Medium</div>
<div class="$$badge $$badge-lg">Large</div>
<div class="$$badge $$badge-xl">Xlarge</div>
<div class="$$badge $$badge-xs">Xsmall</div>
<div class="$$badge $$badge-sm">Small</div>
<div class="$$badge $$badge-md">Medium</div>
<div class="$$badge $$badge-lg">Large</div>
<div class="$$badge $$badge-xl">Xlarge</div>
Badge with colors
<div class="$$badge $$badge-primary">Primary</div>
<div class="$$badge $$badge-secondary">Secondary</div>
<div class="$$badge $$badge-accent">Accent</div>
<div class="$$badge $$badge-neutral">Neutral</div>
<div class="$$badge $$badge-info">Info</div>
<div class="$$badge $$badge-success">Success</div>
<div class="$$badge $$badge-warning">Warning</div>
<div class="$$badge $$badge-error">Error</div>
<div class="$$badge $$badge-primary">Primary</div>
<div class="$$badge $$badge-secondary">Secondary</div>
<div class="$$badge $$badge-accent">Accent</div>
<div class="$$badge $$badge-neutral">Neutral</div>
<div class="$$badge $$badge-info">Info</div>
<div class="$$badge $$badge-success">Success</div>
<div class="$$badge $$badge-warning">Warning</div>
<div class="$$badge $$badge-error">Error</div>
Badge with soft style
<div class="$$badge $$badge-soft $$badge-primary">Primary</div>
<div class="$$badge $$badge-soft $$badge-secondary">Secondary</div>
<div class="$$badge $$badge-soft $$badge-accent">Accent</div>
<div class="$$badge $$badge-soft $$badge-info">Info</div>
<div class="$$badge $$badge-soft $$badge-success">Success</div>
<div class="$$badge $$badge-soft $$badge-warning">Warning</div>
<div class="$$badge $$badge-soft $$badge-error">Error</div>
<div class="$$badge $$badge-soft $$badge-primary">Primary</div>
<div class="$$badge $$badge-soft $$badge-secondary">Secondary</div>
<div class="$$badge $$badge-soft $$badge-accent">Accent</div>
<div class="$$badge $$badge-soft $$badge-info">Info</div>
<div class="$$badge $$badge-soft $$badge-success">Success</div>
<div class="$$badge $$badge-soft $$badge-warning">Warning</div>
<div class="$$badge $$badge-soft $$badge-error">Error</div>
Badge with outline style
<div class="$$badge $$badge-outline $$badge-primary">Primary</div>
<div class="$$badge $$badge-outline $$badge-secondary">Secondary</div>
<div class="$$badge $$badge-outline $$badge-accent">Accent</div>
<div class="$$badge $$badge-outline $$badge-info">Info</div>
<div class="$$badge $$badge-outline $$badge-success">Success</div>
<div class="$$badge $$badge-outline $$badge-warning">Warning</div>
<div class="$$badge $$badge-outline $$badge-error">Error</div>
<div class="$$badge $$badge-outline $$badge-primary">Primary</div>
<div class="$$badge $$badge-outline $$badge-secondary">Secondary</div>
<div class="$$badge $$badge-outline $$badge-accent">Accent</div>
<div class="$$badge $$badge-outline $$badge-info">Info</div>
<div class="$$badge $$badge-outline $$badge-success">Success</div>
<div class="$$badge $$badge-outline $$badge-warning">Warning</div>
<div class="$$badge $$badge-outline $$badge-error">Error</div>
Badge with dash style
<div class="$$badge $$badge-dash $$badge-primary">Primary</div>
<div class="$$badge $$badge-dash $$badge-secondary">Secondary</div>
<div class="$$badge $$badge-dash $$badge-accent">Accent</div>
<div class="$$badge $$badge-dash $$badge-info">Info</div>
<div class="$$badge $$badge-dash $$badge-success">Success</div>
<div class="$$badge $$badge-dash $$badge-warning">Warning</div>
<div class="$$badge $$badge-dash $$badge-error">Error</div>
<div class="$$badge $$badge-dash $$badge-primary">Primary</div>
<div class="$$badge $$badge-dash $$badge-secondary">Secondary</div>
<div class="$$badge $$badge-dash $$badge-accent">Accent</div>
<div class="$$badge $$badge-dash $$badge-info">Info</div>
<div class="$$badge $$badge-dash $$badge-success">Success</div>
<div class="$$badge $$badge-dash $$badge-warning">Warning</div>
<div class="$$badge $$badge-dash $$badge-error">Error</div>
Badge with ghost style
<div class="$$badge $$badge-ghost $$badge-primary">Primary</div>
<div class="$$badge $$badge-ghost $$badge-secondary">Secondary</div>
<div class="$$badge $$badge-ghost $$badge-accent">Accent</div>
<div class="$$badge $$badge-ghost $$badge-info">Info</div>
<div class="$$badge $$badge-ghost $$badge-success">Success</div>
<div class="$$badge $$badge-ghost $$badge-warning">Warning</div>
<div class="$$badge $$badge-ghost $$badge-error">Error</div>
<div class="$$badge $$badge-ghost $$badge-primary">Primary</div>
<div class="$$badge $$badge-ghost $$badge-secondary">Secondary</div>
<div class="$$badge $$badge-ghost $$badge-accent">Accent</div>
<div class="$$badge $$badge-ghost $$badge-info">Info</div>
<div class="$$badge $$badge-ghost $$badge-success">Success</div>
<div class="$$badge $$badge-ghost $$badge-warning">Warning</div>
<div class="$$badge $$badge-ghost $$badge-error">Error</div>
