Preview Updated 2026-05-10

IconButton

Square icon-only button. Requires aria-label. Common in toolbars, table column actions, and input suffixes.

Basic usage

Three variants (default / primary / danger), three sizes (sm / md / lg), and shapes square / round.

pressed drives toggle behavior (pin / bookmark) and automatically sets aria-pressed.

<CfIconButton aria-label="Save" variant="primary">
<svg viewBox="0 0 16 16" fill="none">…</svg>
</CfIconButton>
<CfIconButton aria-label="Delete" variant="danger">…</CfIconButton>
<CfIconButton aria-label="Pin" :pressed="true">…</CfIconButton>

<CfIconButton aria-label="Save" variant="primary"><Icon /></CfIconButton>
<CfIconButton aria-label="Delete" variant="danger"><Icon /></CfIconButton>
<CfIconButton aria-label="Pin" pressed><Icon /></CfIconButton>

Sizes and shapes

Three sizes (sm 26 / md 32 / lg 38 px). shape="round" switches to a circular pill.

<CfIconButton size="sm" aria-label="Star" />
<CfIconButton size="md" aria-label="Star" />
<CfIconButton size="lg" aria-label="Star" />
<CfIconButton shape="round" aria-label="Round" />

<CfIconButton size="sm" aria-label="Star" />
<CfIconButton size="md" aria-label="Star" />
<CfIconButton size="lg" aria-label="Star" />
<CfIconButton shape="round" aria-label="Round" />

States

pressed toggles selected state (auto-sets aria-pressed); loading and disabled show a spinner and disabled style respectively.

已固定

<CfIconButton :pressed="true" aria-label="Pin" />
<CfIconButton variant="danger" :pressed="true" aria-label="Favorite" />
<CfIconButton loading aria-label="Loading" />
<CfIconButton disabled aria-label="Disabled" />

<CfIconButton pressed aria-label="Pin" />
<CfIconButton variant="danger" pressed aria-label="Favorite" />
<CfIconButton loading aria-label="Loading" />
<CfIconButton disabled aria-label="Disabled" />

API

Prop	Type	Default	Description
`variant`	`'default' \| 'primary' \| 'danger'`	`'default'`	Visual variant
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size
`shape`	`'square' \| 'round'`	`'square'`	Shape
`pressed`	`boolean`	`false`	Toggle state, outputs `aria-pressed`
`loading`	`boolean`	`false`	Show spinner
`disabled`	`boolean`	`false`	Disabled
Default slot / `children`	—	—	Icon content
`badge` slot / `badge` prop	—	—	Top-right badge

a11y: aria-label is required, otherwise screen readers cannot announce the button’s purpose.