Status is a really small icon to visually show the current status of an element, like online, offline, error, etc.
The basic status component is a simple dot indicator with no additional styling.
Status indicators come in five sizes: extra small, small, medium (default), large, and extra large.
.flex.flex-col.items-start.gap-2
.flex.items-center.gap-2
= daisy_status(css: "status-xs mr-2")
%span Extra Small
.flex.items-center.gap-2
= daisy_status(css: "status-sm mr-2")
%span Small
.flex.items-center.gap-2
= daisy_status(css: "status-md mr-2")
%span Medium (Default)
.flex.items-center.gap-2
= daisy_status(css: "status-lg mr-2")
%span Large
.flex.items-center.gap-2
= daisy_status(css: "status-xl mr-2")
%span Extra Large
Status indicators can use different colors to represent various states or conditions.
.flex.flex-col.items-start.gap-2
.flex.items-center.gap-2
= daisy_status(css: "status-primary mr-2")
%span Primary
.flex.items-center.gap-2
= daisy_status(css: "status-secondary mr-2")
%span Secondary
.flex.items-center.gap-2
= daisy_status(css: "status-accent mr-2")
%span Accent
.flex.items-center.gap-2
= daisy_status(css: "status-neutral mr-2")
%span Neutral
.flex.items-center.gap-2
= daisy_status(css: "status-info mr-2")
%span Info
.flex.items-center.gap-2
= daisy_status(css: "status-success mr-2")
%span Success
.flex.items-center.gap-2
= daisy_status(css: "status-warning mr-2")
%span Warning
.flex.items-center.gap-2
= daisy_status(css: "status-error mr-2")
%span Error
Create virtual credit / debit cards to keep your real info safe.
Get $5 when you sign up — free to start!
Everything you need to grow your business with confidence!
CRM, Lead Generation, Project Management, Contracts, Online Payments, and more!
The ads above are affiliate links to products I regularly use and highly
recommend.
I may receive a commission if you decide to purchase.