Icon button

A button with an icon and no label, for compact actions in toolbars and table rows.

Refined portWildIconButton.vueButtons/Icon ButtonWIconBtn

Try it

Hover it, press it and tab to it. Each press turns it on or off.

Variant

Size

Disabled

<WildIconButton
  icon="plus"
  variant="ghost"
  size="md"
  ariaLabel="Add"
/>

When to use

Use an icon button for a familiar action that repeats, such as an action on every table row.
Use active for a button that stays switched on until it’s pressed again.

Don’t use it

For an action people need to read to understand. Use a Button with a label.

Variants

Use ghost inside a row, subtle in a toolbar, and solid for the one action that must be found without hunting.

ghost

subtle

solid

<WildIconButton variant="ghost" icon="plus" ariaLabel="Add" />
<WildIconButton variant="subtle" icon="plus" ariaLabel="Add" />
<WildIconButton variant="solid" icon="plus" ariaLabel="Add" />

Ghost has no resting fill, so a column of row actions doesn’t turn into a column of boxes.

Sizes

Four square sizes, from 24 to 40px.

xs · 24

sm · 28

md · 32

lg · 40

Icon and text buttons share only the 24, 32 and 40px heights. Use one of those when the two sit side by side.

States

Rest, hover, pressed and keyboard focus, for every variant.

rest

hover

active

focus

ghost

subtle

solid

A press steps one shade past hover. Keyboard focus is a ring outside the button, so it shows on every fill.

ghost · on

subtle · on

solid · on

disabled

<WildIconButton icon="plus" active ariaLabel="Add" />
<WildIconButton icon="plus" disabled ariaLabel="Add" />

On turns the icon global-blue-1000 on ghost and subtle. Solid takes the cyan fill instead, with a near-black icon.

Accessibility

Give every icon button an ariaLabel, because the icon is all it shows. With active set, screen readers hear it as a toggle, pressed or not.

Key	What it does
Tab	Moves focus to the button. A disabled one is skipped.
Enter / Space	Runs the action, or turns it on or off.

Props

Prop	Type	Default	Description
icon	string	—	Icon name.
variant	'ghost' \| 'subtle' \| 'solid'	'ghost'	Emphasis. See Variants.
size	'xs' \| 'sm' \| 'md' \| 'lg'	'sm'	Square size: 24, 28, 32 or 40px.
active	boolean	—	Switched on. Announced as a pressed toggle.
disabled	boolean	false	Blocks the action and leaves the tab order.
ariaLabel	string	—	Accessible name. Always required.

Tokens

Token	Value	Where it lands
--radius-button	6px	Corners at every size.
--color-grey-800	#7F7D83	Ghost icon at rest.
--color-grey-200	#F1F1F1	Ghost fill on hover.
--color-grey-300	#ECECED	Ghost fill when pressed, and when on.
--color-grey-1000	#2D2B32	Solid fill.
--global-blue-1000	#1877F2	The ghost and subtle icon when on: 3.59:1 on the ghost’s grey fill, 3.96:1 on the subtle’s blue-100. Cyan was 2.14:1 and 2.37:1.
--global-blue-100	#EBFAFF	Subtle fill when on.
--color-primary	#00AEEF	Solid fill when on. Its icon is grey-1300 #0A090B, 7.85:1, because white is 2.53:1.
--color-primary-active	#1877F2	Focus ring.
(no token)	2px gap, 2px ring	Keyboard focus, outside the button.