# ActionGroup

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

## Overview

# Playground

Verwende `<ActionGroup />`, um eine ActionGroup darzustellen.

```tsx
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](/04-components/actions/button/overview) mit der Color Primary
(Standard), Accent und Danger automatisch dem Slot `primary` zugeordnet, der am
Ende der ActionGroup positioniert ist.

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

---

# 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, und werden mit dem gewohnten Abstand von
links nach rechts angeordnet.

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

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

---

# Kombiniere mit ...

## Link

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

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


## Develop

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

```
<ActionGroup>
  <Button>Projekt bearbeiten</Button>
  <ModalTrigger>
    <Button>Mitglieder anzeigen</Button>
    <Suspense>
      <Modal>...</Modal>
    </Suspense>
  </ModalTrigger>
</ActionGroup>
```

---

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `spacing` | `"s" \| "m"` | `"s"` | The spacing between the buttons inside the action group. |
| `preserveOrder` | `boolean` | `false` | When set, the buttons are not automatically arranged; they stay in the order they appear in the source, laid out from left to right with spacing between them. Alignment of the group is then up to the surrounding context. |
| `children` | `ReactNode` | - | - |
| `wrapWith` | `ReactElement<unknown, string \| JSXElementConstructor<any>>` | - | - |
| `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](https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom) |
| `key` | `Key` | - | - |
| `className` | `string` | - | The elements class name. |


## Guidelines

# Grundlagen

Die ActionGroup dient dazu, mehrere Actions sinnvoll zu gruppieren und in eine
konsistente Reihenfolge zu bringen. Sie wird häufig im
[Section](/04-components/structure/section/overview) Header, im Header einer
[List](/04-components/structure/list/overview) oder im Footer eines
[Modals](/04-components/overlays/modal/overview) verwendet. Sie kann aber auch
eigenständig im Content eingesetzt werden.

## Best Practices

Achte bei der Verwendung einer ActionGroup darauf, dass ...

- die innerhalb der ActionGroup eingesetzten Buttons die Richtlinien aus der
  [Button Guideline](/04-components/actions/button/overview) einhalten.
- bei mehreren Buttons nur ein Button als Hauptaktion hervorgehoben wird.
- sie häufig in anderen Components wie
  [Section](/04-components/structure/section/overview),
  [List](/04-components/structure/list/overview) oder
  [Modal](/04-components/overlays/modal/overview) zum Einsatz kommt.

## Verwendung

Verwende eine ActionGroup, um ...

- mehrere zusammengehörige Actions in eine sinnvolle Reihenfolge zu bringen.
- eine Hauptaktion der Section, des Modals oder der Liste hervorzuheben.