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 Overview Releases Design Tokens Composants Aperçu Base Informations Aperçu Base Composants 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 Button

Übersicht

Was macht die Komponente?

  • Löst eine Aktion auf einer Seite aus.

Wann soll die Komponente eingesetzt werden?

  • Beim Starten oder Beenden eines Prozesses.
  • Beim Absenden eines Formulars.
  • Beim Aufrufen einer Funktion auf einer Seite.

Regeln

  • Darf nicht innerhalb von Fliesstext eingesetzt werden.
  • Darf nicht im Header als Navigation oder Funktion eingesetzt werden.
  • Die Mindestbreite beträgt 60px.
  • Die Breite wächst mit der Textlänge. Bei mobilen Ansichten ist die Breite 100%.
  • Ist der Text beim Erreichen der Maximallänge immer noch zu lang, wird dieser mit «...» abgekürzt.
  • Der Text ist immer einzeilig.
  • Buttons werden im Viewport rechtsbündig angeordnet. Der Primary Button wird links vom Secondary Button platziert.
 Zustände und Varianten

Zustände

Die Komponente hat folgende Zustände:

  • Default
  • Hover
  • On-click
  • Disabled

Varianten

Primary Button

Darstellung des Primary Buttons

Alternative Primary Button

Darstellung des alternativen Primary Buttons

Secondary Button

Darstellung des Secondary Buttons

Ghost Button

Darstellung des Ghost Buttons

Icon Button

Darstellung des Icon Buttons

Beim Hover über einen Icon Button sollte ein Tooltip verwendet werden, um die dahinterliegende Aktion klarer zu machen.

Mehrere Aktionen

Darstellung des Buttons mit mehreren Aktionen

Spezifikationen

DesignCode
Contact

Vous avez des questions ? Vous trouverez peut-être une réponse dans notre FAQ ou notre aide, sinon vous pouvez poser votre question sur le board correspondant sur Github.

Impressum Contact Protection des données Paramètres des cookies