zen
DocumentationPlayground
Getting started
IntroductionInstallationUsage Guide
ColorsFontsSpacingBordersShadowsBreakpointsThemesCustomization
BoxFlexboxGridContainer
TextHeadingCodeBlockquote
Page headerAspect ratioResizableScroll areaSeparator
Overview
AutocompleteCheckboxCheckbox groupComboboxDate pickerInput groupNumber fieldOTP FieldPassword fieldRadio groupSearch fieldSelectSliderSwitchText fieldToggleToggle group
BreadcrumbsButtonButton groupCommandContext menuHover triggerLoading buttonMenuMenubarNavbarPaginationTabsToolbarTheme buttonTheme switcher
AlertAlert dialogConfirmation dialogDialogDrawerEmptyLoadingMeterModalPopoverPreview cardProgress barProgress circleSheetSkeletonStatus lightToastTooltip
AccordionAvatarBadgeCalendarCarouselCollapsibleData cardData tableIconImageKbdListTableTag group
Feedback & Status

Status Light

Status lights are used to color code categories and labels commonly found in data visualization.

Status

Variants#

Success
Error
Warning
Active
Inactive

Component props#

NameTypeDescription
variantStatusVariant"success" | "warning" | "error" | "active" | "inactive" | "none"
colorstringCustom color (overrides variant)
PreviousSkeletonNextToast
On this page
VariantsComponent props
Powered by shiso