Build / Atoms

IconButton

atom
play-fn

A square (or round) button containing only an icon.

import { IconButton } from '@meetcard/deck'

Example

<IconButton label="Share card" icon={<ShareIcon />} variant="ghost" />

Stories

Every preview below is the real component, rendered in this page from the same story Storybook runs. The width control resizes each preview's container; CSS media queries still follow the browser window, so breakpoint behaviour is worth checking in Storybook.

The label prop is the accessible name — the icon itself is hidden.

Default

Source

const Default = () => <IconButton label="More actions" icon={<MoreIcon />} onClick={fn()} />;

Every variant, in order of emphasis. ghost is the default for toolbars.

Variants

Source

const Variants = () => <Stack direction="row" gap={8} align="center">
    <IconButton label="More actions" icon={<MoreIcon />} onClick={fn()} variant="ghost" />
    <IconButton
        label="More actions"
        icon={<MoreIcon />}
        onClick={fn()}
        variant="secondary" />
    <IconButton label="More actions" icon={<MoreIcon />} onClick={fn()} variant="primary" />
    <IconButton
        label="More actions"
        icon={<MoreIcon />}
        onClick={fn()}
        variant="destructive" />
</Stack>;

Every size, on the same 32/40/48px grid as Button.

Sizes

Source

const Sizes = () => <Stack direction="row" gap={8} align="center">
    <IconButton label="More actions" icon={<MoreIcon />} onClick={fn()} size="sm" />
    <IconButton label="More actions" icon={<MoreIcon />} onClick={fn()} size="md" />
    <IconButton label="More actions" icon={<MoreIcon />} onClick={fn()} size="lg" />
</Stack>;

Round suits avatar overlays and floating actions.

Round

Source

const Round = () => <IconButton
    label="More actions"
    icon={<MoreIcon />}
    onClick={fn()}
    round
    variant="secondary" />;

Disabled. The label still names the action for a screen reader.

Disabled

Source

const Disabled = () => <IconButton label="More actions" icon={<MoreIcon />} onClick={fn()} disabled />;

Props

Prop	Type	Default	Description
`icon`required	`ReactNode`	—	The icon itself. Rendered `aria-hidden` — `label` is the name.
`label`required	`string`	—	Accessible name, required. An icon alone announces as "button" to a screen reader, so Deck makes the label impossible to forget.
`round`	`boolean`	`false`	Render as a circle. Good for avatars, overflow menus, and toolbars.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	—
`type`	`—`	`'button'`	—
`variant`	`'primary' \| 'secondary' \| 'ghost' \| 'destructive'`	`'ghost'`	—

Also accepts everything from Omit, so id, data-* and event handlers pass straight through.