Button

Buttons communicate actions users can take—submitting a form, confirming a choice, or triggering in-page behavior. These buttons share one interaction model across four visual variants and three sizes.

Interactive preview

Adjust props to see how the Button responds. The preview uses the same package import as your app.

Options

Props

The table below mirrors the public TypeScript API. When you add docgen later, you can generate this automatically; for now it is maintained by hand.

PropTypeDefaultDescription
variant"primary" | "secondary" | "ghost" | "danger""primary"Visual emphasis. Primary for the main action; secondary and ghost for supporting actions; danger for destructive work.
size"sm" | "md" | "lg""md"Padding and type size. Use sm in dense toolbars, lg for marketing-style CTAs.
fullWidthbooleanfalseMakes the button span the width of its container (common in mobile forms).
disabledboolean—Disables interaction and applies disabled styles. Avoid disabling without helper text when the reason isn’t obvious.
childrenReactNode—Visible label. Keep copy short (one to three words) when possible.
classNamestring""Additional Tailwind classes merged with the design system button styles.
...propsButtonHTMLAttributes<HTMLButtonElement>—Standard button attributes (type, onClick, aria-*, name, value, etc.).

Installation

Add the component and token packages to your app (workspace or registry):

Install packages
pnpm add @akanaka-design/components @akanaka-design/tokens

Import design tokens and component styles once at the root of your application so utilities and CSS variables resolve:

Styles (app root)
import "@akanaka-design/tokens/css";
import "@akanaka-design/components/styles.css";

Usage

Use the named export from @akanaka-design/components. Combine variant, size, and fullWidth to match layout and hierarchy.

Basic usage
import { Button } from "@akanaka-design/components";

export function Example() {
  return (
    <Button variant="primary" size="md">
      Save changes
    </Button>
  );
}

Full width

In narrow layouts or single-column forms, stretch the button to the container width:

Full width
<Button variant="primary" fullWidth>
  Submit
</Button>

Guidelines

When to use

  • The primary or secondary action for a view, dialog, or card
  • Destructive actions that need emphasis (danger variant)
  • Form submission when the action is explicit (Save, Delete, Continue)

When not to use

  • Plain navigation to another page—use a text link or a link styled as a button
  • Multiple competing primary actions—use at most one primary button per surface; demote the rest to secondary or ghost
  • Inline actions inside a sentence—use a link or a compact text-style control instead

Content

  • Use sentence case for labels ("Save changes", not "SAVE CHANGES")
  • Prefer verbs that describe the outcome ("Add item", "Send invite")
  • Keep labels short; if you need a sentence, reconsider whether a button is the right control