Outline Button
Border-only button for lower-emphasis actions. Communicates availability without competing with primary calls-to-action.
Base
Default outline button using DaisyUI's btn btn-outline.
Inherits --radius-sm via DaisyUI's --rounded-btn override below.
Sizes
Three sizes: btn-sm for compact toolbars, default for most contexts,
btn-lg for hero-level actions.
States
Every interactive state the button moves through — hover is live,
active and focus are shown via inline class overrides,
disabled via the HTML attribute.
With Icon
Icon leading, trailing, and icon-only. Icon-only buttons must carry
an aria-label for screen readers.
Color Variants
Semantic color variants using DaisyUI tokens. Use btn-error
for destructive actions — the outline treatment keeps the weight lower than
a filled destructive button.
Full Width
Use btn-block when the button must stretch to its container —
common in mobile drawers, form footers, and card actions.
Edge Cases
Long labels, empty label, and mixed-length siblings in a flex row — the button should not collapse or overflow.