Status Badge
The Status Badge component uses color-coded indicators to show a user's state or system condition. Commonly used in profiles to display availability such as active, away, or offline, it remains clear, accessible, and consistent across all sizes, helping users identify status instantly.
import {StatusBadge} from "@qualcomm-ui/react/badge"Examples
Emphasis
Use the emphasis prop to convey semantic meaning with colors.
Qualcomm
<StatusBadge emphasis="neutral" />
<StatusBadge emphasis="brand" />
<StatusBadge emphasis="info" />
<StatusBadge emphasis="success" />
<StatusBadge emphasis="warning" />
<StatusBadge emphasis="danger" />
Variant
The variant prop controls the aspect of the badge. Two variants are available: filled (default) and outlined.
Qualcomm
<StatusBadge emphasis="neutral" variant="outlined" />
<StatusBadge emphasis="brand" variant="outlined" />
<StatusBadge emphasis="info" variant="outlined" />
<StatusBadge emphasis="success" variant="outlined" />
<StatusBadge emphasis="warning" variant="outlined" />
<StatusBadge emphasis="danger" variant="outlined" />
Size
Control dimensions using the size prop. Five sizes are available: xs, sm, md (default), lg, and xl.
Qualcomm
<StatusBadge size="xs" />
<StatusBadge size="sm" />
<StatusBadge size="md" />
<StatusBadge size="lg" />
<StatusBadge size="xl" />
Disabled
Set the disabled prop to visually indicate that the badge is inactive.
Qualcomm
<StatusBadge emphasis="brand" />
<StatusBadge disabled emphasis="brand" />
API
<StatusBadge>
| Prop | Type | Default |
|---|---|---|
The badge disabled state. | boolean | |
Governs the color of the status badge. | | 'neutral' | 'neutral' |
Allows you to replace the component's HTML element with a different tag or component. Learn more | | ReactElement | |
Governs the size of the badge. | | 'xs' | 'md' |
Governs the style of the status badge. | | 'filled' | 'filled' |
Type
booleanDescription
The badge disabled state.
Type
| 'neutral'
| 'brand'
| 'info'
| 'success'
| 'warning'
| 'danger'
Description
Governs the color of the status badge.
Type
| ReactElement
| ((
props: object,
) => ReactElement)
Description
Allows you to replace the component's HTML element with a different tag or component. Learn more
Type
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
Description
Governs the size of the badge.
Type
| 'filled'
| 'outlined'
Description
Governs the style of the status badge.
| Attribute / Property | Value |
|---|---|
className | 'qui-badge__root' |
data-disabled | |
data-emphasis | | 'neutral' |
data-part | 'root' |
data-scope | 'status-badge' |
data-size | | 'xs' |
data-variant | | 'filled' |
classNameValue
'qui-badge__root'data-disabledValue
data-emphasisValue
| 'neutral'
| 'brand'
| 'info'
| 'success'
| 'warning'
| 'danger'
data-partValue
'root'data-scopeValue
'status-badge'data-sizeValue
| 'xs'
| 'sm'
| 'md'
| 'lg'
| 'xl'
data-variantValue
| 'filled'
| 'outlined'