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