The @krizaka/ui button with the Orazaka 1.x default kept: without a variant, it is the primary (orange) button.

WebStableActions

Web — React, from @krizaka/orazaka-design-system. The Orazaka mobile app takes the kit's tokens, not its components. Stable: its API only changes in a major version.

Why it exists above Krizaka UI

Orazaka 1.x buttons were primary by default; the platform's default is secondary. This adapter keeps the 1.x default so the apps written against it look the same — everything else is the primitive's.

Built onButton

When to use

In code already importing Button from @krizaka/orazaka-design-system.

When not to use

In new code: import Button from @krizaka/ui/button and say the variant.Use instead: Button

Installation

Install

npm install @krizaka/orazaka-design-system && npm install -D tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/orazaka-design-system/theme.css";

The package ships its TypeScript sources: add it to transpilePackages (with @krizaka/orazaka-shared and @krizaka/ui).

Import

import { Button } from "@krizaka/orazaka-design-system";

Examples

Send a prompt

The primary by default; locked while the answer is generated.

Props

This module has no component props: see the import and the preview above.

Accessibility

The primitive's: a native <button>, its focus ring, loading sets aria-busy.

Best practices

One primary action per view: pass variant="secondary" or "ghost" to the others.
Lock it while sending (disabled + loading): the input-blocking rule (ERR-126).

Generated from the code of @krizaka/orazaka-design-system 2.5.0: its meta.ts, its examples and its types.Edit this documentation on GitHub

Button