IconButton

A square button with only an icon, for toolbars and dense rows where the icon is well known. Prefer a labelled Button when there is room.

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

tsx

import { IconButton } from '@skribly/ui/actions'

tsx

<IconButton label="Add item" onPress={add}>
  <Plus aria-hidden />
</IconButton>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

label is the accessible name and also appears as a tooltip on hover and at once on keyboard focus, so sighted and voice control users know what to call it.
Escape hides the tooltip.
Each size is at least 24px square.

This demo runs through axe in all three themes on every test run. See what the tests check.