Component reference

IconButton

A button that shows only an icon and carries its name for assistive technology.

Preview

Compact actions

Icon buttons keep an explicit accessible name; by default they carry one compact action and do not stuff text into an icon.

packages/meowtail/stories/action-controls.stories.tsxline 26tsx

render: () => (
  <Stack gap="relaxed" className="workshop-constrained">
    <Toolbar label="Attachment and view actions">
      <IconButton size="small" label="Add attachment">
        <Icon name="paperclip" />
      </IconButton>
      <IconButton size="small" label="Search">
        <Icon name="search" />
      </IconButton>
      <IconButton label="Open details">
        <Icon name="arrow-up-right" />
      </IconButton>
      <IconButton label="Unavailable action" disabled>
        <Icon name="settings" />
      </IconButton>
    </Toolbar>
    <Note>
      Pointer users see an icon; screen reader and keyboard users get an explicit action name.
    </Note>
  </Stack>
)

Installation

bun add meowtail

Usage

Taken from the examples on this page.

usage.tsxtsx

import { IconButton } from "meowtail";

<IconButton size="small" label="Add attachment">
  <Icon name="paperclip" />
</IconButton>

API reference

Props

Prop	Type	Default
`size`	`"small" \| "default" \| "large"`	`"default"`
`label`RequiredThe accessible name; a Signal keeps it live (e.g. Copy → Copied).	`MaybeSignal<string>`	–

Also takes className, children and the attributes and events of its root element.

DOM parts

root

Registry

The component is registered as icon-button in the meowtail component registry.