Button

Button

Component preview

A named control that performs an action in the current interface when activated.

Build pack

Turn this concept into a useful prompt

Choose the task and destination. Technical names stay in English.

What do you want to do?

CreateModifyRepair

Where will you use the prompt?Prompt languageLanguage of the interface to build

Your objective

In your own words

What people describe

Documented aliases: action button, CTA button, submit button

click to save these changes
a control that runs an action
submit this form
press to create a new project
a main action with a clear label
do something without changing page location

Try it

Trigger or navigate

Compare all three behaviors

Shared comparison scenario: A project screen lets the user trigger an operation or move to a destination from a control suited to the available space.

This context stays fixed. Switch concepts to observe the mission, edge case, and specimen specific to each behavior.

Button

Button performs an action; Link navigates to a destination, while Icon button is the compact button variant whose visible label is replaced by an icon.

Your task

Activate Save with Space, verify the pending state blocks a second request, and recover from a server error.

Edge case to verify

During submission, the button preserves its width, exposes Saving, and blocks duplicate activation without removing focus.

Mission

Activate Save with Space, verify the pending state blocks a second request, and recover from a server error.

Primary state: The enabled submit button has a clear label, visible focus, and sufficient text contrast.

Subject: Weekly summary

Parts of the specimen

Select a marker directly on the specimen, or use the list below, to see its role. Hide the markers to operate the lab without obstruction.

Control

The interactive element that receives input and exposes state.

Use it when

Submitting or resetting a form
Running an in-place command such as Save or Add

Avoid it when

Activation primarily navigates to another URL
The control has no clear action name

Compare similar concepts

Link navigates and has an href; Button performs an action, while Icon button remains an action even when represented only by an icon.

Link

Icon button performs an action like Button but omits visible text; Link still requires a real navigation destination.

Icon button

Technical details

Behaviors

Run an action
Pointer, Enter, or Space activation runs one named action exactly once.
Mark the region busy
The content region exposes its busy state while a separate visual indicator remains redundant.

States

Save idle
Save idle
Save pending
Save pending
Save error
Save error
Save successful
Save successful

State transitions

Save idle → Save pending
Enter, Space, pointer, or touch activates Save exactly once.
Save pending → Save error
The save request fails and exposes a retryable error without duplicating the request.
Save error → Save pending
Activating Retry starts one new save request while retaining focus and stable width.
Save pending → Save successful
The save request succeeds and exposes the completed result without a second activation.
Save successful → Save idle
Reset restores the replayable example to its initial Save state.

Test scenarios

Context: A profile form saves a display name with a primary Save changes action.
Mission: Activate Save with Space, verify the pending state blocks a second request, and recover from a server error.
Primary state: The enabled submit button has a clear label, visible focus, and sufficient text contrast.
Edge case: During submission, the button preserves its width, exposes Saving, and blocks duplicate activation without removing focus.

Accessibility

Role: native button
Accessible name: The primary control or named region has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names.
Focus: A high-contrast focus indicator remains visible in every enabled visual variant and pending state.
Dismissal: Not applicable: an action button does not open a surface unless that separate relationship is defined.
Scroll: Activating the control with Space does not scroll the page, and feedback appears without moving focus or causing an unexpected jump.
Announcement: Accessible name, disabled or pressed state when applicable, and pending result are exposed without changing the label ambiguously.
Keyboard: Tab focuses the button
Enter and Space activate it
Form submit behavior follows its explicit type

Bindings

button[type=button|submit|reset]
implementationKind
native
nativeElement
button[type=button|submit|reset]
ariaPattern
button
radixPrimitive
Not applicable
shadcnRecipe
Not applicable
runtimeDependency
Not applicable
packageName
Not applicable
exportName
Not applicable
exactVersion
Not applicable
status
verified
verifiedAt
2026-07-16
deprecationStatus
active
replacement
Not applicable
validFrom
Not applicable
validUntil
Not applicable
Equivalence caveat: Button performs an action. Navigation belongs to a link, and the type attribute prevents accidental form submission.
Verify binding source

Sources

WHATWG HTML: The button element
WHATWG · standard · 2026-07-16
Claim covered: Button: native button types, activation, disabled state, and form behavior.
WAI-ARIA APG: Button Pattern
W3C WAI · standard · 2026-07-16
Claim covered: Button: button naming, activation semantics, and Enter or Space keyboard behavior.

Verified on 2026-07-16 · rev. 1

Owner: SkillCodex Editorial
Status: review
Review: Independent editorial review pending
Next review: 2026-10-16
Publication: Not published
Change history: Initial sourced MVP draft; independent language review pending.