Schaltfläche

Schaltfläche in Storybook

Note: Es gibt veraltete Versionen dieser Komponente. Wechseln Sie zu einer Version, die älter als 10.0.x ist, um die entsprechende Dokumentation anzuzeigen.

Verwendung

Überblick

Die Schaltfläche ist eine Komponente, über die Benutzer mit nur einem Klick Aktionen ausführen und eine Auswahl vornehmen können. Schaltflächen sollen die Interaktion des Benutzers mit der Benutzeroberfläche vereinfachen. In den meisten Fällen, in denen Benutzer auf Text stoßen (z. B. bei einem Leerzustand, einer Bestätigung oder einem Fehler), „spricht“ die Anwendung zu dem Benutzer. Schaltflächen gehören zu den wichtigsten Komponenten, mit denen Benutzer interagieren. Sie machen ihren Zweck für Benutzer sichtbar.

Zu verwenden

• Zum Auslösen einer Aktion. Z. B. Senden, Hochladen, Hinzufügen, Löschen, Speichern oder Anwenden.

Nicht zu verwenden

• Zum Navigieren zu einer neuen Seite. Verwenden Sie stattdessen die Komponente Link.
• Zum Hochladen von Dateien. Verwenden Sie stattdessen die Komponente Datei-Uploader.

Formatierung

Aufbau

Schaltflächen bestehen aus den folgenden Elementen:

1. Primäre Schaltflächen werden als Container (A) um eine Textbeschriftung (B) mit einem optionalen Symbol (C) angezeigt. Primäre Schaltflächen haben einen Hintergrund in Volltonfarbe.
2. Sekundäre Schaltflächen werden als Container (A) um eine Textbeschriftung (B) mit einem optionalen Symbol (C) angezeigt. Sekundäre Schaltflächen haben eine sichtbare Kontur und keine Hintergrundfarbe.
3. Tertiäre Schaltflächen enthalten eine Textbeschriftung (B) mit einem optionalen Symbol (C).
4. Symbolschaltflächen werden als Container (A) um ein obligatorisches Symbol (C) angezeigt.

Ausrichtung und Positionierung

Wenn eine Schaltflächengruppe als Teil eines Prozesses angezeigt wird, z. B. in einem Assistenten oder einem modalen Fenster, wird empfohlen, die Schaltflächen unten rechts auf der Seite zu positionieren, um die natürliche Navigation der Seiten beizubehalten. In dieser Schaltflächengruppe befinden sich die primären Schaltflächen ganz rechts.

Positionieren Sie die primäre Schaltfläche ganz rechts.

Positionieren Sie die sekundäre Schaltfläche nicht ganz rechts.

Für die Kundenkonfiguration können Sie das Symbol links oder rechts neben der Schaltflächenbeschriftung festlegen, aber nicht beides gleichzeitig.

Bei internen Guidewire-Anwendungen positionieren Sie das Symbol immer rechts, damit der Benutzer zuerst die Beschriftung liest und dann das Symbol sieht.

Positionieren Sie das Symbol rechts neben der Schaltflächenbeschriftung.

Positionieren Sie Symbole nicht gleichzeitig rechts und links neben der Schaltflächenbeschriftung.

Schaltflächentypen

Schaltflächen sind rechteckig mit abgerundeten Ecken, Schlagschatten (außer tertiäre Schaltflächen), einfacher Farbgestaltung und Beschriftungen in der üblichen Groß- und Kleinschreibung.

