```ts
import Modal from "~/components/ui/Modal.vue";
```
# Modal
| Prop | Data type | Required? | Default | Description |
| --------- | ----------------- | --------- | ------- | ---------------------------------- |
| `title` | `string` | Yes | | The modal title |
| `v-model` | `true` \| `false` | No | | Whether the modal is isOpen or not |
```vue-html
Modal content
```
Modal content
## Modal actions
Use the `#actions` slot to add actions to a modal. Actions typically take the form of [buttons](./button).
Make sure to add `autofocus` to the preferred button.
```vue-html
Modal content
```
Modal content
## Alert inside modal
You can nest [Funkwhale alerts](./alert) to visually highlight content within the modal.
```vue-html
Modal content
Alert content
```
Modal content
Alert content
# Destructive Modal
The `destructive` prop is used to visually indicate a potentially dangerous or irreversible action. When set to `true`, the modal will have a distinctive red styling to draw the user's attention and highlight the critical nature of the action.
| Prop | Data type | Required? | Default | Description |
| ------------- | --------- | --------- | ------- | ---------------------------------------------------- |
| `destructive` | `true` | No | `false` | Applies a red styling to emphasize dangerous actions |
```vue-html
Dangerous action consequences
```
Dangerous action consequences
### Styling Effects
When the `destructive` prop is set to `true`, the modal will:
- Add a red border
- Style the title in red
To visually distinguish the modal from standard modals
### Best Practices
- Use the `destructive` prop sparingly
- Clearly explain the consequences of the action unsing ``
- Provide a clear way to cancel the action
- Use descriptive action button labels
The example in the "Confirm a dangerous action" section demonstrates the recommended usage of the destructive modal.
```vue-html
Detailed consequences of the action
```
Detailed consequences of the action
## Confirm a dangerous action
Note that confirmation dialogs interrupt the user's workflow. Consider adding a recovery functionality such as "undo" instead.
::: tip Read more about designing user experiences around dangerous actions:
- [How to use visual signals and spacing to differentiate between benign and dangerous options](https://www.nngroup.com/articles/proximity-consequential-options/)
> If you need to implement dangerous actions, make sure to place them apart from other actions to prevent accidental clicks. Add contextual hints and information so that the user understands the consequences of the action.
- [How to design a confirmation dialog](https://www.nngroup.com/articles/confirmation-dialog/)
> 1. Let the user confirm potentially destructive actions
> 2. Do not use confirmation dialogs for routine tasks
> 3. Be specific about the action and its potential consequences
> 4. Label the response buttons with their result: "Delete my account" instead of "Yes"
> 5. Make sure to give the user all information they need to decide
:::
```vue-html
1 082 music files that you uploaded will be deleted.
7 879 items in your collections will be unlinked.
Do you want to delete your account forever?
You will not be able to restore your account.
```
1 082 music files that you uploaded will be deleted.
7 879 items in your collections will be unlinked.
Do you want to delete your account forever?
You will not be able to restore your account.
## Nested modals
You can nest modals to allow users to isOpen a modal from inside another modal. This can be useful when creating a multi-step workflow.
```vue-html
Nested modal content
```