Important information:

Using the Design System implies following some rules: the code should be valid and same as the Design System. Meaning custom HTML & CSS override are forbidden.
Please don't forget to read Usage part of each element.

Status

Allowing the user to have an information concerning a status.

last modified: 19/12/2022 17:10:04

Overview

Status OK
Status NOK
Status on going
Status warning

Other status?

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)

last modified: 13/12/2021 16:35:04

Sizes and colors

last modified: 19/01/2023 13:45:04

Icon with text

Razor

All @rsStatus objects can receive all following optional parameters by specifying the parameter name with its value (ex: @rsStatus.rsOK(bIsParagraph: true, bIsIconOnly: true) ) or in this exact order if you don't specify parameter names:

Parameter	Default value if nothing is set
sStatusText	.rsOK : "Status is OK" .rsNOK : "Status is NOK" .rsOngoing : "Status is Ongoing" .rsWarning : "Status is Warning" .rsUnlimited : "Status is Unlimited"
bIsIconOnly (boolean)	false
bIsParagraph (boolean)	false
sXtraClass	""

Status is OK

Status is NOK

Status is Ongoing

Status is Warning

Status is Unlimited

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.

Status is OK

Status is NOK

Status is Ongoing

Status is Warning

Status is Unlimited