Typ	Zweck
Primäre Schaltfläche	Primäre Schaltflächen werden stark hervorgehoben. Verwenden Sie sie für die wichtigsten Aktionen. Jede Seite darf nur eine primäre Schaltfläche enthalten, um die Aktion auszulösen (außer modales Fenster oder Schnellansicht).
Sekundäre Schaltfläche	Sekundäre Schaltflächen werden mittelstark hervorgehoben. Verwenden Sie sekundäre Schaltflächen in Verbindung mit einer primären Schaltfläche. Als Teil eines Paars besteht die Funktion der sekundären Schaltflächen darin, die Aktion abzulehnen. Sie bieten dem Benutzer die Möglichkeit, die Aktion abzubrechen und keine Aktion auszuführen. Zum Beispiel Abbrechen im Unterschied zur primären Aktion Senden. Verwenden Sie sekundäre Schaltflächen nicht einzeln und verwenden Sie keine sekundäre Schaltfläche für die Hauptaktion.
Tertiäre Schaltfläche	Tertiäre Schaltflächen werden schwach hervorgehoben. Verwenden Sie sie für weniger wichtige und manchmal unabhängige Aktionen. Sie können tertiäre Schaltflächen separat verwenden oder sie mit einer primären Schaltfläche koppeln, wenn es mehrere Aktionsaufrufe gibt. Wenn eine primäre Schaltfläche für die Hauptaktion vorhanden ist, können Sie auch tertiäre Schaltflächen für Unteraufgaben auf einer Seite verwenden.
Symbolschaltfläche	Symbolschaltflächen sind für allgemein bekannte Aktionen vorgesehen und müssen in Verbindung mit einer QuickInfo verwendet werden.

Jede Seite darf nur eine primäre Auslöseaktion enthalten:

Verwenden Sie nur 1 primäre Schaltfläche pro Seite.

Verwenden Sie nicht mehr als 1 primäre Schaltfläche pro Seite.

Schaltflächengruppen

Schaltflächen können gruppiert werden, um die Beziehung zwischen ihnen zu veranschaulichen. Wir empfehlen, einen Abstand von 16 Pixeln zwischen den Schaltflächen zu verwenden (sowohl vertikal als auch horizontal).

Wenden Sie einen Abstand von 16 Pixeln zwischen den Schaltflächen in einer Gruppe an.

Wenden Sie keine uneinheitlichen Abstände zwischen Schaltflächen an.

Inhalt

Allgemeine Richtlinien fürs Schreiben

• Verwenden Sie die Großschreibung des ersten Worts und von Substantiven für alle Aspekte der Gestaltung von Guidewire-Produktschnittstellen. Schreiben Sie nicht alles groß.
• Verwenden Sie in den meisten Situationen Verben im Präsens und im Aktiv.
• Verwenden Sie gebräuchliche Abkürzungen, um Ihrem Text einen natürlichen und informellen Ton zu verleihen.
• Verwenden Sie eine einfache Sprache. Vermeiden Sie unnötigen Jargon und komplexe Sprache.
• Halten Sie Wörter und Sätze kurz.

Kurz und bündig

• Halten Sie die Beschriftung von Schaltflächen kurz und einfach: 1 oder 2 Wörter, nicht länger als 4 Wörter.
• Verwenden Sie keine Artikel, um Scanbarkeit, Verständnis und Aufgabenabschluss zu unterstützen.

Quelle: Nielsen Norman

Halten Sie den Text der Anweisung kurz und dennoch verständlich.

Verwenden Sie nicht mehr als 2 bis 4 Wörter für eine Schaltfläche.

Aktion eindeutig angeben

• Bei Befehlen, die eine Aktion einleiten oder Informationen übermitteln, sollte ein Verb im Zentrum der Beschriftung der Schaltfläche stehen. Wenn die Aktion nicht allein anhand des Verbs klar wird, fügen Sie ein Substantiv hinzu, um den Kontext eindeutig zu machen. Beispiel: Fahrzeug hinzufügen statt nur Hinzufügen oder Zeitplan erstellen statt nur Erstellen.
• Verwenden Sie für Schaltflächenbeschriftungen nicht Ja und Nein. Benennen Sie die Aktion, die ausgeführt wird, wenn der Benutzer auf die Schaltfläche klickt.
• Wählen Sie Wörter, die logisch an den vorherigen Inhalt anschließen: Wenn in der Überschrift Objekttyp ## löschen? steht, sollte auch der Schaltflächentext Löschen enthalten.
• Seien Sie vorsichtig, wenn Sie eine primäre Schaltfläche für eine destruktive Aktion verwenden, insbesondere wenn diese durch eine Tastatureingabe ausgelöst werden kann. Seien Sie in diesen Fällen sehr explizit, damit es keine Zweideutigkeit gibt.

Aus Gründen der Einheitlichkeit finden Sie in den Inhaltsrichtlinien von Jutro eine Liste empfohlener Aktionsbezeichnungen.

