Button

Buttons matching BoardUI’s design system - primary, secondary, ghost, and danger variants in three sizes, with leading/trailing icon slots, an icon-only mode, and semantic hover, press, and disabled states.

Installation

You can add this button component using our CLI or manually:

Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.

CLI

Manual

The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.

npx boardui@latest add button

Variants

Four variants via the variant prop. Primary and danger use vertical gradients, secondary is a bordered surface, and ghost uses the subtle blue action surface.

<Button variant="primary">Primary</Button>     {/* blue gradient (default) */}<Button variant="secondary">Secondary</Button> {/* white surface + hairline border */}<Button variant="ghost">Ghost</Button>         {/* blue-100 semantic surface */}<Button variant="danger">Danger</Button>       {/* red gradient */}

Sizes

Three sizes - medium (36px, the default), small (32px), and xs (24px). Icon-only buttons become square at every size.

<Button size="medium">Medium</Button> {/* 36px (default) */}<Button size="small">Small</Button>   {/* 32px */}<Button size="xs">Xs</Button>         {/* 24px */}

Icons

Pass any Remix Icon component reference to leadingIcon / trailingIcon. Combine iconOnly with an aria-label for square icon buttons.

import { RiAddLine, RiArrowRightLine } from "@remixicon/react";
{/* Pass component references, not rendered elements */}<Button leadingIcon={RiAddLine}>New project</Button><Button trailingIcon={RiArrowRightLine}>Continue</Button>
{/* Icon-only requires an aria-label */}<Button iconOnly leadingIcon={RiAddLine} aria-label="Add" />

Disabled

The native disabled attribute switches every variant to its muted disabled surface.