Cajón Design System
Components

IconButton

Token-driven icon-only action button in the non-premium Harmonica baseline.

Variants

ghost (default), primary, filled, and outlined. These map directly to the standard archive preview rather than the premium glass or glow variants.

Usage

import { IconButton } from '@cajon-ui/react';

<IconButton label="Notifications" icon={<BellIcon />} />
<IconButton label="Settings" icon={<GearIcon />} variant="primary" />
<IconButton label="Next" icon={<ArrowRightIcon />} variant="filled" />

Props

PropTypeDefaultNotes
labelstringRequired accessible name
iconReactNodeIcon content
variantghost | primary | filled | outlinedghostVisual treatment
sizesm | md | lgmdControl size

On this page