Newer
Older
# Alert
| Prop | Data type | Required? | Default | Description |
| ------------- | -------------------------------------------------- | --------- | ----------- | ----------------------- |
| `color` | `blue` \| `red` \| `purple` \| `green` \| `yellow` | No | `secondary` | The color of the alert container |
Funkwhale alerts support a range of pastel colors for visual appeal.
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
::: 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>