Button design
Skill Dragoon0x/everything-design-taste/skills/button-design
Button hierarchy, states, sizing, labeling, and button group patterns.From its SKILL.md
npx -y skills add Dragoon0x/everything-design-taste --skill button-designAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 9 stars9 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
SKILL.md
1.3 KB, 313 tokens by cl100k_base, as published. Nobody here has run it
Button Design
Button Hierarchy
Three Levels
- Primary — One per view. The main action. Filled, brand color.
- Secondary — Supporting actions. Outlined or muted fill.
- Tertiary — Least important. Text-only or ghost button.
Sizing
| Size | Height | Use Case |
|---|---|---|
| Small | 32px | Inline actions, table rows, tags |
| Medium | 40px | Default for most contexts |
| Large | 48px | Hero CTAs, primary actions, mobile |
Labels
- Use verbs. "Save," "Delete," "Create Project" not "OK," "Submit," "Yes."
- Be specific. "Add to Cart" not "Continue."
- 2-4 words. If longer, the action is too complex for a button.
- No ALL CAPS unless it's part of the brand system.
States
Every button needs: Default → Hover → Active/Pressed → Focus → Disabled → Loading
Loading State
- Replace label with spinner + "Saving..." (keep button width stable).
- Disable the button during loading.
- Never lose the user's click.
Icon Buttons
- Always include a tooltip or aria-label.
- Minimum 44x44px touch target even if icon is 20px.
- Common: close (X), menu (hamburger), more (three dots), back (arrow).
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.