IconButton

import { IconButton } from '@yarcl/react';

An IconButton is as wide as it is tall. It lines up with a Button or Input of the same base size unless component size overrides change their heights.

<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.
• With href, renders a native link that keeps link semantics and anchor attributes. The link still requires aria-label.

<IconButton href="/settings" aria-label="Settings"><SettingsIcon /></IconButton>

Props

Without href, accepts native <button> attributes except color. With href, accepts native anchor attributes except color and button-only props.

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.
href	undefined
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	'lg' | 'xs' | 'sm' | 'md' | 'xl'	config.defaults.size	Control size, from the sizes config.
variant	Variantconfig	config.defaults.variant	Style recipe, from the component's variant map or the shared variants config.

Prop	Type	Default	Description
aria-label required	string		Accessible name, announced by screen readers in place of visible text.
href required	string		Destination. Renders a native link with the same visual styles as an icon button.
color	Colorconfig	config.defaults.color	Semantic color, from the colors config.
disabled	undefined
loading	undefined
radius	'size' | Radiusconfig	config.defaults.radius	Border radius, from the radii config, or 'size' for the radius named like the control's size.
size	'lg' | 'xs' | 'sm' | 'md' | 'xl'	config.defaults.size	Control size, from the sizes config.
type	undefined
variant	Variantconfig	config.defaults.variant	Style recipe, from the component's variant map or the shared variants config.