Skip to content
Caps

components/status

Type Aliases

Section titled “Type Aliases”

StatusGlyph

Section titled “StatusGlyph”

StatusGlyph = "dot" | "pill" | "bang"

The bead’s target silhouette. Changes morph from its current appearance.

StatusMotion

Section titled “StatusMotion”

StatusMotion = "none" | "pulse" | "bounce"

Continuous activity, independent of the target silhouette.

StatusTone

Section titled “StatusTone”

StatusTone = "neutral" | "primary" | "secondary" | "accent" | "success" | "info" | "warning" | "error"

Semantic colors supplied by the current Stipe theme.

StatusSize

Section titled “StatusSize”

StatusSize = "default" | "compact"

Status size keeps secondary state compact in dense rows.

StatusAppearance

Section titled “StatusAppearance”

StatusAppearance = "plain" | "chip"

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

StatusProps

Section titled “StatusProps”

StatusProps = object & Omit<HTMLAttributes<HTMLSpanElement>>, "children">>

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

Type Declaration

Section titled “Type Declaration”
label?
Section titled “label?”

optional label?: ReactNode

glyph?
Section titled “glyph?”

optional glyph?: StatusGlyph

motion?
Section titled “motion?”

optional motion?: StatusMotion

tone?
Section titled “tone?”

optional tone?: StatusTone

size?
Section titled “size?”

optional size?: StatusSize

appearance?
Section titled “appearance?”

optional appearance?: StatusAppearance

Variables

Section titled “Variables”

Status

Section titled “Status”

const Status: ForwardRefExoticComponent<object & Omit<HTMLAttributes<HTMLSpanElement>>, "children"> > & RefAttributes<HTMLSpanElement>>>>

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