primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-09-21 05:39:15 +03:00
Code Issues Projects Releases Wiki Activity

Update toasts.md

Browse Source
This commit is contained in:
Cole Bemis 2019-08-14 15:06:50 -07:00
parent d4321c7247
commit 2715d29a1f
1 changed files with 62 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

169
docs/content/components/toasts.md
View File

@ -13,24 +13,16 @@ Toasts are used to show live, time-sensitive feedback to users.
To create a default toast, use `.Toast`. Always use the `info` icon for default messages. To create a default toast, use `.Toast`. Always use the `info` icon for default messages.
```html live title="Default toast" ```html live
<div class="p-1"> <div class="p-1">
<div class="Toast"> <div class="Toast">
<span class="Toast-icon"> <span class="Toast-icon">
<!-- <%= octicon "info" %> --> <!-- <%= octicon "info" %>-->
<svg <svg width="14" height="16" viewBox="0 0 14 16" class="octicon octicon-info" aria-hidden="true">
class="octicon octicon-info"
style="fill:currentColor"
viewBox="0 0 14 16"
version="1.1"
width="14"
height="16"
aria-hidden="true"
>
<path <path
fill-rule="evenodd" fill-rule="evenodd"
d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"
></path> />
</svg> </svg>
</span> </span>
<span class="Toast-content">Toast message goes here</span> <span class="Toast-content">Toast message goes here</span>
@ -40,30 +32,22 @@ To create a default toast, use `.Toast`. Always use the `info` icon for default
The Toast content is formattable. We recommend keeping your message under 140 characters. The Toast content is formattable. We recommend keeping your message under 140 characters.
```html live title="Toast with long text" ```html live
<div class="p-1"> <div class="p-1">
<div class="Toast"> <div class="Toast">
<span class="Toast-icon"> <span class="Toast-icon">
<!-- <%= octicon "info" %> --> <!-- <%= octicon "info" %> -->
<svg <svg width="14" height="16" viewBox="0 0 14 16" class="octicon octicon-info" aria-hidden="true">
class="octicon octicon-info"
style="fill:currentColor"
viewBox="0 0 14 16"
version="1.1"
width="14"
height="16"
aria-hidden="true"
>
<path <path
fill-rule="evenodd" fill-rule="evenodd"
d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"
></path> />
</svg> </svg>
</span> </span>
<span class="Toast-content" <span class="Toast-content">
>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<strong>Aenean commodo ligula eget dolor.</strong> Aenean massa. Cum sociis <em>natoque</em> penatibus et ma</span <strong>Aenean commodo ligula eget dolor.</strong> Aenean massa. Cum sociis <em>natoque</em> penatibus et ma
> </span>
</div> </div>
</div> </div>
``` ```
@ -74,21 +58,13 @@ Use the success, warning, and error modifiers to communicate different states.
Always use the `check` octicon for success states. Always use the `check` octicon for success states.
```html live title="Success toast" ```html live
<div class="p-1"> <div class="p-1">
<div class="Toast Toast--success"> <div class="Toast Toast--success">
<span class="Toast-icon"> <span class="Toast-icon">
<!-- <%= octicon "check" %> --> <!-- <%= octicon "check" %> -->
<svg <svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-check" aria-hidden="true">
class="octicon octicon-check" <path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z" />
style="fill:currentColor"
viewBox="0 0 12 16"
version="1.1"
width="12"
height="16"
aria-hidden="true"
>
<path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z"></path>
</svg> </svg>
</span> </span>
<span class="Toast-content">Success message goes here.</span> <span class="Toast-content">Success message goes here.</span>
@ -98,24 +74,16 @@ Always use the `check` octicon for success states.
Always use the `alert` octicon for warning states. Always use the `alert` octicon for warning states.
```html live title="Warning toast" ```html live
<div class="p-1"> <div class="p-1">
<div class="Toast Toast--warning"> <div class="Toast Toast--warning">
<span class="Toast-icon"> <span class="Toast-icon">
<!-- <%= octicon "alert" %> --> <!-- <%= octicon "alert" %> -->
<svg <svg width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-alert" aria-hidden="true">
class="octicon octicon-alert"
style="fill:currentColor"
viewBox="0 0 16 16"
version="1.1"
width="16"
height="16"
aria-hidden="true"
>
<path <path
fill-rule="evenodd" fill-rule="evenodd"
d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"
></path> />
</svg> </svg>
</span> </span>
<span class="Toast-content">Warning message goes here.</span> <span class="Toast-content">Warning message goes here.</span>
@ -125,24 +93,16 @@ Always use the `alert` octicon for warning states.
Always use the `stop` octicon for error states. Always use the `stop` octicon for error states.
```html live title="Error toast" ```html live
<div class="p-1"> <div class="p-1">
<div class="Toast Toast--error"> <div class="Toast Toast--error">
<span class="Toast-icon"> <span class="Toast-icon">
<!-- <%= octicon "stop" %> --> <!-- <%= octicon "stop" %> -->
<svg <svg width="14" height="16" viewBox="0 0 14 16" class="octicon octicon-stop" aria-hidden="true">
class="octicon octicon-stop"
style="fill:currentColor"
viewBox="0 0 14 16"
version="1.1"
width="14"
height="16"
aria-hidden="true"
>
<path <path
fill-rule="evenodd" fill-rule="evenodd"
d="M10 1H4L0 5v6l4 4h6l4-4V5l-4-4zm3 9.5L9.5 14h-5L1 10.5v-5L4.5 2h5L13 5.5v5zM6 4h2v5H6V4zm0 6h2v2H6v-2z" d="M10 1H4L0 5v6l4 4h6l4-4V5l-4-4zm3 9.5L9.5 14h-5L1 10.5v-5L4.5 2h5L13 5.5v5zM6 4h2v5H6V4zm0 6h2v2H6v-2z"
></path> />
</svg> </svg>
</span> </span>
<span class="Toast-content">Error message goes here</span> <span class="Toast-content">Error message goes here</span>
@ -154,41 +114,26 @@ Always use the `stop` octicon for error states.
Use `.Toast-dismissButton` to allow a user to explicitly dismiss a Toast. Use `.Toast-dismissButton` to allow a user to explicitly dismiss a Toast.
```html live title="Toast with dismiss" ```html live
<div class="p-1"> <div class="p-1">
<div class="Toast"> <div class="Toast">
<span class="Toast-icon"> <span class="Toast-icon">
<!-- <%= octicon "info" %> --> <!-- <%= octicon "info" %> -->
<svg <svg width="14" height="16" viewBox="0 0 14 16" class="octicon octicon-info" aria-hidden="true">
class="octicon octicon-info"
style="fill:currentColor"
viewBox="0 0 14 16"
version="1.1"
width="14"
height="16"
aria-hidden="true"
>
<path <path
fill-rule="evenodd" fill-rule="evenodd"
d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"
></path> />
</svg> </svg>
</span> </span>
<span class="Toast-content">This toast is dismissable.</span> <span class="Toast-content">This toast is dismissable.</span>
<button class="Toast-dismissButton"> <button class="Toast-dismissButton">
<svg <!-- <%= octicon "x" %> -->
class="octicon octicon-x" <svg width="12" height="16" viewBox="0 0 12 16" class="octicon octicon-x" aria-hidden="true">
style="fill:currentcolor"
viewBox="0 0 12 16"
version="1.1"
width="12"
height="16"
role="img"
>
<path <path
fill-rule="evenodd" fill-rule="evenodd"
d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"
></path> />
</svg> </svg>
</button> </button>
</div> </div>
@ -199,40 +144,58 @@ Use `.Toast-dismissButton` to allow a user to explicitly dismiss a Toast.
Include a link to allow users to take actions within a Toast. Include a link to allow users to take actions within a Toast.
```html live title="Toast with link" ```html live
<div class="p-1"> <div class="p-1">
<div class="Toast"> <div class="Toast">
<span class="Toast-icon"> <span class="Toast-icon">
<!-- <%= octicon "info" %> --> <!-- <%= octicon "info" %> -->
<svg class="octicon octicon-info" style="fill:currentColor" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg> <svg width="14" height="16" viewBox="0 0 14 16" class="octicon octicon-info" aria-hidden="true">
<path
fill-rule="evenodd"
d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"
/>
</svg>
</span> </span>
<span class="Toast-content">Toast message goes here </strong><a href="#">Action.</a></span> <span class="Toast-content">Toast message goes here </strong><a href="#">Action.</a></span>
</div> </div>
</div> </div>
``` ```
## Toast animation ## Toast animation in
The `Toast--animateIn` and `Toast--animateOut` modifier classes can be used to animate the toast in and out from the bottom. The `Toast--animateIn` and `Toast--animateOut` modifier classes can be used to animate the toast in and out from the bottom.
```html live title="Toast animating" ```html live
<div class="p-1"> <div class="p-1">
<div class="Toast Toast--animateIn"> <div class="Toast Toast--animateIn">
<span class="Toast-icon"> <span class="Toast-icon">
<!-- <%= octicon "info" %> --> <!-- <%= octicon "info" %> -->
<svg <svg width="14" height="16" viewBox="0 0 14 16" class="octicon octicon-info" aria-hidden="true">
class="octicon octicon-info"
style="fill:currentColor"
viewBox="0 0 14 16"
version="1.1"
width="14"
height="16"
aria-hidden="true"
>
<path <path
fill-rule="evenodd" fill-rule="evenodd"
d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"
></path> />
</svg>
</span>
<span class="Toast-content">Toast message goes here.</span>
</div>
</div>
```
## Toast with loading animation
Add the `Toast--spinner` modifier class on the `Toast-icon` `svg` to communicate a loading state.
```html live
<div class="p-1">
<div class="Toast Toast--loading">
<span class="Toast-icon">
<svg class="Toast--spinner" viewBox="0 0 32 32" width="18" height="18">
<path
fill="#959da5"
d="M16 0 A16 16 0 0 0 16 32 A16 16 0 0 0 16 0 M16 4 A12 12 0 0 1 16 28 A12 12 0 0 1 16 4"
/>
<path fill="#ffffff" d="M16 0 A16 16 0 0 1 32 16 L28 16 A12 12 0 0 0 16 4z"></path>
</svg> </svg>
</span> </span>
<span class="Toast-content">Toast message goes here.</span> <span class="Toast-content">Toast message goes here.</span>
@ -244,25 +207,17 @@ The `Toast--animateIn` and `Toast--animateOut` modifier classes can be used to a
Use the `position-fixed bottom-0 left-0` utility classes on a wrapper element to position Toasts at the **bottom left** of the viewport. Use the `position-fixed bottom-0 left-0` utility classes on a wrapper element to position Toasts at the **bottom left** of the viewport.
```html live title="Toast animating" ```html live
<div style="height:150px"> <div style="height:150px">
<div class="position-fixed bottom-0 left-0 mb-3 ml-3"> <div class="position-fixed bottom-0 left-0 mb-3 ml-3">
<div class="Toast"> <div class="Toast">
<span class="Toast-icon"> <span class="Toast-icon">
<!-- <%= octicon "info" %> --> <!-- <%= octicon "info" %> -->
<svg <svg width="14" height="16" viewBox="0 0 14 16" class="octicon octicon-info" aria-hidden="true">
class="octicon octicon-info"
style="fill:currentColor"
viewBox="0 0 14 16"
version="1.1"
width="14"
height="16"
aria-hidden="true"
>
<path <path
fill-rule="evenodd" fill-rule="evenodd"
d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"
></path> />
</svg> </svg>
</span> </span>
<span class="Toast-content">Toast message goes here.</span> <span class="Toast-content">Toast message goes here.</span>