Playground

Verwende <Button />, um einen Button darzustellen.

Benutze das onPress Property um die Interaktion mit Maus, Keyboard oder Touch zu ermöglichen.

import Button from "@mittwald/flow-react-components/Button";

<Button
  onPress={() => {
    alert("Button gedrückt");
  }}
>
  Button
</Button>

Variants

Beim Button wird zwischen den Variants Solid, Soft, Plain und Outline unterschieden.

import Button from "@mittwald/flow-react-components/Button";

<Row>
  <Button>Solid</Button>
  <Button variant="soft">Soft</Button>
  <Button variant="plain">Plain</Button>
  <Button variant="outline">Outline</Button>
</Row>

Solid: Die Solid-Variant zeichnet sich durch sein flächiges und auffälliges Aussehen aus. Aus diesem Grund verbergen sich in der Regel die Hauptaktionen hinter einem Solid-Button.

Soft: Die Soft-Variant verleiht dem Button einen softeren Touch und eignet sich daher gut für sekundäre Aktionen.

Plain: Die Plain-Variant ist weniger auffällig als die anderen Variants und wird für weniger wichtige oder versteckte Aktionen verwendet.

Color

Je nach Bedarf stehen vier Button-Color zur Auswahl: Primary, Secondary, Accent und Danger.

import Button from "@mittwald/flow-react-components/Button";

<Row>
  <Button color="primary">Fortfahren/Aktion</Button>
  <Button color="secondary">Abbrechen/Zurück</Button>
  <Button color="accent">Erstellen/Speichern</Button>
  <Button color="danger">Löschen/Kündigen</Button>
</Row>

Primary: Verwende die Primary-Color für Hauptaktionen, wenn der Kontext keinen Accent- oder Danger-Button erfordert.

Secondary: Die Secondary-Color wird für Nebenaktionen verwendet. Um dies zu verdeutlichen, wird die Secondary-Color häufig als Soft-Variant verwendet.

Accent: Die grüne Farbe der Accent-Color soll dem Button eine positive Bedeutung verleihen. Daher wird diese Color vor allem im Kontext von Erstellungs-, Speicher- oder Bestellvorgängen verwendet.

Danger: Die Danger-Color zeichnet sich durch die rote Farbe aus, die davor warnen soll, dass sich hinter dem Button eine negative Konsequenz verbirgt. Beispielsweise kann sich hinter dem Button eine Lösch- oder Kündigungsfunktion verbergen.

Color Light und Dark

Zusätzlich zu den Standard-Colors, können Button in Light und Dark dargestellt werden. Beide Colors sind Alternativen zu den herkömmlichen Farben, falls diese nicht auf farbigen/dekorativen Hintergründen funktionieren.

import Button from "@mittwald/flow-react-components/Button";

<Row>
  <Button color="light">Light</Button>
  <Button variant="soft" color="light">
    Light
  </Button>
  <Button variant="plain" color="light">
    Light
  </Button>
  <Button variant="outline" color="light">
    Light
  </Button>
</Row>

import Button from "@mittwald/flow-react-components/Button";

<Row>
  <Button color="dark">Dark</Button>
  <Button variant="soft" color="dark">
    Dark
  </Button>
  <Button variant="plain" color="dark">
    Dark
  </Button>
  <Button variant="outline" color="dark">
    Dark
  </Button>
</Row>

Light: Verwende die Light-Color, bei dunklen Hintergründen mit einem HSL Lightness-Wert von weniger als 50.

Dark: Verwende die Dark-Color, bei hellen, farbigen Hintergründen mit einem HSL Lightness-Wert von größer als 50.

Sizes

Die Size des Buttons kann Small oder Medium sein. Medium ist die Standardgröße und wird für die meisten Buttons verwendet.

import Button from "@mittwald/flow-react-components/Button";

<Row>
  <Button size="s">Small</Button>
  <Button>Medium</Button>
</Row>

Kombiniere mit...

Im Content-Bereich des Buttons kann entweder Text, ein Icon oder Text mit einem Icon am Ende beinhalten.

Icon

Verwende <Icon /> in einem <Button />, um ein Icon statt Text im Button anzuzeigen.

import Button from "@mittwald/flow-react-components/Button";
import { IconHome } from "@mittwald/flow-react-components/Icons";

