Web et mobile — le même composant pour React et React Native. Bêta : son API peut encore changer à une version mineure.

Installation

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

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

import { MascotState, ErrorState, SuccessState, LoadingState, WelcomeState } from "@krizaka/ui/mascot-state";

Exemples

Props

Accessibilité

• role="alert" for an error, role="status" otherwise: announced when it appears; aria-busy while thinking.
• The bird is decorative: the title and the description carry the meaning.
• The staged arrival (bird, words, action) and the bird's gesture stop under prefers-reduced-motion and with animated={false}.

Bonnes pratiques

• Choose the bird by the job, not by the mood: the owl reads (documents, search), the falcon watches (security, verification), the duck builds (code, uploads), the flamingo answers and gets paid (support, payments), the pigeon delivers (messages, notifications), the lovebird introduces (matches, introductions).
• One bird per screen: a moment, never decoration in working content.
• The title says what happened in a few words, the description what comes next; one action — the way out.
• titleAs="h1" when the state is the whole page (a 404), so the page keeps a heading.

Composants liés

• MascotsThe Krizaka flock: six birds (falcon, owl, duck, flamingo, pigeon, lovebird) in five moods, drawn in the product's brand colours.
• Empty stateWhat a list, a search or a panel says when it has nothing to show: an icon, a title, a line and an action.
• AlertA message in the flow of the page: a tone, an icon, a title, a text and an optional action.
• ProgressHow far a task or a goal has come: a bar or a ring — with its words and time left, what is buffered ahead, its steps as segments, and a paused or failed state that says where it stopped.

Générée depuis le code de @krizaka/ui 2.8.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub