AgentStack
Sign in Publish
MCP servers Skills Toolkits Why AgentStack Sell Docs
Sign in
SKILL verified MIT Self-run

Button Design

skill-dragoon0x-everything-design-taste-button-design · by Dragoon0x

Button hierarchy, states, sizing, labeling, and button group patterns.

↗ Repository
— No reviews yet
0 installs
8 views
0.0% view→install

Install

$ agentstack add skill-dragoon0x-everything-design-taste-button-design

✓ scanned · ✓ verified — works with Claude Code, Cursor, and more.

Security review

✓ Passed

No issues found. Passed automated security review. · v0.1.0 How review works →

  • ✓ Prompt-injection patterns
  • ✓ Secret / credential exfiltration
  • ✓ Dangerous shell & filesystem operations
  • ✓ Untrusted network calls
  • ✓ Known-malicious package signatures

What it can access

  • ✓ Network access No
  • ✓ Filesystem access No
  • ✓ Shell / process execution No
  • ✓ Environment & secrets No
  • ✓ Dynamic code execution No

From automated source analysis of v0.1.0. “Used” means the capability is present in the source — more access means more to trust, not that it’s unsafe.

Are you the author of Button Design? Claim this listing to set pricing, connect Stripe payouts, and keep 70% of every sale.
Sign up to claim

About

Button Design

Button Hierarchy

Three Levels

  1. Primary — One per view. The main action. Filled, brand color.
  2. Secondary — Supporting actions. Outlined or muted fill.
  3. 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).

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

Install and usage instructions live in the source repository linked above.

Reviews

No reviews yet — be the first.

Write a review

Versions

  • v0.1.0 Imported from the upstream source.

More in Agent Skills