IconButton

import { IconButton } from 'yarcl';

An IconButton is as wide as it is tall, so it lines up with a Button or Input of the same size.

<IconButton aria-label="Search" variant="outline">
  <SearchIcon />
</IconButton>

Accessibility

• aria-label is required by the types: without visible text, it’s the button’s only name.
• Pair it with a Tooltip so sighted users can see the label too.
• loading swaps the icon for a Spinner and disables the button.

Props

Accepts every native <button> attribute except color.

Prop	Type	Default	Description
aria-label required	string		Accessible name, announced by screen readers in place of visible text.
color	Colorconfig	config.defaults.color	Semantic color, from the colors config.
loading	boolean		Shows a Spinner, disables the button and sets aria-busy.
radius	'size' | Radiusconfig	config.defaults.radius	Border radius, from the radii config, or 'size' for the radius named like the control's size.
size	Sizeconfig	config.defaults.size	Control size, from the sizes config.
variant	Variantconfig	config.defaults.variant	Style recipe, from the variants config.