IconButton

A square, icon-only button for toolbars, dismiss actions and dense rows. Because there is no visible text, label is required and becomes the aria-label.

StableSource

<IconButton label="Settings" icon={<SettingsIcon />} />

Import

tsx

import { IconButton } from "@merid/react";

ghost (the default) is transparent until hovered — right for toolbars and card corners. secondary gives the button a visible surface; primary uses the accent fill and should be as rare as a primary Button.

<IconButton variant="ghost" label="Settings" icon={<SettingsIcon />} />
<IconButton variant="secondary" label="Delete" icon={<TrashIcon />} />
<IconButton variant="primary" label="Add item" icon={<PlusIcon />} />

Sizes

Squares of 32px (sm), 36px (md, default) and 40px (lg).

<IconButton size="sm" label="Close" icon={<CloseIcon />} />
<IconButton size="md" label="Close" icon={<CloseIcon />} />
<IconButton size="lg" label="Close" icon={<CloseIcon />} />

Disabled

<IconButton variant="secondary" label="Delete" icon={<TrashIcon />} disabled />

API reference

Forwards its ref to the <button> and passes native button attributes through, except children and aria-label (use label). type defaults to "button".

Prop	Type	Default	Description
`label`Required	`string`	–	Accessible name, rendered as aria-label.
`icon`Required	`ReactNode`	–	The icon. Rendered inside an aria-hidden span.
`variant`	`"ghost" \| "secondary" \| "primary"`	`"ghost"`	Visual style.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Square size: sm 32px, md 36px, lg 40px.
`type`	`"button" \| "submit" \| "reset"`	`"button"`	Native button type.
`disabled`	`boolean`	–	Native disabled attribute.

Styling

Hook	Values
`.mrd-icon-button`	Root `<button>`
`.mrd-icon-button__icon`	Icon wrapper (aria-hidden)
`data-variant`	`ghost` · `secondary` · `primary`
`data-size`	`sm` · `md` · `lg`

Component variable: --mrd-icon-button-size, set per size from the --mrd-icon-button-sm/md/lg tokens.

css

.toolbar .mrd-icon-button {
  --mrd-icon-button-size: 28px;
}

Accessibility

label is required by the types and becomes aria-label; the icon is aria-hidden.
Write the label as the action (“Delete invoice”), not the icon's shape (“Trash can”).
Pair with Tooltip so sighted mouse users can discover the label too.

Key	Action
`Tab`	Moves focus to the button.
`Enter`	Activates the button.
`Space`	Activates the button.

Guidelines

Use icon buttons for well-known actions — close, settings, more — where the icon is unambiguous.

Avoid

Use an icon button for a primary or unfamiliar action. If people must guess, use a Button with a label.

Button — actions with a visible label.
Tooltip — shows the label on hover and focus.