Status. Overview

Preview.

Erfolgreich gespeichert.

What does the component do?

A status shows the current state of an object, process or system. It consists of an icon, an optional title and a short text. The colour depends on the type: info, success, warning, error, pending, incomplete, not started or in progress.

When should the component be used?

  • To inform users about the current state of a process, system or object.
 Usage

Rules.

  • Always use the same type for the same state, throughout the application.
  • Keep the text short.
  • For screen readers: the text should only contain inline content. For dynamic changes, role="status" can be set.

Specification.

Open in Figma
Examples Info.
Try it out on Storybook Show HTML
Success.
Try it out on Storybook Show HTML
Warning.
Try it out on Storybook Show HTML
Error.
Try it out on Storybook Show HTML
Pending.
Try it out on Storybook Show HTML
Incomplete.
Try it out on Storybook Show HTML
Not Started.
Try it out on Storybook Show HTML
In Progress.
Try it out on Storybook Show HTML
Info With Title.
Try it out on Storybook Show HTML
Success With Title.
Try it out on Storybook Show HTML
Warning With Title.
Try it out on Storybook Show HTML
Error With Title.
Try it out on Storybook Show HTML
Pending With Title.
Try it out on Storybook Show HTML
Incomplete With Title.
Try it out on Storybook Show HTML
Not Started With Title.
Try it out on Storybook Show HTML
In Progress With Title.
Try it out on Storybook Show HTML
Success With Custom Icon.
Try it out on Storybook Show HTML
Success With Custom Icon Slotted.
Try it out on Storybook Show HTML
Copy HTML to clipboard. Implementation

Web Components.

The web component is in the package @sbb-esta/lyne-elements.

Storybook with live examples Source code on GitHub

Documentation.

The <sbb-status> is a component that has the purpose to show the user short messages to update the current status.
The status element displays a brief text message preceded by the status icon.

The <sbb-status> is structured in the following way:

  • Icon: informs user about the current status type
  • Title (optional): gives user an overview of the message
  • Message: provide the information to the user
<sbb-status>Status info text</sbb-status>
Variants.

The <sbb-status> supports eight types, based on the type of the information displayed:

  • info (default)
  • success
  • warn
  • error
  • pending
  • incomplete
  • not-started
  • in-progress
<sbb-status type="info">...</sbb-status>
<sbb-status type="success">...</sbb-status>
<sbb-status type="warn">...</sbb-status>
<sbb-status type="error">...</sbb-status>
<sbb-status type="pending">...</sbb-status>
<sbb-status type="incomplete">...</sbb-status>
<sbb-status type="not-started">...</sbb-status>
<sbb-status type="in-progress">...</sbb-status>
Title.

An optional <sbb-title> can be slotted.

<sbb-status>
  <sbb-title level="3">Title</sbb-title>
  Status info text
</sbb-status>
Icon.

The icon is primarily predefined and bound to the status.
However, it's possible to override this by using iconName property or icon slot.

Style.

The <sbb-status> use default message colors, based on the chosen type.

Accessibility.

The message text is wrapped into a <p> element to guarantee the semantic meaning.
Avoid slotting block elements (e.g. <div>) as this violates semantic rules and can have negative effects on screen-readers.

If needed, the role="status" attribute can be added on the component's tag.

<sbb-status role="status" type="error">An error occurred.</sbb-status>

Angular.

This component is also available for Angular in the package @sbb-esta/lyne-angular.

Angular overview Angular API Angular examples API

class: SbbStatusElement, sbb-status.

Properties.

Name Attribute Privacy Type Default Description
iconName icon-name public string '' The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch.
type type public 'info' | 'success' | 'warning' | 'error' | 'pending' | 'incomplete' | 'not-started' | 'in-progress' 'info' The type of the status.

CSS Properties.

Name Default Description
--sbb-status-color var(--sbb-color-iron) Specify a custom color, which will override the predefined color for any type.
--sbb-status-text-color var(--sbb-status-color) Specify a custom text color, which will override the predefined color for any type. Only valid for a status without a title.

Slots.

Name Description
Use the unnamed slot to add an optional sbb-title and content to the status message.
icon Use this slot to override the default status icon.
title Slot for the title. For the standard sbb-title element, the slot is automatically assigned when slotted in the unnamed slot.