<Row>
  <Button size="s" aria-label="Home">
    <IconHome />
  </Button>
  <Button aria-label="Home">
    <IconHome />
  </Button>
</Row>

Text und Icon

Verwende <Text /> zusammen mit <Icon /> in einem <Button />, um Text mit einem Icon im Button anzuzeigen. Das Icon soll spezielle Verhaltensweisen des Buttons signalisieren. Zum Beispiel kann ein Chevron-Icon dem Nutzer anzeigen, dass sich ein Dropdown öffnet, oder ein Close-Icon zeigt an, dass der Button als Filterelement wieder entfernt werden kann.

import Button from "@mittwald/flow-react-components/Button";
import Text from "@mittwald/flow-react-components/Text";
import {
  IconChevronDown,
  IconClose,
} from "@mittwald/flow-react-components/Icons";

<Row>
  <Button size="s">
    <Text>E-Mail hinzufügen</Text>
    <IconChevronDown />
  </Button>
  <Button>
    <Text>E-Mail hinzufügen</Text>
    <IconChevronDown />
  </Button>
  <Button size="s">
    <Text>Filter</Text>
    <IconClose />
  </Button>
  <Button>
    <Text>Filter</Text>
    <IconClose />
  </Button>
</Row>

States

import Button from "@mittwald/flow-react-components/Button";

<Row>
  <Button isDisabled>Fortfahren/Aktion</Button>
  <Button isPending>Fortfahren/Aktion</Button>
  <Button isSucceeded>Fortfahren/Aktion</Button>
  <Button isFailed>Fortfahren/Aktion</Button>
</Row>

Disabled: Verwende den Disabled State, wenn der Button keine Aktion oder kein Ereignis auslösen soll.

Pending, Succeeded und Failed: Pending, Succeeded und Failed sollen dem Nutzer signalisieren, dass im Hintergrund etwas passiert, wenn er auf einen Button geklickt hat. Verwende den Button zusammen mit der Komponente Action, um die States zu steuern.

Grundlagen

Mit einem Button können Aktionen ausgeführt werden. Entweder wird die Aktion direkt im Content-Bereich durchgeführt oder innerhalb eines Modal oder Off-Canvas, ohne dass die Seite verlassen werden muss. Ein Button hat eine hohe Sichtbarkeit und sollte daher nicht zu übermäßig eingesetzt werden.

Best practices

Achte bei der Verwendung eines Buttons darauf, dass...

• der Text oder das Icon die Aktion klar und verständlich vermittelt.
• der Button für den Nutzer leicht zu finden und zu bedienen ist.
• die richtige Art von Button für die auszuführende Aktion gewählt wurde.
• die vorgegebenen Sizes verwendet werden und die Größe nicht verändert wird, um ein komfortables Anklicken zu gewährleisten.
• der Button nicht zu übermäßig verwendet wird, damit die gute Sichtbarkeit des Buttons nicht verloren geht.

Verwendung

Verwende einen Button, um...

• Aktionen – wie z. B. Speichern und Zurücksetzen – innerhalb eines Formulars anzuzeigen.
• ein Modal oder ein Off-Canvas zu öffnen.
• einen Erstellungsprozess zu starten oder auszuführen.
• Aktionen in einem Modal anzubieten.

Button vs. Link

Buttons und Links werden häufig verwechselt. Um die beiden besser unterscheiden zu können, hier ein paar hilfreiche Anhaltspunkte.

Anwendung

Position

Bei der Positionierung des Buttons sind folgende Punkte zu beachten:

• In den meisten Fällen sollte ein Button nicht zu versteckt sein und vom Nutzer leicht gefunden werden.
• Wenn es für den Nutzer notwendig ist, einen Button als Button zu identifizieren, sollte ein Kontrastverhältnis zum Hintergrund von mindestens 3:1 AA oder besser 4:1 AAA angestrebt werden. Bei farbigen Hintergründen sollten gegebenenfalls die Colors Light oder Dark in Betracht gezogen werden.
• Verwende niemals zu viele Buttons nebeneinander. Als Richtwert sollten nicht mehr als zwei oder drei Buttons nebeneinander verwendet werden.
• Viele Buttons haben in komplexeren Komponenten bereits eine feste Position. Zum Beispiel werden Buttons automatisch in der ActionGroup positioniert.

Hierarchie

