← Patterns
Smoothie Patterns Button Patterns

Icon-Only Button

Icon-only buttons for compact UI. Always include aria-label for accessibility.

Button with Icon and Label

Primary action buttons with leading icon and label.

Add Item Export Data Send

Button Toggles

Buttons that toggle between states (e.g., play/pause, on/off).

Play Light

Button Row

Multiple buttons in a row for related actions (filters, navigation).

All Active Archived Deleted

Button Pair

Common dialog action pattern: Cancel and Confirm buttons.

Cancel Confirm