Skip to content
Caps0.4.0
API reference

components/status

Import

Section titled “Import”
Import
import * as api from "@fungi.computer/caps/components/status";

Exports

Section titled “Exports”
Kind Export Description
type alias StatusGlyph The target silhouette. Bead glyphs (dot, pill, bang) morph between each other; task glyphs (ring waiting, arc working, check finished, cross refused) morph between each other.
type alias StatusMotion Continuous activity, independent of the target silhouette.
type alias StatusTone Semantic colors supplied by the current Stipe theme.
type alias StatusSize Status size keeps secondary state compact in dense rows.
type alias StatusAppearance chip seats the bead and label in a tone-tinted pill.
type alias StatusProps Presentation only: the caller maps its state to glyph, tone, and motion.
constant Status A gooey SVG status bead with automatic, interruptible glyph transitions.

StatusGlyphtype alias

Section titled “StatusGlyph”
Signature
type StatusGlyph = "dot" | "pill" | "bang" | StatusMarkGlyph;

The target silhouette. Bead glyphs (dot, pill, bang) morph between each other; task glyphs (ring waiting, arc working, check finished, cross refused) morph between each other.

StatusMotiontype alias

Section titled “StatusMotion”
Signature
type StatusMotion = "none" | "pulse" | "bounce";

Continuous activity, independent of the target silhouette.

StatusTonetype alias

Section titled “StatusTone”
Signature
type StatusTone =
  | "neutral"
  | "primary"
  | "secondary"
  | "accent"
  | "success"
  | "info"
  | "warning"
  | "error";

Semantic colors supplied by the current Stipe theme.

StatusSizetype alias

Section titled “StatusSize”
Signature
type StatusSize = "default" | "compact";

Status size keeps secondary state compact in dense rows.

StatusAppearancetype alias

Section titled “StatusAppearance”
Signature
type StatusAppearance = "plain" | "chip";

chip seats the bead and label in a tone-tinted pill.

StatusPropstype alias

Section titled “StatusProps”
Signature
type StatusProps = object & Omit<HTMLAttributes<HTMLSpanElement>, "children">;

Presentation only: the caller maps its state to glyph, tone, and motion.

Type Declaration

Section titled “Type Declaration”
Name Type Description
label? ReactNode -
glyph? StatusGlyph -
motion? StatusMotion -
tone? StatusTone -
size? StatusSize -
appearance? StatusAppearance -
progress? number For arc: how much is done, 0 to 1. Absent, the arc spins.

Statusconstant

Section titled “Status”
Signature
const Status: ForwardRefExoticComponent<
  object &
    Omit<HTMLAttributes<HTMLSpanElement>, "children"> &
    RefAttributes<HTMLSpanElement>
>;

A gooey SVG status bead with automatic, interruptible glyph transitions.