Die verschiedenen Arten von Buttons haben eine Hierarchie untereinander. Das heißt, wenn mehrere Buttons nebeneinander verwendet werden, muss darauf geachtet werden, welche Buttonart dafür geeignet ist.

• Für Hauptaktionen verwende einen Button als Solid-Variant in den Colors Primary-, Accent- oder Danger. Um Verwirrung zu vermeiden, achte darauf, nur eine Hauptaktion darzustellen. Zum Beispiel können zwei Danger-Buttons mit einer Löschfunktion vom Nutzer nicht direkt unterschieden werden.
• Wenn eine Nebenaktion fast gleichwertig ist wie die Hauptaktion, dann verwende einen Solid-Variant-Button in der Secondary-Color. Ist die Nebenaktion nicht so wichtig und nebensächlicher, dann wird die Secondary-Color mit der Soft-Variant verwendet. Besonders gut ist diese Darstellung für “Schließen”- oder “Zurück”-Buttons geeignet.
• Wenn Aktionen nicht sofort vom Nutzer bemerkt werden sollen, dann verwende einen Button in der Plain-Variant.
• Versuche, Buttons desselben Variant und derselben Color zu gruppieren.

Sizes

Buttons sind in der Sizes Medium und Small erhältlich. Die Höhe wird vom Inhalt des Buttons bestimmt.

• Medium ist die Standardgröße und wird in den meisten Fällen verwendet.
• Small wird seltener verwendet und ist für Buttons gedacht, die platzsparender sein sollten.

Feedback

Zeige dem Nutzer immer an, dass der Klick auf den Button eine Aktion auslöst:

• Modal oder Off-Canvas öffnet sich.
• Ein Spinner, Häkchen oder ein Kreuz wird angezeigt, um zu signalisieren, dass ein Prozess läuft, erfolgreich war oder fehlgeschlagen ist. Für die Steuerung wird die Action-Komponente verwendet.
• Mit den unterschiedlichen States eines Buttons, die Interaktivität vermitteln.

Writing guidelines

Text

Achte beim Verfassen des Textes besonders auf:

• Verwende nie mehr als 2 Wörter im Button.
• Die Aktion, die sich hinter dem Button verbirgt, muss aus dem Text klar hervorgehen.
• Der Button sollte nie mehrzeilig werden. Buttontexte sollten immer so gesetzt werden, dass sie auch in kleinen Größen funktionieren. Wenn der Text zu lang wird, wird er automatisch auspunktiert.
• Das erste Wort sollte immer mit einem Großbuchstaben beginnen. Wörter sollten nicht ausschließlich in Großbuchstaben geschrieben werden.

Icon

Achte bei der Auswahl des Icons besonders auf...

• ein universell verständliches Icon.
• dass die Icon-Komponente verwendet wird.

Text mit Icon

Beachte besonders bei einem Button mit Text und einem Icon:

• Das Icon muss eindeutig zeigen, dass sich hinter dem Button eine besondere Funktion verbirgt. Dies kann z. B. bei einer Dropdown-Funktion durch ein Chevron-Icon erreicht werden.

Behavior

Responsive Layout

Bei schmaleren Bildschirmgrößen behält der Button die vorgegebene Breite. Eine Ausnahme bilden die Buttons in der Modal-Navigation. Wenn die Bildschirmbreite kleiner als 400 px ist, nehmen diese die volle Breite des Contents an.

Accessibility

Achte beim Button darauf, dass...

• ein Tooltip das Icon beschreibt, wenn das Icon selbst nicht verständlich genug ist
• man den Button auch per Tastatur erreichen kann.
• der Screenreader den Button als Button erkennt.

Icon

Das Icon erhält automatisch das Attribut aria-hidden=true. Verwende das Attribut aria-label bei dem Button, um die zugehörige Aktion zu beschreiben.

Color Light und Dark

Achte bei den Colors Light und Dark auf einen genügenden Kontrast zum Hintergrund. Es wird empfohlen, eine Color in Light zu verwenden, wenn der HSL Lightness-Wert des Hintergrunds weniger als 50 ist. Die Color Dark wird für Hintergründe empfohlen, die einen HSL Lightness-Wert von größer als 50 haben. Für beide Colors gilt: Je weiter der HSL Lightness-Wert von 50 entfernt ist, desto besser ist der Kontrast.