ActionGroup

Die ActionGroup gruppiert zusammengehörige Actions.

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

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

Best Practices

Für die Buttons in der ActionGroup gelten die Best Practices des Buttons.
Hebe pro Seite möglichst nur eine Hauptaktion hervor. So erkennt der User den primären nächsten Schritt eindeutig.

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.

Reihenfolge beibehalten

Mit preserveOrder verzichtet die ActionGroup auf die automatische Sortierung in die Slots primary, secondary und abort. Die Actions bleiben in der Reihenfolge, in der sie im Code stehen.

Sizes

Mit size werden die Buttons und Links in der ActionGroup einheitlich dimensioniert.

Passwort vergessen?

Kombiniere mit …

Link

Kombiniere Buttons in der ActionGroup mit einem Link, um textuelle Nebenaktionen anzubieten.

Passwort vergessen?

Reihenfolge der Buttons

Es kann vorkommen, dass sich durch Rerendering die Reihenfolge der Buttons ändert, wenn z. B. Inhalte nachgeladen werden. Um das zu verhindern, sollte um diese Inhalte ein Suspense gelegt werden.

Properties

Property	Type	Default	Description
`spacing`	`"s" \| "m"`	"s"	The spacing between the buttons inside the action group.
`size`	`"s" \| "m"`	"m"	The size of the buttons and links inside the action group.
`preserveOrder`	`boolean`	false	When set, the buttons are not sorted automatically but stay in source order.
`children`	`ReactNode`	-
`wrapWith`	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	-	A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup.
`ref`	`Ref<HTMLSpanElement>`	-	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see React Docs
`key`	`Key`	-
`className`	`string`	-	The elements class name.

Components

Integrations