Actions
Button
The button is the library's clearest statement of hierarchy. Text is the default, a hover fill is the step up, and a solid fill is a last resort reserved for a commit that genuinely cannot be missed. One action per view carries the accent; everything else stays neutral, so the eye lands on the primary action without any element having to shout.
npx shadcn@latest add @minflow/buttonWhere to use it
- Any labelled action: submit, confirm, cancel, retry.
- Toolbars and row actions, where several actions sit side by side and only one of them matters most.
- Empty states, where a single accent-coloured label is the whole call to action.
Variations
Text
The default for almost every labelled action. No fill and no border, so a row of them reads as a sentence of options rather than a wall of boxes.
Accent
The single most important action in the current view. If two elements on screen carry the accent, neither of them reads as primary.
Ghost
Where a hover target helps the user aim, such as a dense list of row actions. At rest it still reads as plain text.
Outline and solid
Last resorts. Reach for a fill only when accent-coloured text has already failed to carry an unmissable commit.
Loading and disabled
While an action is in flight. The spinner replaces the need for any 'please wait' copy, and the control stops accepting input.