Please don't forget to read Usage part of each element.
Status
Allowing the user to have an information concerning a status.
Overview

- Status OK
- Status NOK
- Status on going
- Status warning
Currently we do not allow using other status. If you ever need another status that the ones stated above, please contact us and we'll add it to the Design System.
Show / hide status label
The label is not a mandatory element in the status. If necessary, it can be hidden in one of the breakpoints and shown in others.

- Default with the label
- Without the label
If a status is used only with an icon, a tooltip should be added to explain the user what it means.
Anatomy
The notification dot comes with two sizes for desktop, and one on mobile.

- Status icon
- Status label (not mandatory)
Sizes and colors
Icon with text
All
Parameter | Default value if nothing is set |
---|---|
sStatusText |
|
bIsIconOnly (boolean) | false |
bIsParagraph (boolean) | false |
sXtraClass | "" |
Icon only
If a status is used only with an icon, a tooltip should be added to explain the user what it means.
Negative
You just need to add rs-neg
class as parent of any rs-status
version to have it with negative colors.