Toast

Examples

View in Pajamas UI Kit →

Structure

1. Container: Wraps the content.
2. Message: Text content indicating the purpose and potential next steps.
3. Action (optional): A single text action a user can take based on the content of the toast.
4. Dismiss button: Removes the toast for a user.

Guidelines

When to use

• Provide a contextual message based on a user's action in the same view the action took place.

When not to use

• If you need to communicate an error to a user, consider using a danger or warning alert instead.
• If there's a page refresh, or a message needs to be communicated after a user visits a new page, consider using an alert instead.
• If the action is irreversible, consider using a modal instead.

Behavior

• A toast appears with an ease-in animation from the bottom of the viewport after a user's action.
• A user can dismiss the toast by clicking the “dismiss” icon button.
• If left alone, a toast without an action will disappear after five seconds.
• Hovering over a toast causes it to remain until the cursor is moved.
• A toast with an action is only dismissed when a user does one of the following:
  • Clicks the action.
  • Clicks the dismiss button.
  • Navigates to another page.

Content

• The message should be a concise full sentence that ends with a period.

Placement

• Centered at the bottom of the viewport for smaller breakpoints and bottom left of the viewport for larger breakpoints.
• Multiple toasts stack vertically from top to bottom with the oldest on top.

Accessibility