Primary Button
High-emphasis filled button for the single most important action on a screen — checkout, submit, confirm. Use one per view so it stays unmistakable.
1. Sizes
DaisyUI's size scale: btn-sm, default, btn-lg.
2. Full-width Stretch
Apply Tailwind's w-full when the button should fill its parent — common in
mobile checkout flows, modal footers, and narrow sidebars. The component itself makes no
assumption about container width; the parent context decides.
3. Icon Left / Right
Lucide icons sized with Tailwind's size-4 / size-5 utilities — never
hardcode pixel dimensions in custom CSS for something Tailwind already expresses.
4. Loading State
DaisyUI's loading loading-spinner swaps in for the icon/label while a request is
in flight. The Alpine snippet below shows the full pattern: disable the button, show the
spinner, and restore state on completion — so a double-click can never fire the action twice.
5. Disabled State
Use the native disabled attribute, not a visual-only class — it blocks pointer
events, keyboard activation, and form submission together, and is announced correctly by
screen readers.
6. Ripple Click Effect
A subtle material-style ripple gives tactile feedback on click without changing layout. Click anywhere on the button below.
7. Content Density
Labels range from a single word to a full call-to-action sentence. The button must not wrap awkwardly or overflow its container at any length.
Minimal
Realistic
Long / wraps inside narrow parent
8. Layout
Paired with a secondary action, the primary button anchors the group. Stack on narrow
viewports, sit inline once there's room — handled with Tailwind's flex-col sm:flex-row,
no custom breakpoint logic needed.