Button

Trigger an action. Built on the native <button>; fully keyboard + screen-reader accessible.

stable
since v0.1.0
2.14 kB
primitive
action

Preview

tsx

import { Button } from '@arshad-shah/cynosure-react';

export default function Example() {
  return <Button>Click me</Button>;
}

Variants

Button ships five visual variants — solid, soft, outline, ghost, and link — each available in five color schemes: accent, neutral, success, danger, and warning.

Preview

Open

tsx

import { Button } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', alignItems: 'center' }}>
      <Button variant="solid">Solid</Button>
      <Button variant="soft">Soft</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="link">Link</Button>
    </div>
  );
}

Sizes

Five sizes are available: xs, sm, md (default), lg, and xl.

Preview

Open

tsx

import { Button } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', alignItems: 'center' }}>
      <Button size="xs">Extra Small</Button>
      <Button size="sm">Small</Button>
      <Button size="md">Medium</Button>
      <Button size="lg">Large</Button>
      <Button size="xl">Extra Large</Button>
    </div>
  );
}

With icons

Use leftIcon or rightIcon to attach a decorative icon without breaking the accessible label.

Preview

Open

tsx

import { Button } from '@arshad-shah/cynosure-react';
import { ArrowRight, Download } from 'lucide-react';

export default function Example() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', alignItems: 'center' }}>
      <Button leftIcon={<Download size={16} />}>Download</Button>
      <Button rightIcon={<ArrowRight size={16} />}>Continue</Button>
      <Button
        leftIcon={<Download size={16} />}
        rightIcon={<ArrowRight size={16} />}
        variant="outline"
      >
        With both icons
      </Button>
    </div>
  );
}

Loading state

Pass loading to show a spinner and set aria-busy="true". The button is automatically disabled while loading so double-submits are prevented.

Preview

Open

tsx

import { Button } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', alignItems: 'center' }}>
      <Button loading>Saving…</Button>
      <Button loading variant="outline">
        Loading
      </Button>
      <Button loading variant="soft" colorScheme="success">
        Processing
      </Button>
    </div>
  );
}

Disabled state

Preview

Open

tsx

import { Button } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', alignItems: 'center' }}>
      <Button disabled>Disabled</Button>
      <Button disabled variant="outline">
        Disabled outline
      </Button>
      <Button disabled variant="ghost">
        Disabled ghost
      </Button>
    </div>
  );
}

API

PropTypeDefaultDescription

variant

"solid"|"soft"|"outline"|"ghost"|"link"

"solid"

Visual style. `solid` for primary actions; `soft`/`outline`/`ghost` for less prominent ones; `link` to render as inline text.

colorScheme

"accent"|"neutral"|"success"|"danger"|"warning"

"accent"

Colour palette. `accent` is the brand colour; semantic schemes carry meaning (`danger` for destructive actions, `success` for confirmations).

size

"xs"|"sm"|"md"|"lg"|"xl"

"md"

Control size — affects height, padding, font size, and icon size. Available: `xs`, `sm`, `md`, `lg`, `xl`.

shape

"default"|"square"|"pill"

"default"

Geometry preset. `square` removes horizontal padding for icon-only buttons; `pill` rounds the corners to a fully-rounded radius.

fullWidth

boolean

—

Stretches the button to fill its container's inline size.

boolean

false

Renders a spinner inside the button and blocks interaction. The `disabled` and `aria-busy` attributes are set automatically.

leftIcon

ReactNode

—

Icon rendered before the label.

rightIcon

ReactNode

—

Icon rendered after the label.

asChild

boolean

—

When `true`, merges props onto the immediate child (Radix `Slot` pattern) instead of rendering a `<button>`. Useful for rendering `<Link>`s that look like buttons.

className

string

—

style

CSSProperties

—

Accessibility

Rendered as a native <button> — inherits all ARIA semantics for free.
loading sets aria-busy="true"; the visible label stays announced.
Focus outline uses the token-driven focus ring; never removed.
disabled is forwarded directly to the host element; loading also disables the button at the DOM level.

Recipes

Pair with <Tooltip> when the label is icon-only.
Use variant="ghost" inside toolbars to reduce visual weight.
Use asChild to render a link styled as a button: <Button asChild><a href="/next">Next</a></Button>.
Use shape="pill" for rounded pill-style buttons, or shape="square" for icon-only square buttons.