Actions

IconButton

A square button containing only an icon.

Client component1 export

Built on Button rather than duplicating its variant, size, focus and loading behaviour. `aria-label` is a required prop, because an icon alone conveys nothing to a screen reader.

Import

import { IconButton } from "@abbainitiative/ui";

Also available from the subpath entry @abbainitiative/ui/icon-button.

This component carries its own "use client" directive. You can still render it from a Server Component — you simply cannot pass it a function prop, because functions do not serialise across the boundary.

Examples

Variants and shapes

<Inline gap={2}>
  <IconButton aria-label="Add item" icon={<PlusIcon />} />
  <IconButton aria-label="Add item" variant="outline" icon={<PlusIcon />} />
  <IconButton aria-label="Add item" variant="ghost" round icon={<PlusIcon />} />
</Inline>

Props

IconButton props. All native attributes of the underlying element are also accepted and forwarded.
Prop	Type	Default	Description
icon (required)	`ReactNode`		The icon to render. Hidden from assistive technology.
aria-label (required)	`string`		Accessible name for the control. Not optional.
round	`boolean`	`false`	Use a fully rounded shape.

Accessibility

`aria-label` is required by the type signature — the component will not compile without one.
The icon is wrapped in `aria-hidden`, so the label is the entire accessible name.
Inherits Button's focus, disabled and loading behaviour unchanged.