Status

Visual indicator for element states

Basic

Basic Status

Default status indicator

Preview Code Auto

Span(cls="status")

Status Sizes

Preview Code Auto

Div(aria_label='status', cls='status status-xs'),
Div(aria_label='status', cls='status status-sm'),
Div(aria_label='status', cls='status status-md'),
Div(aria_label='status', cls='status status-lg'),
Div(aria_label='status', cls='status status-xl')

Status Colors

Preview Code Auto

Div(aria_label='status', cls='status status-primary'),
Div(aria_label='status', cls='status status-secondary'),
Div(aria_label='status', cls='status status-neutral'),
Div(aria_label='status', cls='status status-accent'),
Div(aria_label='info', cls='status status-info'),
Div(aria_label='success', cls='status status-success'),
Div(aria_label='warning', cls='status status-warning'),
Div(aria_label='error', cls='status status-error')

Ping Animation

Preview Code Auto

Server is down

Div(
    Div(cls='status status-error animate-ping'),
    Div(cls='status status-error'),
    cls='inline-grid *:[grid-area:1/1]'
),
'Server is down'

Bounce Animation

Preview Code Auto

Unread messages

Div(cls='status status-info animate-bounce'),
'Unread messages'

Class Reference

Class	Type	Description
status	Component	Base status indicator
status-neutral	Color	Neutral color variant
status-primary	Color	Primary color variant
status-secondary	Color	Secondary color variant
status-accent	Color	Accent color variant
status-info	Color	Info color variant
status-success	Color	Success color variant
status-warning	Color	Warning color variant
status-error	Color	Error color variant
status-xs	Size	Extra small (12px)
status-sm	Size	Small (16px)
status-md	Size	Medium (20px)
status-lg	Size	Large (24px)
status-xl	Size	Extra large (32px)

Do you have a question? ask the community

Do you see a bug? open an issue on GitHub

LLMs Context: Full Markdown | This Component

Resources: DaisyUI | TailwindCSS | FastHTML Repo