# ActionGroup

Die ActionGroup gruppiert zusammengehörige Actions.

```tsx
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](/04-components/actions/button).
- 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](/04-components/actions/button) 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.

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

---

# Sizes

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

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

<ActionGroup size="s">
  <Link>Passwort vergessen?</Link>
  <Button color="accent">Anmelden</Button>
</ActionGroup>
```

---

# Kombiniere mit …

## Link

Kombiniere Buttons in der ActionGroup mit einem
[Link](/04-components/navigation/link), um textuelle Nebenaktionen anzubieten.

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

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

---

# 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. |
| `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](https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom) |
| `key` | `Key` | - | - |
| `className` | `string` | - | The elements class name. |