Display and status

StatusBadge

StatusBadge - Generic status indicator badge Provides pre-defined color schemes for common status domains (invoice, project, etc.) or an explicit semantic tone for custom status vocabulary.

Public export

typescript

import { StatusBadge } from '@happyvertical/smrt-ui/display';

Import path: @happyvertical/smrt-ui/display
Props: 6
Props described: 6 of 6
Bindable state: 0
Callback events: 0
Verified release: 0.57.40

Props

Also accepts Omit<HTMLAttributes<HTMLSpanElement>, 'class' | 'children'>. The table lists the component-specific contract.

NameTypeRequiredDescription

statusstringYesThe status value to display

typeStatusTypeNoPre-defined color scheme type

toneStatusToneNoSemantic tone overriding the domain color scheme.

size'sm' | 'md' | 'lg'NoBadge size

variant'filled' | 'outline'NoVisual variant

labelstringNoOptional custom label (defaults to status value)

Bindable state

This component has no bindable public state.

Callback events

This component declares no callback event props.

Public export

Props

Bindable state

Callback events

Examples and explanation