Krizaka
Documentation

Mascot state

A moment told by a bird of the flock: nothing yet, a long wait, done, it failed, welcome — the bird of the job beside the words and the next action.

Web + MobileBêtaRetours

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

Quand l’utiliser

  • An empty list or search the person reaches for the first time (mood="empty", framed).
  • A page or a panel that failed: a 404, a lost connection, a refused payment (ErrorState).
  • The end of something that matters: a payment received, an identity verified, a message sent (SuccessState).
  • A task of several seconds or more, with what runs in words (LoadingState).
  • The first screen of an onboarding (WelcomeState).

Quand ne pas l’utiliser

  • A short wait of a second or two, or a list that is loading.À la place : Skeleton
  • An error inside a form or a card, next to what it concerns.À la place : Alert
  • A result that needs no moment: a saved setting, a copied link.À la place : Toast
  • A plain empty list in a dense screen (a table, a sidebar).À la place : Empty state

Installation

Installer

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

Styles

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

Importer

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

Exemples

Nothing yet

A framed empty list: the pigeon has no message to deliver yet.

No messages yet

Answer a challenge or tip a creator to start a conversation.

It failed

A page that does not exist: the owl did not find it, with the way back.

Done

A payment received: the flamingo answers, the next step beside it.

Payment received

120 credits are on your balance. The receipt is in your email.

A long task

The duck builds while the job runs, in a card (layout="inline").

Building the preview

About two minutes. You can leave this page.

Welcome

An onboarding's first screen: the falcon keeps the account safe.

Welcome, Eric

First, protect your account with a second factor. It takes a minute.

Props

ErrorState

It failed: what went wrong and what to do (role="alert"). MascotState with mood="error".

PropTypeDéfautDescription
titlerequisReactNode—What happened, in a few words ("No videos yet", "Payment received").
actionReactNode—What to do next: a Button, a link. One, at most two.
animatedboolean—The bird's gesture and the staged arrival. Off with false; always off under prefers-reduced-motion.
bird"falcon" | "owl" | "duck" | "flamingo" | "pigeon" | "lovebird"—The bird whose job the moment is about: owl (documents, reading), falcon (security, verification), duck (code, building), flamingo (answers, payments), pigeon (delivery, notifications), lovebird (introductions). One bird per idea.
descriptionReactNode—Why, or what comes next.
framedboolean—A dashed frame on the raised surface, for an empty list or panel.
layout"inline" | "stacked"—stacked (default): the bird above centred words — a page, a panel. inline: the bird beside the words — a card, a row of a form.
size"sm" | "md" | "lg"—The bird's size: sm 64 px, md 96 px (default), lg 128 px.
titleAs"h1" | "h2" | "h3" | "p"—The level of the title (default p): h1 on a full page (a 404), h2/h3 inside a page.
toneMascotTone—brand (default): the product's accent. own: the bird's colours of the Krizaka story.

LoadingState

A long task runs (aria-busy): what runs, beside the bird. MascotState with mood="thinking".

PropTypeDéfautDescription
titlerequisReactNode—What happened, in a few words ("No videos yet", "Payment received").
actionReactNode—What to do next: a Button, a link. One, at most two.
animatedboolean—The bird's gesture and the staged arrival. Off with false; always off under prefers-reduced-motion.
bird"falcon" | "owl" | "duck" | "flamingo" | "pigeon" | "lovebird"—The bird whose job the moment is about: owl (documents, reading), falcon (security, verification), duck (code, building), flamingo (answers, payments), pigeon (delivery, notifications), lovebird (introductions). One bird per idea.
descriptionReactNode—Why, or what comes next.
framedboolean—A dashed frame on the raised surface, for an empty list or panel.
layout"inline" | "stacked"—stacked (default): the bird above centred words — a page, a panel. inline: the bird beside the words — a card, a row of a form.
size"sm" | "md" | "lg"—The bird's size: sm 64 px, md 96 px (default), lg 128 px.
titleAs"h1" | "h2" | "h3" | "p"—The level of the title (default p): h1 on a full page (a 404), h2/h3 inside a page.
toneMascotTone—brand (default): the product's accent. own: the bird's colours of the Krizaka story.

MascotState

A moment told by a bird of the flock: an empty list, a long wait, a success, an error, a welcome. Announced to assistive technology — role="alert" for an error, role="status" otherwise (aria-busy while thinking).

