feat(ui): destructive modals

This commit is contained in:
ArneBo 2025-01-20 13:55:00 +01:00
parent 9f69cfd9b5
commit d4dfac84a2
1 changed files with 4 additions and 3 deletions

View File

@ -26,7 +26,7 @@ const isOpen8 = ref(false)
</script>
```ts
import Modal from "~/components/ui/Modal.vue"
import Modal from "~/components/ui/Modal.vue";
```
# Modal
@ -166,8 +166,8 @@ You can nest [Funkwhale alerts](./alert) to visually highlight content within th
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 |
|---------------|-----------|-----------|---------|--------------------------------------------------|
| Prop | Data type | Required? | Default | Description |
| ------------- | --------- | --------- | ------- | ---------------------------------------------------- |
| `destructive` | `true` | No | `false` | Applies a red styling to emphasize dangerous actions |
<Layout flex>
@ -203,6 +203,7 @@ The `destructive` prop is used to visually indicate a potentially dangerous or i
### Styling Effects
When the `destructive` prop is set to `true`, the modal will:
- Add a red border
- Style the title in red