---
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.
```html live
Toast message goes here
```
The Toast content is formattable. We recommend keeping your message under 140 characters.
```html live
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et ma
```
## Variations
Use the success, warning, and error modifiers to communicate different states.
Always use the `check` octicon for success states.
```html live
Success message goes here.
```
Always use the `alert` octicon for warning states.
```html live
Warning message goes here.
```
Always use the `stop` octicon for error states.
```html live
Error message goes here
```
## Toast with dismiss
Use `.Toast-dismissButton` to allow a user to explicitly dismiss a Toast.
```html live
This toast is dismissable.
```
## Toast with link
Include a link to allow users to take actions within a Toast.
```html live
```
## Toast animation in
The `Toast--animateIn` and `Toast--animateOut` modifier classes can be used to animate the toast in and out from the bottom.
```html live
Toast message goes here.
```
## Toast with loading animation
Add the `Toast--spinner` modifier class on the `Toast-icon` `svg` to communicate a loading state.
```html live
Toast message goes here.
```
## Toast position
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