IconStatus

A small color cube for status and token previews.

When to use

Use IconStatus when you need a small color cube for status and token previews.

Import

TypeScript

import { IconStatus } from '@gzodo/ui'

IconStatus is a compact swatch. Pass a TagColorTone for theme semantics, or any CSS color string (hex, rgb, var(--…)). Use it next to labels, in selects, and in docs token tables.

Examples

Tones

Theme tones map to --danger, --success, --warning, --pending, and --muted.

#f50

#2db7f5

#87d068

var(--primary)

Custom color

Any non-tone string is applied as backgroundColor.

Sizes

sm 12px, md 14px (default), lg 16px.

IconStatus

Property

Description

Type

Default

color

Tone name or any CSS color. Tones use theme tokens; other values set backgroundColor.

string | TagColorTone

—

size

Cube size in pixels (12 / 14 / 16).

'sm' | 'md' | 'lg'

'md'

className

Class added on the cube.

string

—

style

Inline styles merged after the background color.

CSSProperties

—

title

Native tooltip on the cube.

string

—

Tag

InlineTip