Inputs

Icon button

A button with an icon and no label, for toolbars, inline actions and compact density.

Examples

Large · Medium · Small

Primary · Secondary · Success · Neutral · Error

Outlined

Icon button anatomy
#	Part	Description	Presence
1	Container	Circle, 44 / 32 / 27px	Required
2	Icon	Centered 18 / 14px glyph, decorative	Required
3	Tooltip	Shows the name on hover and focus	Optional

Sizes	Large 44px · Medium 32px · Small 27px
Variants	Primary · Secondary · Success · Neutral · Error
Outlined strokes	Double-layered gradient stroke (light and dark accent) to hold depth over images
Touch target	Small sizes expand their hit area automatically

Keyboard
Key	Result
`Tab` `Shift+Tab`	Moves focus to and from the control
`Enter`	Activates
`Space`	Activates on key up

Pointer and touch
Trigger	Response
Hover	Overlay at 10% (hover-overlay-opacity); cursor stays default on non-links
Press	Scale to 0.97 in 100ms; released on pointer up
Touch	Target at least 44px, with a halo if the visual is smaller
Hover or focus	Tooltip after a short delay; Esc dismisses it

role · button

1.1.1Non-text Content2.4.7Focus Visible2.5.8Target Size (Minimum)4.1.2Name, Role, Value

Requirements
Requirement	How Rig meets it
Name	aria-label is mandatory, describing the action (Delete), not the icon (Bin)
Icon	aria-hidden on the SVG so it is not announced twice
Target	Small is 27px, above the 24px WCAG minimum, with a 44px touch halo
Toggles	If it holds a state (Like), use aria-pressed and keep the label constant

Do and don’t
Do	Don’t
Add a tooltip with the same text as the name	Do not rely on the icon alone to explain the action
Group related icon buttons in a toolbar	Do not change the aria-label when toggling aria-pressed