Verwenden Sie Verben oder Verbalphrasen.

Die Wörter in der Schaltfläche dürfen nicht vage, sondern müssen genau, spezifisch und eindeutig sein.

Groß- und Kleinschreibung verwenden

Text auf Schaltflächen muss immer der üblichen Groß- und Kleinschreibung entsprechen. Verwenden Sie niemals durchgängig Großbuchstaben, um eine bestimmte Schaltfläche hervorzuheben.

Weitere Informationen zum Implementieren der Groß- und Kleinschreibung finden Sie im UI Text Style Guide.

Verwenden Sie bei Schaltflächenbeschriftungen die übliche Groß- und Kleinschreibung.

Durchgängige Großschreibung beeinträchtigt die Lesbarkeit. Verwenden Sie sie nicht.

Auf den Ton achten

• Die Beschriftung der Schaltflächen sollte dem normalen Sprachschatz entsprechen. Fragen Sie sich, ob die betreffenden Wörter in Unterhaltungen verwendet werden.
• Verwenden Sie keine Emojis, Ausrufezeichen oder andere Interpunktionszeichen in Schaltflächenbeschriftungen.

Verwenden Sie in Schaltflächenbeschriftungen nur Text.

Emojis und Ausrufezeichen eignen sich nicht für die Zweckmäßigkeit von Schaltflächen.

Verhalten

Zustände

Schaltflächen haben die Zustände Aktiviert, Schwebend, Fokussiert, Aktiv, Deaktiviert und Wird geladen.

	Zustand	Beschreibung
	Aktiviert	Teilt dem Benutzer mit, dass das Element für die Interaktion aktiviert ist (Standard).
	Schwebend	Zeigt an, dass der Benutzer den Mauszeiger auf dem Element positioniert hat (desktop only). Der Zustand „Schwebend“ kann mit den Zuständen „Aktiviert“ und „Wird geladen“ verwendet werden.
	Fokussiert	Zeigt an, dass der Benutzer das Element hervorgehoben hat, in der Regel über eine Eingabemethode wie Tastatur oder Sprachbefehl. Der Zustand „Fokussiert“ kann mit allen anderen Zuständen (einschließlich „Deaktiviert“) verwendet werden.
	Aktiv	Gibt an, dass der Benutzer auf das Element klickt oder tippt. Der Zustand „Aktiv“ kann mit den Zuständen „Aktiviert“ und „Schwebend“ verwendet werden.
	Deaktiviert	Teilt dem Benutzer mit, dass das Element nicht interaktiv ist. Jede Schaltfläche ist standardmäßig barrierefrei deaktiviert. Das bedeutet, dass die deaktivierte Schaltfläche fokussiert werden kann.
	Wird geladen	Teilt dem Benutzer mit, dass die Aktion ausgeführt wird. Verwenden Sie den Zustand „Wird geladen“, wenn eine Aktion wahrscheinlich länger als 1 Sekunde dauert. Bei einer Schaltfläche mit dem Zustand „Wird geladen“ ist Folgendes erforderlich: Der Text muss sich in „Bitte warten...“ ändern. Die Möglichkeit, mit der Schaltfläche zu interagieren, muss deaktiviert sein. Dies ist eine Vorsichtsmaßnahme, um sicherzustellen, dass Benutzer keinen Fehler machen, z. B. etwas in einem Formular doppelt senden. Die Breite der Schaltfläche ist beizubehalten. Der Zustand „Wird geladen“ kann angepasst werden. Wenn Kunden die Standardanzeige für den Status „Wird geladen“ (3 pulsierende Punkte) nicht verwenden möchten, können sie einen eigenen einfügen.

Interaktionen

Maus

Die Schaltfläche kann durch Klicken auf eine Stelle im Schaltflächencontainer ausgelöst werden.

Tastatur

Wenn die Schaltfläche den Fokus hat, kann sie über die Leertaste und die Eingabetaste aktiviert werden.

Screenreader

In der Schaltflächenkomponente wird das implizit semantische HTML5-Tag <button> verwendet. Text zwischen den Tags dient als barrierefreier Name.

Reaktionsfähigkeit und Anpassungsfähigkeit

