99 lines
1.4 KiB
Markdown
99 lines
1.4 KiB
Markdown
# 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
|
|
<fw-alert color="blue">
|
|
Blue alert
|
|
</fw-alert>
|
|
```
|
|
|
|
<fw-alert color="blue">
|
|
Blue alert
|
|
</fw-alert>
|
|
|
|
### Red
|
|
|
|
```vue-html
|
|
<fw-alert color="red">
|
|
Red alert
|
|
</fw-alert>
|
|
```
|
|
|
|
<fw-alert color="red">
|
|
Red alert
|
|
</fw-alert>
|
|
|
|
### Purple
|
|
|
|
```vue-html
|
|
<fw-alert color="purple">
|
|
Purple alert
|
|
</fw-alert>
|
|
```
|
|
|
|
<fw-alert color="purple">
|
|
Purple alert
|
|
</fw-alert>
|
|
|
|
### Green
|
|
|
|
```vue-html
|
|
<fw-alert color="green">
|
|
Green alert
|
|
</fw-alert>
|
|
```
|
|
|
|
<fw-alert color="green">
|
|
Green alert
|
|
</fw-alert>
|
|
|
|
### Yellow
|
|
|
|
```vue-html
|
|
<fw-alert color="yellow">
|
|
Yellow alert
|
|
</fw-alert>
|
|
```
|
|
|
|
<fw-alert color="yellow">
|
|
Yellow alert
|
|
</fw-alert>
|
|
|
|
## Alert actions
|
|
|
|
```vue-html{2-4}
|
|
<fw-alert>
|
|
Awesome artist
|
|
|
|
<template #actions>
|
|
<fw-button>Got it</fw-button>
|
|
</template>
|
|
</fw-alert>
|
|
```
|
|
|
|
<fw-alert>
|
|
Awesome artist
|
|
<template #actions>
|
|
<fw-button>Got it</fw-button>
|
|
</template>
|
|
</fw-alert>
|