Krizaka
Documentation

Goal gauge

A goal counted in steps — 6 of 10 backers, 3 dares done, 3 seats left: a meter whose reached steps light one by one (or whose spent ones drain) when its chapter plays.

Web + MobileBetaData display

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

When to use

  • A challenge's goal, counted in backers, dares or steps.
  • What is left of something countable: seats, tickets, lives (mode="drain").
  • On a told page, problems that fall one by one (the arcade boss gauge).

When not to use

  • A continuous measure against a range (storage, credits).Use instead: Meter
  • The progress of a running task.Use instead: Progress
  • Steps of a flow the person goes through.Use instead: Stepper

Installation

Install

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

Styles

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

Import

import { GoalGauge } from "@krizaka/ui/goal-gauge";

Examples

A challenge's goal

6 backers of 10: the reached steps light one by one.

What is left

mode="drain": 3 seats left of 12, the spent ones empty one by one.

Arcade flavour

The boss gauge: every head sealed, the gauge empty.

Props

A goal in steps: role="meter", the reached steps lit, the value in words beside the label.

PropTypeDefaultDescription
labelrequiredstring—What the gauge counts (“Backers”, “Dares completed”) — passed translated; the meter's accessible name.
segmentsrequirednumber—The number of steps of the goal (2–24).
brandstring—A brand scope (orochia → .brand-orochia).
mode"fill" | "drain"fillHow the scene plays it: fill lights the reached steps one by one; drain empties the spent ones (a countdown of what is left: tickets, lives, problems still standing).
showLabelbooleantrueShows the label and the value above the segments.
valuenumbersegmentsThe steps reached (lit), from 0 to segments.
valueTextstring—The value in words (“6 of 10”, “€420 raised”); default value / segments.
variantStoryVariantdefaultdefault: rounded segments. arcade: the boss gauge — a skewed frame, gradient cells, a centred mono label.

Accessibility

  • role="meter" named by label, with aria-valuenow, aria-valuemax (the steps) and aria-valuetext.
  • The segments are drawn, not read: the value is in words, and lit steps are not told by colour alone (the count says it).
  • The steps light once in a stage and never under prefers-reduced-motion.

Best practices

  • Two to twenty-four steps: beyond, use a Meter.
  • Always say the value in words (valueText: “6 of 10 backers”).
  • Pair it with the action that moves it (back the challenge, book a seat).

Generated from the code of @krizaka/ui 2.10.0: its meta.ts, its examples and its types.Edit this documentation on GitHub

Data table

A table of records — sort, selection, loading, empty and error states — that turns into cards on a phone and renders only the rows in view when there are thousands.

Kbd

A key or a keyboard shortcut, set as keys: one Kbd per key.

On this page

When to useInstallationExamplesPropsAccessibilityBest practicesRelated components