Components

Button

The primary action trigger. Built on React Aria for full keyboard and screen-reader support. Colour, size, icon, and state variants are all driven from config/design-system.config.ts.

Component Playground

Live instance - the controls read their options from the same config that drives the Variants section below.

primary · sm

Controls

Colour - standard

Colour - destructive

Size

Label

Variants

Choose a colour based on the action's visual weight and context. Destructive variants are for irreversible actions.

Standard

Destructive

Sizes

Size affects padding, font-size, and icon dimensions.

All sizes - primary

With icons

Pass any @untitledui/icons component as iconLeading or iconTrailing. Pass only an icon (no children) for an icon-only button.

Leading icon

Trailing icon

Both icons

Icon only

States

Disabled dims the button and prevents interaction. Loading shows a spinner and sets isPending on the underlying React Aria button.

Disabled

Loading - spinner only

Loading - spinner + text

As link

Pass an href prop and the button renders as an <a> tag (via React Aria Link). All variants and sizes work the same.

Link buttons

Go somewhere View docs Learn more

API

Prop	Type	Default
`color`	`"primary" \| "secondary" \| "tertiary" \| "link-color" \| "link-gray" \| "primary-destructive" \| "secondary-destructive" \| "tertiary-destructive" \| "link-destructive"`	`"primary"`
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"sm"`
`iconLeading`	`FC \| ReactNode`	`-`
`iconTrailing`	`FC \| ReactNode`	`-`
`isDisabled`	`boolean`	`false`
`isLoading`	`boolean`	`false`
`showTextWhileLoading`	`boolean`	`false`
`href`	`string`	`- (renders <a>)`

Token anatomy

Each colour variant maps directly to Untitled UI semantic tokens defined in globals.css. Swap the --ui-bg-brand-* variables to make every primary button DEW-branded.

Variant	Background token	Text token	Ring token
primary	`bg-brand-solid`	`text-white`	`ring-transparent`
secondary	`bg-primary`	`text-secondary`	`ring-primary`
tertiary	`transparent`	`text-tertiary`	`none`
primary-destructive	`bg-error-solid`	`text-white`	`ring-transparent`
secondary-destructive	`bg-primary`	`text-error-primary`	`ring-error_subtle`
tertiary-destructive	`transparent`	`text-error-primary`	`none`

Usage

import { Button } from "@/components/base/buttons/button";

<Button color="primary" size="sm">
  Click me
</Button>

Figma

No linked Figma file yet - this component was pulled in via the Untitled UI CLI, not designed in Figma first.