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, depuis @krizaka/orochia-design-system. L'app mobile Orochia prend les tokens du kit, pas ses composants. Stable : son API ne change qu’à une version majeure.

Pourquoi il existe au-dessus de 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.

Repose surButton

Quand l’utiliser

  • 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.

Quand ne pas l’utiliser

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

Installation

Installer

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";

Importer

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

Exemples

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).

PropTypeDéfautDescription
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.

Accessibilité

  • 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.

Bonnes pratiques

  • 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).

Généré depuis le code de @krizaka/orochia-design-system 4.1.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub

Fondations

Précédent

Social icon

Suivant

Sur cette page

Pourquoi il existe au-dessus de Krizaka UIQuand l’utiliserInstallationExemplesPropsAccessibilitéBonnes pratiquesComposants liés