PropTypeDéfautDescription
titlerequisReactNode—What happened, in a few words ("No videos yet", "Payment received").
actionReactNode—What to do next: a Button, a link. One, at most two.
animatedbooleantrueThe bird's gesture and the staged arrival. Off with false; always off under prefers-reduced-motion.
bird"falcon" | "owl" | "duck" | "flamingo" | "pigeon" | "lovebird"owlThe bird whose job the moment is about: owl (documents, reading), falcon (security, verification), duck (code, building), flamingo (answers, payments), pigeon (delivery, notifications), lovebird (introductions). One bird per idea.
descriptionReactNode—Why, or what comes next.
framedboolean—A dashed frame on the raised surface, for an empty list or panel.
layout"inline" | "stacked"—stacked (default): the bird above centred words — a page, a panel. inline: the bird beside the words — a card, a row of a form.
mood"success" | "error" | "empty" | "welcome" | "thinking"emptyThe moment: empty (nothing yet), thinking (a long task runs), success (done), error (it failed), welcome.
size"sm" | "md" | "lg"mdThe bird's size: sm 64 px, md 96 px (default), lg 128 px.
titleAs"h1" | "h2" | "h3" | "p"pThe level of the title (default p): h1 on a full page (a 404), h2/h3 inside a page.
toneMascotTone—brand (default): the product's accent. own: the bird's colours of the Krizaka story.

SuccessState

It is done: a payment, a verification, a delivery, a sent message. MascotState with mood="success".

PropTypeDéfautDescription
titlerequisReactNode—What happened, in a few words ("No videos yet", "Payment received").
actionReactNode—What to do next: a Button, a link. One, at most two.
animatedboolean—The bird's gesture and the staged arrival. Off with false; always off under prefers-reduced-motion.
bird"falcon" | "owl" | "duck" | "flamingo" | "pigeon" | "lovebird"—The bird whose job the moment is about: owl (documents, reading), falcon (security, verification), duck (code, building), flamingo (answers, payments), pigeon (delivery, notifications), lovebird (introductions). One bird per idea.
descriptionReactNode—Why, or what comes next.
framedboolean—A dashed frame on the raised surface, for an empty list or panel.
layout"inline" | "stacked"—stacked (default): the bird above centred words — a page, a panel. inline: the bird beside the words — a card, a row of a form.
size"sm" | "md" | "lg"—The bird's size: sm 64 px, md 96 px (default), lg 128 px.
titleAs"h1" | "h2" | "h3" | "p"—The level of the title (default p): h1 on a full page (a 404), h2/h3 inside a page.
toneMascotTone—brand (default): the product's accent. own: the bird's colours of the Krizaka story.

WelcomeState

A first screen, an onboarding step. MascotState with mood="welcome".

PropTypeDéfautDescription
titlerequisReactNode—What happened, in a few words ("No videos yet", "Payment received").
actionReactNode—What to do next: a Button, a link. One, at most two.
animatedboolean—The bird's gesture and the staged arrival. Off with false; always off under prefers-reduced-motion.
bird"falcon" | "owl" | "duck" | "flamingo" | "pigeon" | "lovebird"—The bird whose job the moment is about: owl (documents, reading), falcon (security, verification), duck (code, building), flamingo (answers, payments), pigeon (delivery, notifications), lovebird (introductions). One bird per idea.
descriptionReactNode—Why, or what comes next.
framedboolean—A dashed frame on the raised surface, for an empty list or panel.
layout"inline" | "stacked"—stacked (default): the bird above centred words — a page, a panel. inline: the bird beside the words — a card, a row of a form.
size"sm" | "md" | "lg"—The bird's size: sm 64 px, md 96 px (default), lg 128 px.
titleAs"h1" | "h2" | "h3" | "p"—The level of the title (default p): h1 on a full page (a 404), h2/h3 inside a page.
toneMascotTone—brand (default): the product's accent. own: the bird's colours of the Krizaka story.

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.

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

Loader

A wait from start to end: nothing for the first instants, then the Krizaka glyph with its words, a percentage and an ETA, held long enough to read, ending on a check or a cross that is drawn and announced — and LoadingRegion, which hands a region over to a skeleton of its shape.

Mascots

The Krizaka flock: six birds (falcon, owl, duck, flamingo, pigeon, lovebird) in five moods, drawn in the product's brand colours — and the phoenix, the comeback.

Sur cette page

Quand l’utiliserInstallationExemplesPropsAccessibilitéBonnes pratiquesComposants liés