Status Components
Status is a really small icon (with an optional label) to visually show the current status of an element, like online, offline, error, etc.
Status Examples
All Colors
Primary
Secondary
Accent
Neutral
Info
Success
Warning
Error
All Sizes
XS
SM
MD (default)
LG
XL
A Colour Of Its Own
Any CSS colour, for a mark whose colour is data rather than a choice — a label an administrator picked, a palette served by an API. The eight daisyUI names keep going through daisyUI ; everything else is painted inline.
Violet
Amber
Sky
Named, not hex
labelSize makes the text follow the mark. Left out, a label reads at text-sm whatever the size — the two scales are not the same scale, a mark can shrink below what a sentence can.
xs
sm
md
lg
xl
<Status color={ term.color } // any CSS colour label={ term.label } labelSize="sm" // the text follows the mark/>Without Label
Label Position
Label right (default)
Label left
Animations
Ping
Bounce
Pulse
Spin
Practical Use Cases
Server Status
API Server — Online
Database — Degraded
Cache — Offline
Backup — Maintenance
User Presence
Online
Away
Busy
Offline
In a List
Build
Passed
Tests
Passed
Lint
Warnings
Deploy
Failed
Release
Pending
Custom Element
As spanAs li