Zur Navigation Zum Inhalt Kontakt Menu Trova un componente Descrizione generale Lyne Principi Base Accessibilité Sistema di design Guidelines Deutsch Français Italiano English I nostri principi di design Soluzioni focalizzate sull’utente Riconoscibilità Inclusione Riduzione Olistico Autoesplicativo Orientamento all’attività Adeguatezza Portale della marca FFS Logo Orologio digitale Diritti di utilizzazione Colori die base Colori funzionali Colori Off Brand Icone Icone dell'orario Pittogrammi Informazioni sull’accessibilità Über diesen Guide Contatti Letture consigliate Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Designing Coding FAQ Aiuto Processo Contribution Contatto Introduzione Base Componenti Introduzione Base Componenti Introduzione Base Componenti Overview Releases Design Tokens Komponenten Introduzione Base Informazioni Senso & scopo Community Assets Istruzioni Power-Apps Banner pubblicitari digitali SAP Icone delle app Questa pagina non è disponibile nella lingua desiderata. Lingue disponibili 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
Trova un componente

Lyne

Impressum Contatto Impostazioni dei cookie