Jutro-Schaltflächen sind in 2 verschiedenen Größen verfügbar und lassen sich so entsprechend den Anforderungen von Unternehmens- und Consumer-Anwendungen verwenden. Unternehmensanwendungen erfordern eine höhere Datendichte und weisen daher kleinere Schaltflächen und eine größere Bildschirmfläche auf. Dank des responsiven Jutro-Designs können Schaltflächen wie die meisten anderen Komponenten über die Komponenten Grid und Flex verteilt, in der Größe verändert und angeordnet werden.

Kleine Schaltfläche	Mittelgroße Schaltfläche

Bei mobilen Anwendungen wird empfohlen, Schaltflächen über die gesamte Breite des Containers anzuordnen (der Text und das Symbol in der Schaltfläche müssen zentriert sein).

Barrierefreiheit

Das Jutro-Schaltflächenelement stellt eine HTML-Schaltfläche dar, die zum Übermitteln von Informationen verwendet wird. Der Text zwischen dem öffnenden und dem schließenden Tag wird als Text der Schaltfläche angezeigt.

Diese Komponente wurde validiert, um die Richtlinien für Barrierefreiheit WCAG 2.2 AA in der Standardbasiskonfiguration zu erfüllen. Dazu wird u. a. Folgendes sichergestellt:

• Das Kontrastverhältnis von Textelementen zu ihrem Hintergrund liegt über 4,5:1.
• Nicht-textuelle Inhalte, die eine Bedeutung vermitteln sollen (z. B. Symbole und Fokusanzeigen), weisen ein Kontrastverhältnis von mindestens 3:1 zu den angrenzenden Farben auf.
• Das jeweilige Element kann sowohl über eine Tastatur als auch über eine Maus bedient werden.
• Der Zugriff auf die Inhalte erfolgt über Screenreader wie JAWS oder VoiceOver.

Die Konformität mit den Richtlinien für Barrierefreiheit hängt letztendlich davon ab, wie diese Komponente implementiert und angepasst wird. Vom Autor des Inhalts vorgenommene Änderungen können sich auf die Barrierefreiheit auswirken. Details zu unserem Modell der geteilten Verantwortung finden Sie in unserer Erklärung zur Barrierefreiheit von Jutro.

Beachten Sie die folgenden Anweisungen und die WAI-ARIA Authoring Practices for Buttons, wenn Sie diese Komponente in Ihren Anwendungen verwenden:

• Der Schaltflächentext muss die Aktion der Schaltfläche eindeutig angeben.
• Überprüfen Sie bei Verwendung benutzerdefinierter Farbschemas, ob das Kontrastverhältnis zwischen Text und Hintergrund dem erforderlichen Schwellenwert entspricht.

Barrierefrei deaktivierte Komponente

Die Komponente Button erfüllt ab Jutro Version 8.4.0 auch im deaktivierten Zustand die Anforderung der Barrierefreiheit. Diese Funktion wird standardmäßig für alle neuen Anwendungen aktiviert, die mit Jutro Version 8.4.0 oder später erstellt werden. In älteren Anwendungen kann diese Funktion verwendet werden, indem, wie unten dargestellt, das Objekt accessibleDisabled in der zugehörigen config.json-Datei hinzugefügt wird.

Barrierefrei deaktivierte Button-Komponenten weisen folgende Merkmale auf:

• Das HTML-Attribut disabled wird entfernt.
• Eine zusätzliche Eigenschaft mit dem Namen aria-disabled wird definiert.
• Alle Rückruffunktionen, z. B. onClick und onBlur, werden blockiert und können nicht mehr aufgerufen werden.
• Der Wert Button des HTML-Attributs „type“ wird in button geändert.
• Wenn für die Schaltfläche das Attribut href angegeben ist, wird die zugehörige Rolle in link und tabIndex in 0 geändert.

Das Design für barrierefrei deaktivierte und standardmäßige deaktivierte Schaltflächen bleibt gleich.

Note: Es gibt veraltete Versionen dieser Komponente. Wechseln Sie zu einer Version, die älter als 10.0.x ist, um die entsprechende Dokumentation anzuzeigen.

Code

