Secondary Button
Medium-emphasis filled button for the second-most-important action on a screen — usually paired right next to a Primary Button, e.g. "Save Draft" beside "Publish", or "Cancel" beside "Confirm".
1. Default & Paired with Primary
btn-secondary is its own DaisyUI semantic color — distinct from
btn-outline or btn-ghost (see those components for low-emphasis
styles). Its main job is to sit beside a Primary Button without competing with it.
2. Sizes
Same DaisyUI size scale as the Primary Button, so the two stay visually aligned wherever
they're paired: btn-sm, default, btn-lg.
3. Icon Left / Right
Lucide icons sized with Tailwind's size-4 / size-5 utilities.
4. Loading State
Same pattern as the Primary Button: disable the button and swap in DaisyUI's
loading loading-spinner while the request is in flight, so a second click can't
fire the action twice.
5. Disabled State
Native disabled attribute — blocks pointer events, keyboard activation, and
form submission together, and is announced correctly by assistive tech.
6. Full-width Stretch
Tailwind's w-full — no layout assumptions baked into the component, the parent
container decides.
7. Content Density
From a single word to a full sentence — the button must not wrap awkwardly or overflow at any length.
Minimal
Realistic
Long / wraps inside narrow parent
8. Layout
The canonical use case: stacked on narrow viewports, inline once there's room — handled with
Tailwind's flex-col sm:flex-row, the Secondary Button taking the supporting
position after Primary.