Skip to content

Button

A native button with primary, secondary and inverse tones.

import { Button } from '@brand-studio/ui';

export default function ButtonDemo() {
  return <Button>Save changes</Button>;
}

Installation

pnpm add @brand-studio/ui

npm install @brand-studio/ui

yarn add @brand-studio/ui

bun add @brand-studio/ui

Install the peer dependencies
```
npm install react react-dom
```
Import the stylesheet once
```
import '@brand-studio/ui/styles.css';
```

Wrap your app in a brand theme

import { BrandTheme, Button } from '@brand-studio/ui';
import brand from './brand.json';

<BrandTheme palette={brand.tokens} mode="system">
  {/* your app */}
</BrandTheme>

Usage

import { Button } from '@brand-studio/ui';

<Button>Save changes</Button>

Examples

Secondary

import { Button } from '@brand-studio/ui';

export default function ButtonSecondary() {
  return <Button tone="secondary">Cancel</Button>;
}

Pill

shape="pill" overrides the contract radius.

import { Button } from '@brand-studio/ui';

export default function ButtonPill() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}>
      <Button shape="pill">Start a trial</Button>
      <Button shape="pill" tone="secondary">See pricing</Button>
    </div>
  );
}

Inverse

Use tone="inverse" on an accent field or photography.

import { Button } from '@brand-studio/ui';

export default function ButtonInverse() {
  return (
    <div style={{ padding: 32, borderRadius: 12, background: 'var(--bs-accent)' }}>
      <Button tone="inverse">Book a table</Button>
    </div>
  );
}

Loading and disabled

loading disables the button and sets aria-busy.

import { Button } from '@brand-studio/ui';

export default function ButtonLoading() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}>
      <Button loading>Saving</Button>
      <Button disabled>Save changes</Button>
    </div>
  );
}

Accessibility

Renders a native <button> with type="button" unless you pass another type, so it never submits a form by accident.
The focus ring uses the brand accent and shows only for keyboard focus.

API Reference

Prop	Type	Default
`tone?`	`"inverse" \| "primary" \| "secondary"`	`'primary'`
`shape?`	`"default" \| "pill"`	`'default'`
`loading?`	`boolean`	`false`

Also accepts every ButtonHTMLAttributes<HTMLButtonElement> attribute.