Button·component·@astryxdesign/core

Icon Button

A button that shows only an icon with no visible text. Use IconButton in toolbars, table rows, and compact UI where space is tight and the icon is universally understood.

Open in Playground @astryxdesign/core/IconButton

Showcases and examples

5 documented examples

Icon Button

An icon button with a wrench icon.

Open Playground ↗

Preview loads on approachPreview loads on approach

Exact source · icon-button-showcase

// Copyright (c) Meta Platforms, Inc. and affiliates.

'use client';

import {IconButton} from '@astryxdesign/core/IconButton';
import {Icon} from '@astryxdesign/core/Icon';

export default function IconButtonShowcase() {
  return (
    <IconButton
      label="Settings"
      icon={<Icon icon="wrench" color="inherit" />}
    />
  );
}

Usage

A button that shows only an icon with no visible text. Use IconButton in toolbars, table rows, and compact UI where space is tight and the icon is universally understood.

Make the aria-label specific: a trash icon labeled "Delete conversation" is clearer than just "Delete" for screen readers.
Add a tooltip: even a gear icon can mean Settings, Preferences, or Configure.
Use ghost in toolbars and dense areas to reduce visual clutter.
Use IconButton if the action isn't obvious from the icon alone; use Button with text.
Skip the tooltip; label only reaches screen readers, sighted users need the hover hint.

Typed props

Prop	Type and behavior
`label`	`string` · required Accessible label. Used as aria-label (not rendered as visible text).
`icon`	`ReactNode` · required Icon element rendered inside the button. An Astryx Icon with no explicit size defaults to sm for sm/md buttons and md for lg buttons. Slot: Icon
`variant`	`'primary' \| 'secondary' \| 'ghost' \| 'destructive'` · default 'secondary' Visual style variant.
`size`	`'sm' \| 'md' \| 'lg'` · default 'md' Size variant.
`elevation`	`'none' \| 'low' \| 'med' \| 'high'` · default 'none' Resting shadow depth. The most common FAB shape is an icon-only button, so raise it with `low`/`med`/`high` for a floating action button. `none` is the default flat button.
`isLoading`	`boolean` · default false Shows a loading spinner and disables interaction.
`isDisabled`	`boolean` · default false Disables the button.
`tooltip`	`string` Tooltip text shown on hover.
`onClick`	`(e: MouseEvent) => void` Standard click handler.
`clickAction`	`(e: MouseEvent) => void \| Promise<void>` Async click handler with automatic loading state.

Accessibility

Essential icon or spinner arc

Color contrast · 1.4.11 Non-text Contrast · 3:1

IconButton has no visible label. Its icon must have at least 3:1 contrast with the button background in Rest, Hover, and Pointer down. The moving spinner arc must also meet 3:1 while loading.

States: Rest, Hover, Pointer down, Loading

Visible control boundary

Color contrast · 1.4.11 Non-text Contrast · 3:1 if needed

The button edge needs 3:1 contrast only when users need it to see the control.

States: Rest

Keyboard focus indicator

Color contrast · 1.4.11 Non-text Contrast · 3:1

The focus outline must have at least 3:1 contrast with the area around the button. Check the red outline on destructive buttons too.

States: Focus visible

Disabled appearance

Color contrast · 1.4.3 and 1.4.11 exceptions · Not required

Disabled controls do not need to meet these contrast ratios.

States: Disabled