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

See deprecated code
expiry date: 30/04/2024

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: 07/08/2024 10:00:05

Icon with text

Razor

All @rsStatus objects can receive all following parameters:

Name Type Description Default value
sStatusText string Status text .rsSuccess : "Status is OK"
.rsError : "Status is NOK"
.rsOngoing : "Status is Ongoing"
.rsWarning : "Status is Warning"
.rsUnlimited : "Status is Unlimited"
bIsIconOnly boolean Is the text hidden false
bIsParagraph boolean Is <p> instead of <div> false
bIsSpan boolean Is <span> instead of <div> false
sXtraClass string Extra class to rs-status container ""

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

Deprecated

EXPIRY DATE: 30/04/2024

The following classes have been simplified and changed to be consistent:

  • rs-status-ok becomes rs-success
  • rs-status-nok becomes rs-error
  • rs-status-ongoing becomes rs-ongoing
  • rs-status-warning becomes rs-warning
  • rs-status-unlimited becomes rs-unlimited
last modified: 28/02/2024 15:30:08

Configuration metadata (DSStatusComponent)

Selector: ds-status

Class: DSStatusComponent

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