Loading resource
Actions
Every action, with a clear hierarchy. Variants, sizes, icons, and loading states.
Use the default variant for primary actions; it follows the primary palette in both themes. Use secondary, outline, or ghost for supporting actions. Reserve brand accent shades for deliberate highlights instead of overriding ordinary buttons.
src/components/ui/button.tsx
Try an action to see its feedback.
The preview imports your production components. Open Code for the complete working example, including its imports.
Use Tab to inspect keyboard focus, switch themes, and try the controls. Reset restores the example’s initial state.