Icon button

Component preview

A compact button represented visually by an icon but still given its own stable accessible action name.

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: icon-only button, toolbar icon, symbol button

a trash icon I can press
a compact button with no visible text
the copy symbol in a toolbar
an icon action with a spoken name
a square button for closing
a small edit action shown as a pencil

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.

Icon button

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

Your task

Reach Copy with Tab, hear its name, activate with Space, then reveal its supplementary tooltip.

Edge case to verify

When the icon cannot load, the accessible name and button target remain intact and the action is still understandable to assistive technology.

Mission

Icon button

Reach Copy with Tab, hear its name, activate with Space, then reveal its supplementary tooltip.

Primary state: The 44 px button has a visible focus ring, decorative icon, and independent accessible name Copy code.

pnpm test

Ready

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

A familiar action repeats in a dense toolbar
A close, copy, or playback action has a well-known symbol

Avoid it when

The icon is ambiguous for the audience
There is enough room for a clearer visible text button

Compare similar concepts

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.

Button

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

Link

Technical details

Behaviors

Run an action
Pointer, Enter, or Space activation runs one named action exactly once.
Reveal on focus or hover
Pointer hover or keyboard focus reveals the information after a short delay.

States

Copy code ready
Copy code ready
Code copied
Code copied

State transitions

Copy code ready → Code copied
Enter, Space, pointer, or touch activates the named Copy code button.
Code copied → Copy code ready
The transient copied confirmation ends or the replayable specimen is reset.

Test scenarios

Context: A code toolbar includes Copy, Expand, and Close icon buttons with one icon family.
Mission: Reach Copy with Tab, hear its name, activate with Space, then reveal its supplementary tooltip.
Primary state: The 44 px button has a visible focus ring, decorative icon, and independent accessible name Copy code.
Edge case: When the icon cannot load, the accessible name and button target remain intact and the action is still understandable to assistive technology.

Accessibility

Role: native button with an explicit accessible name
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: The full button target, not only the glyph, receives a visible focus indicator.
Dismissal: The button itself does not dismiss; any surface it controls follows that surface's separate contract.
Scroll: Activating the control with Space does not scroll the page, and feedback appears without moving focus or causing an unexpected jump.
Announcement: A stable aria-label or visually hidden text names the action; Tooltip is never the only accessible name.
Keyboard: Tab focuses the icon button
Enter and Space activate it
Escape dismisses any supplementary tooltip

Bindings

button[type=button] with accessible name
implementationKind
native
nativeElement
button[type=button] with accessible name
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: The icon may be decorative, but the button needs its own stable accessible name; a tooltip is supplementary only.
Verify binding source

Sources

WHATWG HTML: The button element
WHATWG · standard · 2026-07-16
Claim covered: Icon button: native button types, activation, disabled state, and form behavior.
WAI-ARIA APG: Button Pattern
W3C WAI · standard · 2026-07-16
Claim covered: Icon 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.