Button

When to useLink to "When to use"

• solid + accent: the one main action in a view (Save, Create). Aim for at most one per screen region.
• outline + neutral (default): secondary actions next to it (Cancel, Back).
• soft: supporting actions that should still read as buttons in dense UI (toolbars, cards).
• ghost: low-emphasis actions in already busy chrome (table rows, panel headers).
• tone="danger": destructive actions. Pair with a confirmation when the action cannot be undone.

Use something else when:

• the button has an icon and no visible text: IconButton, which requires a label and shows it as a tooltip
• it navigates: Link
• it picks one of a few options: SegmentedControl
• it turns a setting on or off: Switch

UsageLink to "Usage"

import { Button } from "@arshad-shah/cynosure";
import { download, trash } from "@arshad-shah/cynosure/icons";

<Button variant="solid" tone="accent" icon={download} onClick={save}>Export</Button>
<Button>Cancel</Button>
<Button variant="soft" tone="danger" icon={trash}>Delete</Button>
<Button loading={saving}>Save</Button>
<Button type="submit">Send</Button>

Sizes and iconsLink to "Sizes and icons"

sm, md and lg match TextField, Select and SearchField heights, so mixed rows line up. Icons sit at the start or end edge and flip in right-to-left layouts.

xs (20px, smaller text and icon) is for dense desktop chrome such as toolbars and inspectors. It matches the xs of TextField, Select, IconButton and SegmentedControl. Only the look is small: the button is still 24px to press, and 44px on coarse pointers.

StatesLink to "States"

• Loading: shows LoadingDots, sets aria-busy and ignores clicks. It keeps its width, so the layout doesn't jump.
• Pressed: pressed makes it a toggle button (aria-pressed).
• Disabled: dims the button and blocks activation. Prefer explaining why an action is unavailable over silently disabling it.

Links and the current pageLink to "Links and the current page"

With href the button is a real link (target says where it opens; only safe URLs are linked). A link takes target, aria-label, aria-current, className, style, data-testid and onClick; the other button attributes do not apply to it.

aria-current marks the current item of a set and is set on the element in both forms: aria-current="page" on a link to the page being shown, aria-current="step" on the button of the current step.

<Button href="/reports" aria-current="page" variant="soft" tone="accent">Reports</Button>
<Button href="/billing">Billing</Button>

PropsLink to "Props"

Behaviour and accessibilityLink to "Behaviour and accessibility"

• Forms: type defaults to button, so it never submits a form by accident. Pass type="submit" to submit.
• Contrast: every variant and tone keeps text at 4.5:1 or better in light, dark and high-contrast themes (tested).
• Long labels: truncate with an ellipsis instead of wrapping.
• Current item: aria-current is announced with the name ("Reports, current page"). It does not change the look; pick the variant and tone yourself.

TouchLink to "Touch"

The hit area is at least 24px, growing to 44px on coarse pointers (phones and tablets) without changing the visible size.

ThemingLink to "Theming"

Tokens: --cy-button-height-{xs,sm,md,lg}, --cy-button-radius, --cy-button-padding-inline, --cy-button-padding-inline-xs, --cy-button-gap, --cy-button-font-weight, --cy-button-max-width, --cy-button-solid-shadow, --cy-button-soft-mix, --cy-button-outline-mix, --cy-button-press-scale, and --cy-button-hover-bg and --cy-button-hover-ink (the hover fill and text colour, for one button whose hover differs from its variant, such as TitleBar's close control).

createTheme({ accent: "#2563eb", components: { button: { radius: "999px", fontWeight: "600" } } });

className and style are for layout only (margin, placement). Change the look through tokens so every product stays consistent.

RelatedLink to "Related"

IconButton · LoadingDots · Link · Toolbar