<Button
  label="Click me!"
  onClick={handleClick}
/>

Importanweisung

import { Button } from '@jutro/components';

Komponentenvertrag

Vergewissern Sie sich, dass Sie die API-Oberfläche der Design System-Komponenten und die damit verbundenen Auswirkungen und Kompromisse verstehen. Erfahren Sie mehr in unserer Einführung zur Komponenten-API.

Eigenschaften

labelerforderlich

Typ

IntlMessageShape

Beschreibung

Label text displayed on the button. This is also passed as a default value to the buttons aria-label.

className

Typ

string

Beschreibung

CSS class name for this component.

disabled

Typ

boolean

Beschreibung

If set to true, the button is disabled. IMPORTANT: this prop overrides the native HTML disabled attribute. In this case, the button is still tabbable, even when it's disabled.

fullWidth

Typ

boolean

Beschreibung

If set to true, the button will take the full width of its parent container.

hideLabel

Typ

boolean

Beschreibung

If set to true, the label is not displayed.

icon

Typ

string | Icon

Beschreibung

An Icon component to render on the component. The value must be an Icon component or the icon's name. For example, CheckIcon or 'gw-check'.

iconPosition

Typ

'left' | 'right'

Beschreibung

Sets where the icon is placed relative to the text.

Standardwert

'left'

onClick

Typ

function (React.MouseEvent<HTMLElement>)

Beschreibung

On click event handler.

size

Typ

'small' | 'medium'

Beschreibung

Sets the size of button (small, medium).

Standardwert

'medium'

variant

Typ

'primary' | 'secondary' | 'tertiary' | 'neutral' | 'inverse'

Beschreibung

Sets the variant of button to display (primary, secondary, tertiary, neutral, inverse) Note: neutral and inverse variants are applicable to buttons with icons only.

Standardwert

'primary'

renderIconVerworfen

Typ

React.FC<{}>

Beschreibung

A function that renders a custom icon.

Hooks

Für Button sind keine Hooks verfügbar.

Übersetzungsschlüssel

Es gibt keine Übersetzungen für Button.

Informationen über die Verwaltung von Übersetzungen finden Sie in unserem Abschnitt über Internationalisierung.

Escape Hatches

Weitere Informationen finden Sie in unserer Dokumentation über Escape Hatches.

Übergeben von HTML-Eigenschaften an die Komponente

Sie können Attribute des HTML-Elements „Button“ verwenden, mit Ausnahme derjenigen, die von Jutro überschrieben werden.

<Button
  label="Click me"
  onClick={handleClick}
  id="my-button"
  variant="primary"
/>

Durch die Übergabe dieser id-Eigenschaft wird diese Teil des HTML-Button-Elements, das im HTML-DOM erstellt wird.

Benutzerdefinierte Verhalten der Button-Komponente

Barrierefrei deaktivierte Komponente

Die Komponente Button bleibt auch im deaktivierten Zustand barrierefrei.

Barrierefrei deaktivierte Button-Komponenten weisen folgende Merkmale auf:

• Das HTML-Attribut disabled wird entfernt.
• Eine zusätzliche Eigenschaft mit dem Namen aria-disabled wird definiert.
• Alle Rückruffunktionen, z. B. onClick und onBlur, werden blockiert und können nicht mehr aufgerufen werden.
• Der Wert Button des HTML-Attributs „type“ wird in button geändert.
• Wenn für die Schaltfläche das Attribut href angegeben ist, wird die zugehörige Rolle in link und tabIndex in 0 geändert.

Das Design für barrierefrei deaktivierte und standardmäßige deaktivierte Schaltflächen bleibt gleich.

Information zu älteren Komponenten

Verwenden Sie eine der älteren Schaltflächenkomponenten?

• Um die entsprechende Dokumentation für die alten Komponenten anzuzeigen, wechseln Sie zu einer Version der Dokumentation, die älter als 10.0.x ist.

• Die folgenden älteren Komponenten sind auch in Storybook verfügbar:

  • Button
  • IconButton
  • AsyncButtonLink
  • ButtonLink

Note: Es gibt veraltete Versionen dieser Komponente. Wechseln Sie zu einer Version, die älter als 10.0.x ist, um die entsprechende Dokumentation anzuzeigen.

