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

---

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