DXC Logo
Halstack Design System
v16.1.0

Overview

Guidelines

Foundations

Migration

Utilities

Components

Status light

Status light is a small, color-coded visual indicator used to represent the state or condition of a system, process, or component. It provides at-a-glance feedback, helping users quickly assess statuses without needing detailed explanations.

Overview
Code

Props

NameTypeDescriptionDefault
Required
label
stringAn auxiliary text that will add some context to the status.-
mode'default' | 'info' | 'success' | 'warning' | 'error'It will define the color of the light based on its semantic meaning.'default'
size'small' | 'medium' | 'large'Size of the component. Should be defined based on its importance and/or available space.'medium'

Examples

Basic usage

() => {
    return (
      <DxcInset space="var(--spacing-padding-xl)">
        <DxcStatusLight label="Accepted" mode="success" size="large" />
      </DxcInset>
    );
  }
On this page