Proximus design system
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

  1. Status OK
  2. Status NOK
  3. Status on going
  4. 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.

  1. Default with the label
  2. 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.

  1. Status icon
  2. 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
last modified: 28/06/2023 11:55:12

Configuration metadata (StatusComponent)

Selector: lib-status

Class: StatusComponent

e2e testing Id: None

Use case example

Inputs

Name Type Default Required Description
type StatusTypeEnum StatusTypeEnum.Ok No Define css styling, logo for status
negative boolean false No Determines negative style
label string 'Status' No Label or title of the status
tooltip string undefined No The tooltip on hover, is required if there is no label/title

Outputs

None

Models

        export enum StatusTypeEnum {
            Ok = 'ok',
						Nok = 'nok',
						Ongoing = 'ongoing',
						Warning = 'warning',
						Unlimited = 'unlimited',
        }

Available from library version 14.80.5 and above