Button

The action: six looks, three sizes, three shapes (rounded, pill, the Krizaka cut corners) — and the whole life of an action built in: a wait traced by the loader glyph, its progress, a success or a failure drawn and announced.

Web + MobileStableActions

Web and mobile — the same component for React and React Native. Stable: its API only changes in a major version.

Why it is here. Used by Orochia, Orazaka, Yasakia, krizaka.com.

When to use

To run an action: submit a form, open a dialog, start an upload, save a draft.
One primary button for the main action of a view; secondary, outline or ghost for the others.
IconButton for a compact action shown by its icon alone (close, add, more), with a label for its name.

When not to use

To go to another page: use a link (asChild with your router's <Link> keeps the button look).
To turn a setting on or off, with an immediate effect.Use instead: Switch
For a destructive action that needs a second press to confirm, in place.Use instead: Confirm button
To choose one option among several, or filter a list.Use instead: Chip

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { Button, IconButton } from "@krizaka/ui/button";

Examples

Save, then confirm

Press it: the glyph traces the wait, a check draws itself, “Changes saved” is announced, then it returns to rest.

An export with progress

progress: the trace and a light fill grow across the button; it keeps its width and its colour.

A failure

status="error": a cross, one shake of the head, a ring of the danger colour — and the reason announced.

The signature action

shape="cut", the gradient, shimmer and magnetic: the one call to action of a hero; the arrow leans forward on hover.

Primary

The main action of a view: the accent.

Gradient

The brand's signature, accent → accent-2: a hero or a closing call to action, once per page.

Secondary

The default: a raised surface, for the other actions.

Outline

A lighter action next to a primary one.

Ghost

In toolbars and dense lists: no frame until hovered.

Danger

A destructive action: the border and the tint carry the danger, the label stays legible in both themes.

Sizes

sm, md (default) and lg.

Pill

shape="pill": fully rounded.

Disabled

Not available yet: out of the tab order.

Loading

While the action runs: disabled, aria-busy, data-loading, the glyph before the label.

As a link

asChild renders your <a> (or router link) with the button's look.

Read the docs

Icon button

IconButton: a square button holding an icon; label is its accessible name.

Props

Button

Prop	Type	Default	Description
`announce`	`string`	—	A message announced politely by assistive technology when it changes (“Saved”, “Upload failed”) — passed translated.
`asChild`	`boolean`	—	Renders the child (e.g. a <Link>) instead of the <button>, with props, classes and ref merged.
`indicator`	`boolean`	`true`	Shows the glyph while `loading` / with a `status`. `false`: you draw your own.
`loading`	`boolean`	—	Disables and signals the wait (aria-busy, data-loading) and shows the Krizaka loader glyph before the label; the button keeps its colour.
`magnetic`	`boolean`	—	The button leans a few pixels toward a fine pointer (driven by `MotionObserver`; never under reduced motion or on touch).
`progress`	`number \| null`	—	Between 0 and 1, while `loading`: the glyph's trace and a light fill across the button grow to the value (an upload, an export).
`shape`	`"rounded" \| "pill" \| "cut"`	`rounded`	rounded · pill · cut (45° corners, the Krizaka chamfer).
`shimmer`	`boolean`	—	A sheen of light crosses the button on hover — for the one action a page is about.
`size`	`"icon" \| "sm" \| "md" \| "lg"`	`md`	sm · md · lg, or `icon` (a square).
`status`	`"success" \| "error" \| null`	—	How the action ended: `success` draws a check, `error` a cross (and the button shakes its head once); a ring of the status colour opens around it. Clear it to return to rest.
`variant`	`"danger" \| "primary" \| "gradient" \| "secondary" \| "outline" \| "ghost"`	`secondary`	The look: `primary` (the accent), `gradient` (accent → accent-2), `secondary` (a raised surface), `outline`, `ghost`, `danger`.

IconButton

An icon-only button: label is required, it is its accessible name. Loading or with a status, the glyph takes the icon's place.

Prop	Type	Default	Description
`label`required	`string`	—	The accessible name (and tooltip) of the button — required, passed translated.
`announce`	`string`	—	A message announced politely by assistive technology when it changes (“Saved”, “Upload failed”) — passed translated.
`asChild`	`boolean`	—	Renders the child (e.g. a <Link>) instead of the <button>, with props, classes and ref merged.
`indicator`	`boolean`	`true`	Shows the glyph while `loading` / with a `status`. `false`: you draw your own.
`loading`	`boolean`	—	Disables and signals the wait (aria-busy, data-loading) and shows the Krizaka loader glyph before the label; the button keeps its colour.
`magnetic`	`boolean`	—	The button leans a few pixels toward a fine pointer (driven by `MotionObserver`; never under reduced motion or on touch).
`progress`	`number \| null`	—	Between 0 and 1, while `loading`: the glyph's trace and a light fill across the button grow to the value (an upload, an export).
`shape`	`"rounded" \| "pill" \| "cut"`	`rounded`	rounded · pill · cut (45° corners, the Krizaka chamfer).
`shimmer`	`boolean`	—	A sheen of light crosses the button on hover — for the one action a page is about.
`size`	`"icon" \| "sm" \| "md" \| "lg"`	`icon`	sm · md · lg, or `icon` (a square).
`status`	`"success" \| "error" \| null`	—	How the action ended: `success` draws a check, `error` a cross (and the button shakes its head once); a ring of the status colour opens around it. Clear it to return to rest.
`variant`	`"danger" \| "primary" \| "gradient" \| "secondary" \| "outline" \| "ghost"`	`secondary`	The look: `primary` (the accent), `gradient` (accent → accent-2), `secondary` (a raised surface), `outline`, `ghost`, `danger`.

Accessibility

A native <button type="button">: the role, the focus and the keyboard come from the platform.
IconButton requires label: it becomes the aria-label of a button that shows no text.
loading sets aria-busy and disables the button; disabled keeps it out of the tab order.
announce renders a polite live region next to the button: the result of the action is heard, not only seen.
Under prefers-reduced-motion nothing moves (no shake, no lean, no sheen): the check, the cross and the status colour still say it.

Keyboard

Keys	Action
`Enter / Space`	Runs the action.
`Tab`	Moves the focus to the next control; the focus ring uses `--kz-ring`.

Best practices

Name the action with a verb: “Save”, “Send the invitation” — not “OK” or “Yes”.
One primary per view; the danger variant only for what destroys or cannot be undone.
loading while the action runs: the button is disabled, says it is busy and draws the glyph; add progress when you know how far it is.
End with status (success / error) and announce the result in words: sighted people see the check, everyone hears “Saved”. Clear the status after a moment.
shape="cut", shimmer and magnetic are the signature: keep them for the one action a page is about.
Style a link without the component with buttonVariants({ variant, size }).

Generated from the code of @krizaka/ui 3.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub

Button

When to use

When not to use

Installation

Examples

Save, then confirm

An export with progress

A failure

The signature action

Primary

Gradient

Secondary

Outline

Ghost

Danger

Sizes

Pill

Disabled

Loading

As a link

Icon button

Props

Accessibility

Keyboard

Best practices

Related components

On this page