Appearance
Skip to content
ts
import Alert from '~/ui/Alert.vue'1
Alert
Display informative messages that may change and update over time
ts
const {
role = 'status',
...props
} = defineProps<WithAttributes<{
class: {
color?: Extract<Color, `${string}-solid`>
}
role?: 'log' | 'status' | 'alert' | 'progressbar' | 'marquee' | 'timer'
scrollIntoView?: boolean
}> & Labeled>()1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
Choose a role
By default, screenreaders will read out all alerts on a page. This is annoying and intrusive. Do use a more polite role such as status to skip the initial announcement, and use the (default) alert role only on extremely important announcements.
Careful with the alert role!
The
alertrole is intended for messages that are dynamically displayed, not for content that appears on page load. For example, it can show an error message if user-added content has an invalid format or the backend throws an error - the alert would immediately read out the message. It should not be used on HTML that the user hasn't interacted with. For example, if a page loads with multiple visible alerts scattered throughout, choose a role other thanalert, as the messages were not dynamically triggered.
Align content
Use alignment classes documented in fw.css
Add actions
Awesome radio
Descriptiontemplate
<Alert>
<h2 :class="fw.font.radio">
Awesome radio
</h2>
Description
<template #actions>
<Button disabled>
Deny
</Button>
<Button class="color-primary-solid">
Got it
</Button>
</template>
</Alert>1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
Apply color
Never rely on color alone to convey relevant information
Many people will not perceive certain colors, so give them other affordances to understand the meaning of a given alert.
Read more: Colors
Blue alert
Red alert
Purple burglar alert
Green alert
Ochre alert
Yellow alert
Deep Blue alert
Deep Red alert
Deep Purple burglar alert
Deep Green alert
Deep Ochre alert
Deep Yellow alert
Default color
Destructive alert
Accent alert
template
<Alert class="color-blue-solid" ui-inline-size="128">
Blue alert
</Alert>
<Alert class="color-red-solid" ui-inline-size="128">
Red alert
</Alert>
<Alert class="color-purple-solid" ui-inline-size="128">
Purple burglar alert
</Alert>
<Alert class="color-green-solid" ui-inline-size="128">
Green alert
</Alert>
<Alert class="color-ochre-solid" ui-inline-size="128">
Ochre alert
</Alert>
<Alert class="color-yellow-solid" ui-inline-size="128">
Yellow alert
</Alert>
<Alert class="color-blue-deep-solid" ui-inline-size="128">
Deep Blue alert
</Alert>
<Alert class="color-red-deep-solid" ui-inline-size="128">
Deep Red alert
</Alert>
<Alert class="color-purple-deep-solid" ui-inline-size="128">
Deep Purple burglar alert
</Alert>
<Alert class="color-green-deep-solid" ui-inline-size="128">
Deep Green alert
</Alert>
<Alert class="color-ochre-deep-solid" ui-inline-size="128">
Deep Ochre alert
</Alert>
<Alert class="color-yellow-deep-solid" ui-inline-size="128">
Deep Yellow alert
</Alert>
<Alert class="color-default-solid" ui-inline-size="128">
Default color
</Alert>
<Alert class="color-destructive-solid" ui-inline-size="128">
Destructive alert
</Alert>
<Alert class="color-accent-solid" ui-inline-size="128">
Accent alert
</Alert>1
2
3
4
5
6
7
8
9
10
11
12
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
2
3
4
5
6
7
8
9
10
11
12
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
Using this component
A11y Checklist
Accessible alert
template
<Alert
v-if="isAlertStatus"
role="status"
class="color-blue-solid"
>
Your settings have been saved successfully.
</Alert>
<Alert
v-if="isAlertUrgent"
role="alert"
class="color-destructive-solid"
>
Connection lost. Please check your internet connection and try again.
<template #actions>
<Button
aria-label="Close 'connection lost' alert"
@click="toggleUrgent"
>
Dismiss
</Button>
</template>
</Alert>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23