Button

Usage examples

import { Button, IconButton } from '@rookcom/monarch-react';

// MoreIcon, PlusIcon: demo icons from the docs site; use your own.

<Button size="xs">Extra small</Button>
<Button size="sm">Small</Button>
<Button size="md" leadingIcon={<PlusIcon />}>
  New ticket
</Button>
<Button size="lg" variant="primary" loading>
  Saving
</Button>
<Button disabled>Disabled</Button>
<IconButton label="More actions" icon={<MoreIcon />} />

import { Button } from '@rookcom/monarch-react';

<Button asChild variant="primary">
  <a href="#/components/button">Open ticket</a>
</Button>

import { Button } from '@rookcom/monarch-react';

<Button variant="success">Approve</Button>
<Button variant="warning">Mark at risk</Button>
<Button variant="brand" brandColor="#0f766e">
  Book a call
</Button>
<Button variant="brand" brandColor="#facc15">
  Join waitlist
</Button>
<Button variant="success" size="xs">
  Approve
</Button>

Purpose

Triggers an action in place: saving, submitting, opening a dialog or menu. IconButton is the square, icon-only form.

Design principles

• One primary button per view region; everything else is secondary or ghost.
• danger is for the final, destructive confirmation; danger-subtle for destructive actions that still need confirming.
• Labels are verbs that say what happens ("Save changes", not "OK").
• Never submits by accident: the default type is button.
• success and warning are status actions, used sparingly next to a neutral alternative.
• brand is for a tenant or customer colour (a hosted booking page, a public form). Contrast is guaranteed by the tokens engine, never by the caller.

API reference

import { Button, IconButton } from '@rookcom/monarch-react';

Both components forward their ref to the underlying <button> (or the child element with asChild).

All native button attributes pass through.

Generated from the TypeScript declarations of packages/react/src/components/actions/button.

Properties

Variants

States

Interaction behaviour

• Click, Enter and Space call onClick (native button behaviour).
• While disabled or loading, clicks are prevented and onClick is not called.
• With asChild, the child element (for example a router link) receives the classes, data attributes and handlers; no type attribute is added.
• leadingIcon and trailingIcon render in decorative spans.

Keyboard support

Accessibility

Role

button (or the child element’s role with asChild)

Accessible name

The visible label; IconButton requires label, which becomes aria-label.

• Icons are wrapped in aria-hidden spans, so they never add to the accessible name.
• Loading sets aria-busy="true" and aria-disabled="true" instead of disabled, so focus is not lost.
• IconButton cannot be rendered without a label: the type requires it.
• brand text contrast is computed, not assumed: a light brand colour gets dark text, a mid colour is darkened until white text passes.

Responsive behaviour

• Heights come from the --mn-control-* tokens and do not change with viewport width.
• block makes the button fill narrow containers such as mobile dialog footers.
• Labels do not wrap (white-space: nowrap).

Theme support

• Colours are Monarch semantic tokens only, so light, dark and more-contrast themes apply automatically.
• primary uses the product accent (--mn-color-accent-solid), so each Rook product gets its own accent with no code change.
• danger variants use the danger tokens, which do not change with the product accent; success and warning likewise use their status tokens.
• brand carries one derived colour set per theme and picks the one matching .dark / data-mn-theme / data-mn-contrast on an ancestor, so a tenant colour also adapts to dark and more-contrast themes.

Do and don't

Related components

• Link: Navigation that reads as text.
• DropdownMenu: Several related actions behind one button.
• Spinner: Loading indicator the button uses internally.
• Toolbar: Groups buttons with arrow-key navigation.

Dependencies

Testing coverage

• Defaults to type="button".
• Activates with click, Enter and Space.
• Stays focusable but inert while loading (aria-busy, aria-disabled, no click).
• Disables natively when disabled.
• Renders the child element with asChild, without a type attribute.
• Keeps the child element and spinner with asChild + loading, and both icons with asChild.
• Hides decorative icons from assistive technology.
• IconButton uses label as its accessible name and shows only the spinner while loading.
• success and warning expose their variant; xs its size.
• brand derives a fill and text for all four themes that meet 4.5:1 (7:1 in more contrast) for light, mid and dark brand colours, accepts #rgb, keeps caller styles, and falls back to the accent for an invalid colour.

Tests: packages/react/src/components/actions/button