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 {StatusBadgeDirective} from "@qualcomm-ui/angular/badge"Examples
Emphasis
Use the emphasis input to convey semantic meaning with colors.
Qualcomm
<span emphasis="neutral" q-status-badge></span>
<span emphasis="brand" q-status-badge></span>
<span emphasis="info" q-status-badge></span>
<span emphasis="success" q-status-badge></span>
<span emphasis="warning" q-status-badge></span>
<span emphasis="danger" q-status-badge></span>
Variant
The variant input controls the aspect of the badge. Two variants are available: filled (default) and outlined.
Qualcomm
<span emphasis="neutral" q-status-badge variant="outlined"></span>
<span emphasis="brand" q-status-badge variant="outlined"></span>
<span emphasis="info" q-status-badge variant="outlined"></span>
<span emphasis="success" q-status-badge variant="outlined"></span>
<span emphasis="warning" q-status-badge variant="outlined"></span>
<span emphasis="danger" q-status-badge variant="outlined"></span>
Size
Control dimensions using the size input. Five sizes are available: xs, sm, md (default), lg, and xl.
Qualcomm
<span q-status-badge size="xs"></span>
<span q-status-badge size="sm"></span>
<span q-status-badge size="md"></span>
<span q-status-badge size="lg"></span>
<span q-status-badge size="xl"></span>
Disabled
Set the disabled input to visually indicate that the badge is inactive.
Qualcomm
<span emphasis="brand" q-status-badge></span>
<span emphasis="brand" q-status-badge [disabled]="true"></span>
API
q-status-badge
| Prop | Type | Default |
|---|---|---|
The badge disabled state. | boolean | |
Governs the color of the status badge. | | 'neutral' | 'neutral' |
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
| '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 |
|---|---|
class | 'qui-badge__root' |
data-disabled | |
data-emphasis | | 'neutral' |
data-part | 'root' |
data-scope | 'status-badge' |
data-size | | 'xs' |
data-variant | | 'filled' |
classValue
'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'