mittwald Flow Logo

Components

ActionGroup

Die ActionGroup dient dazu, zusammengehörige Actions sinnvoll zu gruppieren. Sie wird beispielsweise in Sections oder Modals verwendet.GitHub

Playground

Verwende <ActionGroup />, um eine ActionGroup darzustellen.

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

<ActionGroup>
  <Button color="accent">Organisation erstellen</Button>
  <Button color="secondary" variant="soft">
    Abbrechen
  </Button>
</ActionGroup>

Slots

Die Actions werden von der ActionGroup automatisch in die Slots primary, secondary und abort sortiert. So werden Buttons mit der Color Primary (Standard), Accent und Danger automatisch dem Slot primary zugeordnet, der am Ende der ActionGroup positioniert ist.

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

<ActionGroup>
  <Button color="accent">E-Mail-Addresse anlegen</Button>
  <Button color="secondary" variant="soft" slot="secondary">
    Speichern und weitere anlegen
  </Button>
  <Button color="secondary" variant="soft">
    Abbrechen
  </Button>
</ActionGroup>

Kombiniere mit ...

Link

Passwort vergessen?
import {
  ActionGroup,
  Button,
  Link,
} from "@mittwald/flow-react-components";

<ActionGroup>
  <Link slot="abort">Passwort vergessen?</Link>
  <Button color="accent">Anmelden</Button>
</ActionGroup>

Overview