104 lines
1.5 KiB
Markdown
104 lines
1.5 KiB
Markdown
<script setup>
|
|
import Alert from "~/components/ui/Alert.vue"
|
|
import Button from "~/components/ui/Button.vue"
|
|
</script>
|
|
|
|
# Alert
|
|
|
|
| Prop | Data type | Required? | Default | Description |
|
|
| ------- | -------------------------------------------------- | --------- | ----------- | -------------------------------- |
|
|
| `color` | `blue` \| `red` \| `purple` \| `green` \| `yellow` | No | `secondary` | The color of the alert container |
|
|
|
|
## Alert colors
|
|
|
|
Funkwhale alerts support a range of pastel colors for visual appeal.
|
|
|
|
::: details Colors
|
|
|
|
- Red
|
|
- Blue
|
|
- Purple
|
|
- Green
|
|
- Yellow
|
|
|
|
:::
|
|
|
|
### Blue
|
|
|
|
```vue-html
|
|
<Alert color="blue">
|
|
Blue alert
|
|
</Alert>
|
|
```
|
|
|
|
<Alert color="blue">
|
|
Blue alert
|
|
</Alert>
|
|
|
|
### Red
|
|
|
|
```vue-html
|
|
<Alert color="red">
|
|
Red alert
|
|
</Alert>
|
|
```
|
|
|
|
<Alert color="red">
|
|
Red alert
|
|
</Alert>
|
|
|
|
### Purple
|
|
|
|
```vue-html
|
|
<Alert color="purple">
|
|
Purple alert
|
|
</Alert>
|
|
```
|
|
|
|
<Alert color="purple">
|
|
Purple alert
|
|
</Alert>
|
|
|
|
### Green
|
|
|
|
```vue-html
|
|
<Alert color="green">
|
|
Green alert
|
|
</Alert>
|
|
```
|
|
|
|
<Alert color="green">
|
|
Green alert
|
|
</Alert>
|
|
|
|
### Yellow
|
|
|
|
```vue-html
|
|
<Alert color="yellow">
|
|
Yellow alert
|
|
</Alert>
|
|
```
|
|
|
|
<Alert color="yellow">
|
|
Yellow alert
|
|
</Alert>
|
|
|
|
## Alert actions
|
|
|
|
```vue-html{2-4}
|
|
<Alert>
|
|
Awesome artist
|
|
|
|
<template #actions>
|
|
<Button>Got it</Button>
|
|
</template>
|
|
</Alert>
|
|
```
|
|
|
|
<Alert>
|
|
Awesome artist
|
|
<template #actions>
|
|
<Button>Got it</Button>
|
|
</template>
|
|
</Alert>
|