Status
Status is a really small icon to visually show the current status of an element, like online, offline, error, etc.
| Class name | Type | |
|---|---|---|
| status | Component | Status icon |
| status-neutral | Color | neutral color |
| status-primary | Color | primary color |
| status-secondary | Color | secondary color |
| status-accent | Color | accent color |
| status-info | Color | info color |
| status-success | Color | success color |
| status-warning | Color | warning color |
| status-error | Color | error color |
| status-xs | Size | extra small size |
| status-sm | Size | small size |
| status-md | Size | medium size [Default] |
| status-lg | Size | large size |
| status-xl | Size | extra large size |
<span class="$$status"></span>
<span class="$$status"></span>
<span class="$$status"></span>
<span class="$$status"></span><div aria-label="status" class="$$status $$status-xs"></div> <div aria-label="status" class="$$status $$status-sm"></div> <div aria-label="status" class="$$status $$status-md"></div> <div aria-label="status" class="$$status $$status-lg"></div> <div aria-label="status" class="$$status $$status-xl"></div>
<div aria-label="status" class="$$status $$status-xs"></div>
<div aria-label="status" class="$$status $$status-sm"></div>
<div aria-label="status" class="$$status $$status-md"></div>
<div aria-label="status" class="$$status $$status-lg"></div>
<div aria-label="status" class="$$status $$status-xl"></div>
<div aria-label="status" class="$$status $$status-xs"></div>
<div aria-label="status" class="$$status $$status-sm"></div>
<div aria-label="status" class="$$status $$status-md"></div>
<div aria-label="status" class="$$status $$status-lg"></div>
<div aria-label="status" class="$$status $$status-xl"></div>
<div aria-label="status" class="$$status $$status-xs"></div>
<div aria-label="status" class="$$status $$status-sm"></div>
<div aria-label="status" class="$$status $$status-md"></div>
<div aria-label="status" class="$$status $$status-lg"></div>
<div aria-label="status" class="$$status $$status-xl"></div><div aria-label="status" class="$$status $$status-primary"></div> <div aria-label="status" class="$$status $$status-secondary"></div> <div aria-label="status" class="$$status $$status-accent"></div> <div aria-label="status" class="$$status $$status-neutral"></div> <div aria-label="info" class="$$status $$status-info"></div> <div aria-label="success" class="$$status $$status-success"></div> <div aria-label="warning" class="$$status $$status-warning"></div> <div aria-label="error" class="$$status $$status-error"></div>
<div aria-label="status" class="$$status $$status-primary"></div>
<div aria-label="status" class="$$status $$status-secondary"></div>
<div aria-label="status" class="$$status $$status-accent"></div>
<div aria-label="status" class="$$status $$status-neutral"></div>
<div aria-label="info" class="$$status $$status-info"></div>
<div aria-label="success" class="$$status $$status-success"></div>
<div aria-label="warning" class="$$status $$status-warning"></div>
<div aria-label="error" class="$$status $$status-error"></div>
<div aria-label="status" class="$$status $$status-primary"></div>
<div aria-label="status" class="$$status $$status-secondary"></div>
<div aria-label="status" class="$$status $$status-accent"></div>
<div aria-label="status" class="$$status $$status-neutral"></div>
<div aria-label="info" class="$$status $$status-info"></div>
<div aria-label="success" class="$$status $$status-success"></div>
<div aria-label="warning" class="$$status $$status-warning"></div>
<div aria-label="error" class="$$status $$status-error"></div>
<div aria-label="status" class="$$status $$status-primary"></div>
<div aria-label="status" class="$$status $$status-secondary"></div>
<div aria-label="status" class="$$status $$status-accent"></div>
<div aria-label="status" class="$$status $$status-neutral"></div>
<div aria-label="info" class="$$status $$status-info"></div>
<div aria-label="success" class="$$status $$status-success"></div>
<div aria-label="warning" class="$$status $$status-warning"></div>
<div aria-label="error" class="$$status $$status-error"></div><div class="inline-grid *:[grid-area:1/1]"> <div class="$$status $$status-error animate-ping"></div> <div class="$$status $$status-error"></div> </div> Server is down
<div class="inline-grid *:[grid-area:1/1]">
<div class="$$status $$status-error animate-ping"></div>
<div class="$$status $$status-error"></div>
</div> Server is down
<div class="inline-grid *:[grid-area:1/1]">
<div class="$$status $$status-error animate-ping"></div>
<div class="$$status $$status-error"></div>
</div> Server is down
<div class="inline-grid *:[grid-area:1/1]">
<div class="$$status $$status-error animate-ping"></div>
<div class="$$status $$status-error"></div>
</div> Server is down Unread messages
<div class="$$status $$status-info animate-bounce"></div> Unread messages
<div class="$$status $$status-info animate-bounce"></div> Unread messages
<div class="$$status $$status-info animate-bounce"></div> Unread messages
<div class="$$status $$status-info animate-bounce"></div> Unread messagesDo you have a question? Ask on GitHub or Discord server
Do you see a bug? open an issue on GitHub
Do you like daisyUI? Post about it!
Support daisyUI's development: Open Collective
