Zur Navigation Zum Inhalt Kontakt Menu Trouver un composant Aperçu Lyne Principes Bases Accessibilité Système de design Guidelines Deutsch Français Italiano English Nos principes de design Centré sur l’utilisateur Reconnaissable Inclusif Minimaliste Holistique Auto-explicatif Axé sur les tâches Approprié Portail de la marque CFF Logo Horloge numérique Droits d’utilisation Couleurs de base Couleurs fonctionnelles Couleurs off-brand Icônes Icônes de l’horaire Pictogrammes À propos de l’accessibilité À propos de ce guide Contact Informations complémentaires Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Conception Développer FAQ Aide Procès Contribution Contact Aperçu Base Composants Aperçu Base Composants Aperçu Base Composants Overview Releases Design Tokens Komponenten Aperçu Base Informations Sens & objectif Community Assets Instructions Power-Apps Bandeaux publicitaires numériques SAP Icônes d’applications Cette page n'est pas disponible dans la langue souhaitée. Langues disponibles Deutsch English 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.
Beispiele
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
Impressum Contact Paramètres des cookies