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 + MobileBetaFeedback

Web and mobile — the same component for React and React Native. Beta: its API may still change in a minor version.

When to use

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

When not to use

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

Installation

Install

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

Styles

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

Import

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

Examples

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

PropTypeDefaultDescription
titlerequiredReactNode—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".

PropTypeDefaultDescription
titlerequiredReactNode—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).

PropTypeDefaultDescription
titlerequiredReactNode—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".

PropTypeDefaultDescription
titlerequiredReactNode—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".

PropTypeDefaultDescription
titlerequiredReactNode—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.

Accessibility

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

Best practices

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

Generated from the code of @krizaka/ui 2.8.0: its meta.ts, its examples and its types.Edit this documentation on 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.

On this page

When to useInstallationExamplesPropsAccessibilityBest practicesRelated components