Skip to content
Atomus

Button

Triggers an action. Five hierarchies, five sizes from 24 to 56px.

ButtonLive · light and dark follow the theme switch

Usage

Section titled “Usage”
import { Button } from '@stanvision/atomus-react';


<Button hierarchy="primary" size="md" iconLeading={<PlusIcon />}>
  New project
</Button>

Triggers an action. One primary per view for the main action; secondary or outline for the rest; tertiary in toolbars and dense rows; link for inline, low-emphasis actions.

Provide

Section titled “Provide”
  • children — the label: a verb in sentence case (“Save changes”).
  • hierarchy — primary · secondary · outline · tertiary · link (Figma: Hierarchy; default secondary).
  • size — xs 24 · sm 32 · md 40 · lg 48 · xl 56 (Figma: Size). Match the inputs on the same row.
  • iconLeading / iconTrailing — an icon element (Figma: Leading/Trailing icon swap). iconOnly + aria-label for icon buttons.
  • loading — spinner, disabled while busy (Figma: State=Loading).

Do

Section titled “Do”
  • Put the primary action last in a button group, after Cancel.
  • Use lg/xl on marketing pages, md in product UI, sm/xs in tables and toolbars.

Don’t

Section titled “Don’t”
  • Don’t place two primary buttons side by side.
  • Don’t use a button to navigate — use a link.

In Figma

Section titled “In Figma”

Properties, variants and anatomy for the Figma component are on the Figma reference page. Prop names in React match the Figma property names.