174 lines
6.1 KiB
Markdown
174 lines
6.1 KiB
Markdown
# 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>
|
|
```
|
|
|
|
|
|
|
|
## NEXUS Official daisyUI Dashboard Template
|
|
|
|
## Available on daisyUI store
|
|
|
|
[More details](/store) |