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 Aperçu Design Tokens Composants Releases Aperçu Base Informations Sens & objectif Community Assets Instructions Power-Apps Bandeaux publicitaires numériques SAP Icônes d’applications
Trouver un composant

Lyne

Basics Animation Animation Border Border Grid Grid Spacings Spacings Typografie Typografie Components Action-Group Action-Group Alert Alert Alert-Group Alert-Group Autocomplete Autocomplete Button Button Calendar Calendar Card Card Card-Badge Card-Badge Checkbox Checkbox Checkbox-Group Checkbox-Group Chip Chip Clock Clock Datepicker Datepicker Dialog Dialog Divider Divider Footer Footer Form-Error Form-Error Form-Field Form-Field Header Header Header-Action Header-Action Icon Icon Image Image Journey-Header Journey-Header Link Link Link-List Link-List Logo Logo Menu Menu Menu-Action Menu-Action Tooltip Tooltip Tooltip-Trigger Tooltip-Trigger Radio-Button Radio-Button Radio-Button-Group Radio-Button-Group Selection-Panel Selection-Panel Signet Signet Slider Slider Tab-Group Tab-Group Tab Title Tab Title Tag Tag Tag-Group Tag-Group Teaser Teaser Teaser-Hero Teaser-Hero Time-Input Time-Input Title Title Toggle Toggle Toggle-Check Toggle-Check
Cette page n'est pas disponible dans la langue souhaitée. Langues disponibles Deutsch English Chip Implementation

The sbb-chip is a visual component used to display compact information, like a filter's name or a tag.

<sbb-chip>On sale</sbb-chip>

Style

It's possible to choose among three different values for the size property (s, xs and xxs, which is the default),
and four different values for the color property (charcoal, granite, white and milk, which is the default).

<sbb-chip color="charcoal" size="s">Label</sbb-chip>

<sbb-chip color="granite" size="xs">Label</sbb-chip>

<sbb-chip color="white">Label</sbb-chip>

Properties

Name Attribute Privacy Type Default Description
size size public 'xxs' | 'xs' | 's' 'xxs' Size of the chip.
color color public 'milk' | 'charcoal' | 'white' | 'granite' 'milk' Color of the chip.

Slots

Name Description
Use the unnamed slot to add content to the sbb-chip.
Demo
Label
Farbe Charcoal Milk Granite White Grössen XXS XS S Hintergrund White Milk Iron Charcoal Black
Beispiele Milk XXS
Milk XS
Milk S
Charcoal
White
Granite
Fixed Width
Fixed Width Long Label
HTML-Markup kopiert.
Impressum Contact Paramètres des cookies