Button

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
  onPress={() => {
    alert("Button gedrückt");
  }}
>
  Button
</Button>

Variants

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

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

<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 ein 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.

Outline: Die Outline-Variant wirkt durch den Verzicht auf eine Hintergrundfarbe dezent. Durch den Rahmen bleibt sie weiterhin präsent, ohne dominant zu erscheinen.

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";

<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

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 oder dekorativen Hintergründen funktionieren.

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

<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";

<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";

<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,
  IconHome,
} from "@mittwald/flow-react-components";

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

Text und Icon

Verwende <Text /> und <Icon /> zusammen, um sowohl Text als auch Icon im Button anzuzeigen. Achte darauf, dass das Icon dem User einen Mehrwert bietet und nicht nur einen dekorativen Zweck erfüllt. Zum Beispiel indiziert ein Chevron-Icon, dass der Button ein Dropdown öffnet. Ein Close-Icon zeigt an, dass der Button als Filterelement wieder entfernt werden kann.

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

<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>

Align

Benutze die Align Komponente, um deinen Button neben Input Feldern zu platzieren.

import {
  Align,
  Button,
  Label,
  TextField,
} from "@mittwald/flow-react-components";

<Align>
  <TextField>
    <Label>Weiterleitungsziel</Label>
  </TextField>
  <Button>Hinzufügen</Button>
</Align>

States

Ein Button hat sieben verschiedene States: Default, Hover, Pressed, Disabled, Pending, Succeeded und Failed.

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

<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.