Anatomy
|
Item |
Name |
Description |
Optional |
|---|---|---|---|
|
1 |
Container |
Defines the component’s size and groups elements. |
|
|
2 |
Start Icon |
Leading icon, typically placed before the text. |
Yes |
|
3 |
Text |
Short text describing the status. |
Yes |
|
4 |
Background |
Colored fill that emphasizes the status when additional prominence is needed. |
Yes |
Specification and properties
Variants
Status Indicators are mainly mapped to our semantic color tokens, along with a primary/accent variant that should be used carefully. For guidance on when and how to use them, check the Usage page.
|
Variant |
Token group |
|---|---|
|
Danger |
alert.danger |
|
Warning |
alert.danger |
|
Success |
alert.danger |
|
Info |
alert.danger |
|
Basic |
alert.danger |
|
Primary |
interactive.secondary |
Spacing
|
Item |
Property |
Value |
Token |
|---|---|---|---|
|
1 |
Side Padding |
8 px |
spacing.100 |
|
|
Gap |
4px |
spacing.50 |
|
2 |
Side Padding |
0 px |
spacing.0 |
|
|
Gap |
4px |
spacing.50 |
|
3 |
Padding |
0px |
spacing.0 |
States
Typically, Status Indicators are static. However, they can become interactive when used with Tooltips or Popovers.
|
State |
Description |
|---|---|
|
Default |
The default style before user interaction. |
|
Hover |
Indicates interactivity when the user hovers over the component. |
|
Active |
Indicates the state when the user clicks or presses on the component. |
Structure
All variants share the same height and border-radius. The width is limited to 200px, after which the text label gets truncated. The border appears only when the Background property is enabled.
|
Property |
Value |
Token |
|---|---|---|
|
Border radius |
4px |
border-radius.50 |
|
Height |
24px |
sizing.300 |
|
Border |
1px |
border-width.100 |