Zur Navigation Zum Inhalt Kontakt Menu Find component Overview Lyne Principles Foundation Accessibility Design System Guidelines Deutsch Français Italiano English Our design principles User-centred Recognisable Inclusive Reduced Holistic Self-explanatory Task-oriented Appropriate SBB Brand portal Logo Digital clock Rights of use Base colors Functional colors Off brand colors Icons Timetable icons Pictograms About accessibility Über diesen Guide Contact Further information Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Designing Coding FAQ Help Process Contribution Contact Overview Base Components Overview Base Components Overview Base Components Overview Releases Design Tokens Komponenten Overview Base Informationen Sense & Purpose Community Assets Instructions Power-Apps Digital banner ads SAP Design Guidelines App Icons Status Implementation

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 four types: info (default), success, warn and error, based on the type of the information displayed.

<sbb-status type="info">...</sbb-status>

<sbb-status type="success">...</sbb-status>

<sbb-status type="warn">...</sbb-status>

<sbb-status type="error">...</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>

Properties

Name Attribute Privacy Type Default Description
type type public SbbStatusType 'info' The type of the status.
titleContent title-content public string | undefined Content of title.
titleLevel title-level public SbbTitleLevel '3' Level of title, it will be rendered as heading tag (e.g. h3). Defaults to level 3.
iconName icon-name public string | undefined 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.

Slots

Name Description
Use the unnamed slot to add content to the status message.
title Use this to provide a title for the status (optional).
icon Use this slot to override the default status icon.
Examples
Info
Success
Warning
Error
Info With Title
Success With Title
Warning With Title
Error With Title
Success With Custom Icon
Success With Custom Icon Slotted
HTML-Markup kopiert.
Playground

with Title

An error occurred.

without Title

An error occurred.
Typ Info Success Warning Error Custom Icon Nein Ja Hintergrund White Milk Iron Charcoal Black
Imprint Contact Cookie settings