Button

Triggers an action. Seven variants, six tones and six sizes; the shape, type, depth and press come from the village.

Installation

npx rasengan-ui add button

Or with the shadcn CLI, from the registry:

npx shadcn@latest add https://ui.rasengan.dev/r/base/button.json

Usage

import { Button } from "@/components/ui/button";
 
export function Save() {
  return <Button onClick={save}>Save changes</Button>;
}

Variants

default for the main action of a view, secondary and outline for the others, soft for a quieter one in colour, ghost inside toolbars and lists, destructive for an action that deletes, and link for an action that reads as text. In Onmyōton, where the primary colour is the foreground, link is underlined: it cannot rely on colour alone.

<Button variant="outline">Preview</Button>
<Button variant="destructive">Delete project</Button>

Tones

tone is the colour, apart from the style: primary by default, neutral for the village's ink, and success, warning, info or destructive for an action that carries that meaning. It colours default, soft and link. outline and ghost keep their neutral look in primary, as in shadcn, and take the tone's colour in the others; secondary stays grey. variant="destructive" is shorthand for variant="default" tone="destructive".

<Button variant="soft" tone="success">Approve</Button>
<Button variant="outline" tone="destructive">Leave team</Button>

Sizes

sm, default and lg follow the village's control heights (--control-sm, --control-md, --control-lg): Iwa is denser than Kiri. icon-sm, icon and icon-lg are squares of those heights and need an aria-label.

<Button size="icon" aria-label="Add a teammate">
  <PlusIcon />
</Button>

As a link or another element

The button renders a <button>. To render another element with the button's look, pass it to render, or put buttonVariants() on it.

<Button render={<a href="/pricing" />} nativeButton={false}>See pricing</Button>
 
<Link to="/docs" className={buttonVariants({ variant: "outline" })}>Read the docs</Link>

Villages

The same demo in each village, light and dark, in the nature and greys picked above.

Accessibility

• A <button type="button">: it is focusable and fires on Enter and Space.
• The focus ring is the village's (a halo in Konoha and Kiri, a ring with a gap in Iwa) and only shows for the keyboard.
• disabled keeps the button out of the tab order. To keep it focusable while it can't be pressed (a loading state, for example), pass focusableWhenDisabled.
• An icon-only button needs an aria-label.

API reference

The props of Base UI's Button, plus:

buttonVariants({ variant, tone, size }) returns the same classes, for elements that should look like a button.