# Action

Die Action wird um einen Button gelegt, um beispielsweise visuelles Feedback bei asynchronen Aktionen zu ermöglichen oder ein Bestätigungsmodal auszulösen.

## Overview

# Playground

Lege `<Action />`, um einen [Button](/04-components/actions/button/overview), um
die States des Buttons zu steuern.

```tsx
import {
  Action,
  Button,
} from "@mittwald/flow-react-components";
import { sleep } from "@/content/04-components/actions/action/examples/lib";

<Action onAction={sleep}>
  <Button color="accent">Speichern</Button>
</Action>
```

---

# Pending

Wenn eine asynchrone Aktion länger als 1000 Millisekunden dauert, wird der
**Pending** State angezeigt.

```tsx
import {
  Action,
  Button,
} from "@mittwald/flow-react-components";
import { sleepLong } from "@/content/04-components/actions/action/examples/lib";

<Action onAction={sleepLong}>
  <Button color="accent">Speichern</Button>
</Action>
```

---

# Feedback

Wenn ein visuelles Feedback nach einer Userinteraktion angezeigt werden soll,
kann das Property `showFeedback` genutzt werden.

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

<Action
  onAction={() => {
    // do nothing
  }}
  showFeedback
>
  <Button color="accent">Speichern</Button>
</Action>
```

---

# Bestätigungsmodal

Um User vor unbeabsichtigten Aktionen zu schützen, kann ein Bestätigungsmodal
angezeigt werden. Dafür muss innerhalb der Action ein
[Modal](/04-components/overlays/modal/overview) mit dem Attribut
`slot="actionConfirm"` platziert werden.

```tsx
import {
  Action,
  ActionGroup,
  Button,
  Content,
  Heading,
  Modal,
} from "@mittwald/flow-react-components";
import { sleepLong } from "@/content/04-components/actions/action/examples/lib";

<Action onAction={sleepLong}>
  <Modal slot="actionConfirm">
    <Heading>Projekt löschen</Heading>
    <Content>
      Wenn das Projekt &quot;Test&quot; einmal gelöscht ist,
      kann es nicht wiederhergestellt werden.
    </Content>
    <ActionGroup>
      <Button color="danger">Löschen</Button>
      <Button color="secondary" variant="soft">
        Abbrechen
      </Button>
    </ActionGroup>
  </Modal>
  <Button color="danger">Projekt löschen</Button>
</Action>
```

---

# Verschachtelte Actions

Wenn mehrere Aktionen auf eine Userinteraktion folgen, können Actions auch
ineinander verschachtelt werden.

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

<Action onAction={() => console.log("close modal")}>
  <Action onAction={() => console.log("save")}>
    <Button color="accent">Speichern</Button>
  </Action>
</Action>
```

---

# In MenuItems

Actions können auch um `MenuItems` gelegt werden, um deren State zu steuern.

```tsx
import {
  Action,
  Button,
  ContextMenuTrigger,
  ContextMenu,
  MenuItem,
} from "@mittwald/flow-react-components";
import { sleepLong } from "@/content/04-components/actions/action/examples/lib";

<ContextMenuTrigger>
  <Button>Trigger</Button>
  <ContextMenu>
    <Action onAction={sleepLong}>
      <MenuItem>Herunterladen</MenuItem>
    </Action>
  </ContextMenu>
</ContextMenuTrigger>
```