Helsinki Design System
Helsinki Design System
Getting started
Tutorials
Guidelines
Visual assets
Design tokens
Components
OverviewAccordionButtonCardCheckboxDate inputDialogDropdownFieldsetFooterIconKorosLoading spinnerLogoNavigationNotificationNumber inputPassword inputPhone inputRadio buttonSearch inputSelection groupStatus labelPrinciplesAccessibilityUsageDemos & APITabsTagText fieldsTime inputToggle buttonTooltip
Patterns
About
Contributing
Resources

Status label

StableAccessible

Status labels can be used to highlight different statuses or items to the user. Status labels cannot be interacted with and they are only meant to convey relevant information.

Principles

  • A label text should always be provided with a status label. Do not use status labels without text or with icons only.
    • Icons inside status labels are allowed if they are accompanied with a text label.
      • Make sure the icon matches the visual label. Do not add an icon only for visual purposes.
  • Keep labels short and concise. Use 1-2 words at maximum and do not use labels expanding to two rows.
  • Use status colours consistently. You can find guidelines on when to use each status colour in the colour guidelines.
  • Status labels are often related to some other element on the page (e.g. table row). Aim to keep the status label and its related elements close to each other so the user can easily interpret the relation.

Accessibility

  • It is advisable to use colour combinations provided by the implementation. These combinations are ensured to comply with WCAG AA requirements. When customising colours, refer to colour guidelines to ensure accessibility.
  • Remember that colour should never be the only way of conveying information. Make sure the meaning of the status label is clearly described by the label text. Refer to WCAG 2.1 Use of Color guideline for more information.

Usage

Neutral (default)InfoSuccessAlertError
DefaultInfoSuccessAlertError

Core code example:

<span class="hds-status-label">
Default
</span>
<span class="hds-status-label hds-status-label--info">
Info
</span>
<span class="hds-status-label hds-status-label--success">
Success
</span>
<span class="hds-status-label hds-status-label--alert">
Alert
</span>
<span class="hds-status-label hds-status-label--error">
Error
</span>
<span class='hds-status-label hds-status-label--with-icon'>
<span aria-hidden='true' class='hds-status-label-icon hds-icon hds-icon--info-circle'></span>
Default
</span>
<span class="hds-status-label hds-status-label--with-icon hds-status-label--info">
<span aria-hidden='true' class='hds-status-label-icon hds-icon hds-icon--info-circle'></span>
Info
</span>
<span class='hds-status-label hds-status-label--with-icon hds-status-label--success'>
<span aria-hidden='true' class='hds-status-label-icon hds-icon hds-icon--check-circle'></span>
Success
</span>
<span class='hds-status-label hds-status-label--with-icon hds-status-label--alert'>
<span aria-hidden='true' class='hds-status-label-icon hds-icon hds-icon--alert-circle'></span>
Alert
</span>
<span class='hds-status-label hds-status-label--with-icon hds-status-label--error'>
<span aria-hidden='true' class='hds-status-label-icon hds-icon hds-icon--error'></span>
Error
</span>

React code example:

<StatusLabel>Neutral</StatusLabel>
<StatusLabel type="info">Info</StatusLabel>
<StatusLabel type="success">Success</StatusLabel>
<StatusLabel type="alert">Alert</StatusLabel>
<StatusLabel type="error">Error</StatusLabel>
<StatusLabel iconLeft={<IconInfoCircle />}>Default</StatusLabel>
<StatusLabel type="info" iconLeft={<IconInfoCircle />}>Info</StatusLabel>
<StatusLabel type="success" iconLeft={<IconCheckCircle />}>Success</StatusLabel>
<StatusLabel type="alert" iconLeft={<IconAlertCircle />}>Alert</StatusLabel>
<StatusLabel type="error" iconLeft={<IconError />}>Error</StatusLabel>

Demos & API

Core

Status labels in hds-core

React

Status labels in hds-react

StatusLabel API