Krizaka
Documentation
UI

Sensual button

Orochia's signature call to action: the velvet → magenta gradient with the sheen, as a variant of the Krizaka button.

WebStableActions

Web — React, from @krizaka/orochia-design-system. The Orochia 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

The @krizaka/ui Button has the platform's variants (primary, secondary, outline, ghost, danger). Orochia's money moments — a tip, a subscription, a bid — wear the brand gradient. orochiaButton extends buttonVariants with one variant, sensual, and keeps every other variant, size and shape of the primitive: extended, never copied.

Built onButton

When to use

  • The one action of a screen that pays a creator: send a tip, subscribe, place a bid, back a challenge.
  • The main call to action of a marketing block (become a creator).
  • On a link styled as a button: buttonVariants-style classes on Button asChild.

When not to use

  • For a second action next to it (cancel, details): one sensual button per view.Use instead: Button
  • For a destructive action (delete, withdraw).Use instead: Confirm button
  • For an icon-only action.Use instead: Button

Installation

Install

npm install @krizaka/orochia-design-system @krizaka/ui && npm install -D tailwindcss @krizaka/tailwind

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";
@import "@krizaka/orochia-design-system/theme.css";
@import "@krizaka/tokens/brands/orochia.css";

Import

import { orochiaButton } from "@krizaka/orochia-design-system/classes";

Examples

Send a tip

The money moment of a video page: the amount in the label, a pill.

Subscribe to a creator

Large, on a profile header, next to a quiet secondary action.

Place a bid

In an auction panel, with its pending state while the bid is escrowed.

Props

The classes of a Button (or of a link styled as one).

PropTypeDefaultDescription
variant"sensual" | "primary" | "gradient" | "secondary" | "outline" | "ghost" | "danger"secondaryAdded by Orochia: sensual. From buttonVariants (@krizaka/ui): primary, gradient, secondary, outline, ghost, danger.
size"sm" | "md" | "lg" | "icon"mdFrom buttonVariants (@krizaka/ui): sm, md, lg, icon.
shape"rounded" | "pill"roundedFrom buttonVariants (@krizaka/ui): rounded, pill.
classNamestring—Extra classes, merged last: an override always wins.

Accessibility

  • The primitive's: a native <button> (or the child with asChild), its focus ring, loading sets aria-busy.
  • White text on the gradient reads at WCAG AA in both themes (4.6:1 on the magenta stop, tested).
  • The sheen stops under prefers-reduced-motion.

Best practices

  • One per view: the gradient says "this is the money moment" — two of them say nothing.
  • Say the amount in the label when there is one: Tip $5, Bid $120.
  • shape: "pill" and size: "lg" for a primary call to action; the default shape on a dense card.
  • Server components take orochiaButton from @krizaka/orochia-design-system/classes (no client code).

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

Foundations

Previous

Social icon

Next

On this page

Why it exists above Krizaka UIWhen to useInstallationExamplesPropsAccessibilityBest practicesRelated components