--- 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 title="Default toast"
Toast message goes here
``` The Toast content is formattable. We recommend keeping your message under 140 characters. ```html live title="Toast with long text"
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 title="Success toast"
Success message goes here.
``` Always use the `alert` octicon for warning states. ```html live title="Warning toast"
Warning message goes here.
``` Always use the `stop` octicon for error states. ```html live title="Error toast"
Error message goes here
``` ## Toast with dismiss Use `.Toast-dismissButton` to allow a user to explicitly dismiss a Toast. ```html live title="Toast with dismiss"
This toast is dismissable.
``` ## Toast with link Include a link to allow users to take actions within a Toast. ```html live title="Toast with link"
Toast message goes here Action.
``` ## Toast animation 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"
Toast message goes here.
``` ## Toast position Use the `position-fixed bottom-0` utility classes on a wrapper element to position Toasts at the **bottom left** of the viewport. ```html live title="Toast animating"
Toast message goes here.
```