Input & controls

Button / Action Button

Q: How do people describe a Button / Action Button in plain words?

the main clickable thing that does the action a Follow button with an icon and arrow that big blue button I'm supposed to press

Q: How do I implement a Button / Action Button?

Build a semantic action control with a clear label and optional leading or trailing icons. Choose filled, outlined, ghost, or destructive hierarchy from context; use a real button for in-place actions and a link for navigation. Preserve a visible focus state, stable loading width, and disabled behavior without relying on color alone.

A semantic control for an action, with hierarchy expressed through its visual variant.

Also known as primary button · CTA · action button · outlined button

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Button / Action Button".

Build a semantic action control with a clear label and optional leading or trailing icons. Choose filled, outlined, ghost, or destructive hierarchy from context; use a real button for in-place actions and a link for navigation. Preserve a visible focus state, stable loading width, and disabled behavior without relying on color alone.

Anatomy:
- label: Clear action text that remains understandable without relying on an icon.
- leading / trailing icons: Optional icons reinforce brand, action, or navigation direction without replacing the label.
- primary: One per view region: filled, high emphasis.
- secondary: Outline or quieter fill for alternative actions.
- ghost / tertiary: Low emphasis; never compete with primary.

Preferred API / pattern: `shadcn Button (variants)`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Two primary filled buttons side by side
○Avoid: Clickable div without button semantics
○Avoid: Submit button without type in a form

In plain wordsHow people search for it

“the main clickable thing that does the action”“a Follow button with an icon and arrow”“that big blue button I'm supposed to press”

AnatomyOpen for part names

label: Clear action text that remains understandable without relying on an icon.
leading / trailing icons: Optional icons reinforce brand, action, or navigation direction without replacing the label.
primary: One per view region: filled, high emphasis.
secondary: Outline or quieter fill for alternative actions.
ghost / tertiary: Low emphasis; never compete with primary.

How to write itOpen for stack patterns

Web (HTML/CSS)<button type="button|submit">

React + Tailwind + shadcn/uishadcn Button (variants)

SwiftUIButton { } label: { }

Ant Design<Button type="primary">

Notes

Hierarchy beats decoration: one primary action per region. Destructive actions need clear styling and often a confirm. Prefer real <button> elements (not divs) for keyboard and forms. Loading buttons should keep width stable and prevent double submit.

Common mistakesHumans and models trip here

Two primary filled buttons side by side: pick one primary.
Clickable div without button semantics: use <button> or role=button + keyboard.
Submit button without type in a form: defaults to submit—set type explicitly.

More failure symptoms on AI broke it.

Related patterns

Switch / ToggleA binary on/off control that usually takes effect immediately.Dropdown MenuA compact menu of actions or options revealed from a trigger control.Toast / SnackbarA brief, non-blocking status bar that appears after an action and dismisses itself.

Spotted a wrong name or missing pattern?

Message on X