action · Normal DOM only

IconButton

Square button for a single icon — same variant × accent matrix as Button. Requires aria-label.

Use IconButton for compact actions in dense surfaces (table rows, toolbars, card headers). The visual matrix matches Button exactly — primary / secondary / tertiary × default / blue / danger × sm / md / lg — so picking the right pair is muscle memory.

Inside a Twenty front-component, prefer the bridge import

This IconButton is Radix-based and uses data-* selectors that the Twenty Remote DOM bridge strips. For panel content, import { IconButton } from @8maverik8/twenty-design/twenty-ui — re-exports the same primitive from twenty-sdk/ui, which Twenty has verified inside front-component'ов.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { IconButton } from '@8maverik8/twenty-design';

Examples

Variants × accents

tsx
<IconButton aria-label="Edit"   icon={<IconEdit />}   variant="tertiary" />
<IconButton aria-label="Copy"   icon={<IconCopy />}   variant="secondary" />
<IconButton aria-label="Add"    icon={<IconPlus />}   variant="primary" accent="blue" />
<IconButton aria-label="Delete" icon={<IconTrash />}  variant="primary" accent="danger" />

Variants

variant

primaryFilled.

secondaryOutlined.

tertiarydefaultGhost — most common in toolbars.

accent

defaultdefaultNeutral chrome.

blueAffirmative — single primary action.

dangerIrreversible — delete, revoke.

size

sm24 px — dense lists.

mddefault28 px — toolbars, default.

lg32 px — primary header actions.

Guidelines

✓

Always provide aria-label.The button has no visible text — screen readers depend on aria-label entirely.

✓

Use tertiary as the default in toolbars.Filled icon buttons clustered together look like a status indicator, not actions.

Use a 16+ px icon inside an IconButton.The icon should sit ~6 px in from each side of the button.