2019-07-30 02:56:17 +03:00
---
title: Toasts
path: components/toasts
status: Experimental
status_issue: 'https://github.com/github/design-systems/issues/101'
source: ''
bundle: toasts
---
Toasts are used to show live, time-sensitive feedback to users.
## Default
To create a default toast, use `.Toast` . Always use the `info` icon for default messages.
2019-08-09 01:24:04 +03:00
```html live title="Default toast"
2019-07-30 02:56:17 +03:00
< div class = "p-1" >
< div class = "Toast" >
< span class = "Toast-icon" >
<!-- <%= 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 >
< / span >
< span class = "Toast-content" > Toast message goes here< / span >
< / div >
< / div >
```
The Toast content is formattable. We recommend keeping your message under 140 characters.
2019-08-09 01:24:04 +03:00
```html live title="Toast with long text"
2019-07-30 02:56:17 +03:00
< div class = "p-1" >
< div class = "Toast" >
< span class = "Toast-icon" >
<!-- <%= 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 >
< / span >
< span class = "Toast-content" > 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 >
< / div >
< / div >
```
## Variations
Use the success, warning, and error modifiers to communicate different states.
Always use the `check` octicon for success states.
2019-08-09 01:24:04 +03:00
```html live title="Success toast"
2019-07-30 02:56:17 +03:00
< div class = "p-1" >
< div class = "Toast Toast--success" >
< span class = "Toast-icon" >
<!-- <%= octicon "check" %> -->
< svg class = "octicon octicon-check" 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 >
< / span >
< span class = "Toast-content" > Success message goes here.< / span >
< / div >
< / div >
```
Always use the `alert` octicon for warning states.
2019-08-09 01:24:04 +03:00
```html live title="Warning toast"
2019-07-30 02:56:17 +03:00
< div class = "p-1" >
< div class = "Toast Toast--warning" >
< span class = "Toast-icon" >
<!-- <%= octicon "alert" %> -->
< svg class = "octicon octicon-alert" style = "fill:currentColor" viewBox = "0 0 16 16" version = "1.1" width = "16" height = "16" aria-hidden = "true" > < path 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" > < / path > < / svg >
< / span >
< span class = "Toast-content" > Warning message goes here.< / span >
< / div >
< / div >
```
Always use the `stop` octicon for error states.
2019-08-09 01:24:04 +03:00
```html live title="Error toast"
2019-07-30 02:56:17 +03:00
< div class = "p-1" >
< div class = "Toast Toast--error" >
< span class = "Toast-icon" >
<!-- <%= octicon "stop" %> -->
< svg class = "octicon octicon-stop" style = "fill:currentColor" viewBox = "0 0 14 16" version = "1.1" width = "14" height = "16" aria-hidden = "true" > < path 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" > < / path > < / svg >
< / span >
< span class = "Toast-content" > Error message goes here< / span >
< / div >
< / div >
```
## Toast with dismiss
Use `.Toast-dismissButton` to allow a user to explicitly dismiss a Toast.
2019-08-09 01:24:04 +03:00
```html live title="Toast with dismiss"
2019-07-30 02:56:17 +03:00
< div class = "p-1" >
< div class = "Toast" >
< span class = "Toast-icon" >
<!-- <%= 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 >
< / span >
< span class = "Toast-content" > This toast is dismissable.< / span >
< button class = "Toast-dismissButton" >
< svg class = "octicon octicon-x" style = "fill:currentcolor" viewBox = "0 0 12 16" version = "1.1" width = "12" height = "16" role = "img" > < path 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" > < / path > < / svg >
< / button >
< / div >
< / div >
```
## Toast with link
Include a link to allow users to take actions within a Toast.
2019-08-09 01:24:04 +03:00
```html live title="Toast with link"
2019-07-30 02:56:17 +03:00
< div class = "p-1" >
< div class = "Toast" >
< span class = "Toast-icon" >
<!-- <%= 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 >
< / span >
< span class = "Toast-content" > Toast message goes here < / strong > < a href = "#" > Action.< / a > < / span >
< / div >
< / div >
```
## Toast animation
The `Toast--animateIn` and `Toast--animateOut` modifier classes can be used to animate the toast in and out from the bottom.
2019-08-09 01:24:04 +03:00
```html live title="Toast animating"
2019-07-30 02:56:17 +03:00
< div class = "p-1" >
< div class = "Toast Toast--animateIn" >
< span class = "Toast-icon" >
<!-- <%= 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 >
< / span >
< span class = "Toast-content" > Toast message goes here.< / span >
< / div >
< / div >
```
## Toast position
Use the `position-fixed bottom-0` utility classes on a wrapper element to position Toasts at the **bottom left** of the viewport.
2019-08-09 01:24:04 +03:00
```html live title="Toast animating"
2019-07-30 02:56:17 +03:00
< div class = "border bg-gray-light" style = "height:150px" >
< div class = "position-fixed bottom-0" >
< div class = "Toast" >
< span class = "Toast-icon" >
<!-- <%= 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 >
< / span >
< span class = "Toast-content" > Toast message goes here.< / span >
< / div >
< / div >
< / div >
```
