Snackbar
Sources
PUIK
The position of the following examples has been set to
static for preview purposes, however the standard behavior is fixed.Basic Use
For any snackbar component that you use, use the following structure:
1<div
2 class="puik-snackbar puik-snackbar--default"
3 role="status"
4 aria-live="polite"
5 style="bottom: 32px;"
6>
7 <span class="puik-snackbar__text">New category added.</span>
8 <button
9 class="puik-snackbar__close-button"
10 aria-label="Close snackbar"
11 >
12 close
13 </button>
14</div>The
aria-live="polite" attribute is important. It allows you to specify the behavior screen readers should follow when this alert content changes. In the example shown above, the alert content vocalization will happen after the end of any vocalization currently in progress.Variants
The following button variants are available:
defaultdanger
To use any of these variants, add the puik-snackbar--${variant} class to the root element:
1<div
2 class="puik-snackbar puik-snackbar--${variant}"
3 role="status"
4 aria-live="polite"
5 style="bottom: 32px;"
6>
7 <span class="puik-snackbar__text">New category added.</span>
8 <button
9 class="puik-snackbar__close-button"
10 aria-label="Close snackbar"
11 >
12 close
13 </button>
14</div> 1<div
2 class="puik-snackbar puik-snackbar--default"
3 role="status"
4 aria-live="polite"
5 style="bottom: 32px;"
6>
7 <span class="puik-snackbar__text">New category added.</span>
8 <button
9 class="puik-snackbar__close-button"
10 aria-label="Close snackbar"
11 >
12 close
13 </button>
14</div>
15
16<div
17 class="puik-snackbar puik-snackbar--danger"
18 role="status"
19 aria-live="polite"
20 style="bottom: 32px;"
21>
22 <span class="puik-snackbar__text">New category added.</span>
23 <button
24 class="puik-snackbar__close-button"
25 aria-label="Close snackbar"
26 >
27 close
28 </button>
29</div>Position
The position of the snackbar can be changed by changing the style of the root element:
1<div
2 class="puik-snackbar puik-snackbar--${variant}"
3 role="status"
4 aria-live="polite"
5 style="bottom: ${position};"
6>
7 <span class="puik-snackbar__text">New category added.</span>
8 <button
9 class="puik-snackbar__close-button"
10 aria-label="Close snackbar"
11 >
12 close
13 </button>
14</div>Action button
An action button can be added, it must have the class puik-snackbar__action:
1<div
2 class="puik-snackbar puik-snackbar--default"
3 role="status"
4 aria-live="polite"
5 style="bottom: 32px;"
6>
7 <span class="puik-snackbar__text">New category added.</span>
8 <button class="puik-snackbar__action">Cancel</button>
9 <button
10 class="puik-snackbar__close-button"
11 aria-label="Close snackbar"
12 >
13 close
14 </button>
15</div>
16
17<div
18 class="puik-snackbar puik-snackbar--danger"
19 role="status"
20 aria-live="polite"
21 style="bottom: 32px;"
22>
23 <span class="puik-snackbar__text">New category added.</span>
24 <button class="puik-snackbar__action">Cancel</button>
25 <button
26 class="puik-snackbar__close-button"
27 aria-label="Close snackbar"
28 >
29 close
30 </button>
31</div>