Components

Buttons

Classes: btn, btn-primary, btn-danger, btn-ghost, btn-sm, btn-lg

PrimaryDefaultGhostDangerDisabled

SmallWith iconLarge

Badges

Classes: badge with ok, warn, bad, info, brand. Add plain to hide the dot

NeutralCompletedPendingCancelledProcessingNew

TagBeta12

Alerts

Classes: alert with ok, warn, bad

Heads upA new version is ready to install.

SavedYour changes are live.

Storage almost fullYou have used 92 percent of your space.

Payment failedUpdate your card to keep your plan.

Form controls

Classes: field, input, select, textarea, check, switch

Text

SelectOption oneOption two

With an errorEnter a valid email address.

Disabled

CheckboxRadio oneRadio two

Tabs and segments

role="tablist" with tab buttons, or a seg group

OverviewActivity12Files

Overview panel. Use the arrow keys to move between tabs.

DayWeekMonth

Overlays

Modal, dropdown and toast, all switched on with data attributes

Open modal

Dropdown

EditDuplicate

---

Delete

Show toastError toast

Avatars and progress

Initials avatars need no image files. Put an img inside to use a photo

SLJKMPAR

TBARLWHS

Loading and empty states

Classes: skeleton, empty

Nothing here yetCreate your first item to see it in this list.

Create item