{{#> web/layout/default title="Toast" parentPageName="Components" }}

## Static Toast

Show hidden toast in the DOM:
I was hidden and you exposed me!

## Dynamic Toast Queue

Collapsible
Vertical alignment: Top Bottom
Horizontal alignment: Left Center Right
New Toast:
Color
Has icon Dismissible Enable AutoClose
AutoClose interval (ms)
Message This is a new toast message.
Can contain HTML.
Add link
Link This is a toast link.
Can contain HTML.
Virtual keyboard interaction:
In Chrome on Android, tap into this text field to see how Toast position updates:
I was first!
Action
I appeared later. This toast has a long message that wraps automatically.
Action

## Content Variations

Message only
Message with action
Action
When the text is long and reaches the maximum width limit, the action automatically wraps to the next line.
Action
Message with icon and action
Action
Dismissible message
Dismissible message with custom icon and action
Action

## Colors

Neutral
Action
Informative
Action
Success
Action
Warning
Action
Danger
Action
{{/web/layout/default}}