Beispiele

Im Abschnitt Verwendung finden Sie Informationen zum korrekten Design einer Schaltfläche und den verschiedenen bereitgestellten Alternativen und Varianten. Unter Verwendung der verfügbaren Eigenschaften können Sie verschiedene Varianten einer Schaltfläche erstellen.

Einfache Schaltfläche

Die Komponente Button ist im Paket @jutro/components verfügbar. Bei der Verwendung von Schaltflächen sind 4 Basiseigenschaften verfügbar: label, icon, variant und onClick. In den meisten Fällen werden Sie nur diese Eigenschaften verwenden.

import Button from '@jutro/components';

// ...

<Button
  label="Click me"
  icon="gw-bathtub"
  onClick={handleCLick}
/>;

Schaltfläche nur mit Symbol

Mit der Eigenschaft hideLabel können Sie eine Schaltfläche nur mit Symbol erstellen, auf der keine Beschriftung, sondern nur das ausgewählte Symbol angezeigt wird. Die Eigenschaft label wird für aria-label der Schaltfläche verwendet.

<Button
  icon="gw-bathtub"
  label="this will be the aria-label text"
  onClick={handleClick}
  hideLabel
/>

In diesem Fall wird der Wert der Eigenschaft iconPosition ignoriert und das Symbol wird immer zentriert angezeigt.

Asynchrone Schaltfläche

Wenn mit einer Schaltfläche eine Aktion ausgelöst wird und auf deren Beendigung oder auf ein spezifisches Ereignis gewartet werden muss, lässt sich dies wie folgt festlegen:

import React, { useEffect, useState } from 'react';
import { InlineLoader } from '@jutro/components';
import { Button } from '@jutro/components';
import styles from './AsyncButton.module.css';

function getFromAPI() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Done!');
    }, 2000);
  });
}

export function AsyncButtonExample() {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function someAsyncFunction() {
      await getFromAPI();

      setLoading(false);
    }

    if (loading) {
      someAsyncFunction();
    }
  }, [loading]);

  return (
    <Button
      label={loading ? 'Saving' : 'Save'}
      renderIcon={() => <InlineLoader loading={loading} />}
      iconPosition="right"
      disabled={loading}
      onClick={() => setLoading(true)}
    />
  );
}

Schaltfläche mit QuickInfo

Tooltip wird durch die Kombination Tooltip + Button hinzugefügt.

<Tooltip content="This is a tooltip">
  <Button label="Click me" />
</Tooltip>

Änderungsprotokoll

10.0.0

Es wurde eine neue @jutro/components/Button-Komponente eingeführt, welche die vorherige ersetzt.

Die früheren auf Schaltflächen bezogenen Komponenten wurden abgekündigt und in das @jutro/legacy-Paket verschoben. Wechseln Sie zu einer älteren Version, um die zugehörige Dokumentation anzuzeigen.

Ursprüngliche Speicherorte der Komponenten:

• Button: @jutro/components/Button
• IconButton: @jutro/components/IconButton
• AsyncButtonLink: @jutro/router/AsyncButtonLink
• ButtonLink: @jutro/router/ButtonLink

Neue Speicherorte der Komponenten:

• Button: @jutro/legacy/components/Button
• IconButton: @jutro/legacy/components/IconButton
• AsyncButtonLink: @jutro/legacy/router/AsyncButton
• ButtonLink: @jutro/legacy/router/ButtonLink

Es gibt Codemods, mit denen Sie vorhandene Importe automatisch umbenennen können.

10.9.0

icon-Eigenschaftstyp erweitert

Der Typ der Eigenschaft icon wurde auf string | React.ComponentType erweitert.

Abkündigungen

• Die Übergabe von string als Wert an die Eigenschaft icon wurde abgekündigt.
• Die Eigenschaft renderIcon wurde abgekündigt.

10.12.0

Änderungen an Design-Token

Das Hintergrund-Token, mit dem die Hintergrundfarbe gesteuert wird, wenn der Mauszeiger über bestimmte Schaltflächentypen bewegt wird, wurde geändert. Weitere Details finden Sie unter Änderungsprotokoll zu Design-Token.