# Core/Toast - Design

Renders a toast inline for documentation/preview. Not for use in production.

## Anatomy

### Status icon

<span>
  Indicates the type of message (info, success, warning, error)
</span>

### Body

<span>
  The message text informing the user what occurred
</span>

### Dismiss

<span>
  Close button to manually dismiss the toast
</span>

### Actions

<span>
  Optional action button relating to the notification (e.g. "Try again", "Undo")
</span>

## Properties

### Type

All toasts have a status of: information, attention, warning, success, and highlight. Choose the status depending on the type of message.

### Body

All toasts have body text, informing the user that something has occurred. The message should be as concise as possible, if a longer message is needed, consider an Alert Banner or Dialog.

### Actions

Toasts can have up to two action buttons, relating directly to the action taken that resulted in the notification. Examples include a link to a relevant list, or an action to try a failed submit.

## Behavior

### Timeout

Toasts automatically close 6 seconds after they have fully loaded. The timer is paused if focus is brought into the toast by the user.

### Placement

Toasts appear in the right corner of the application—either top-right (default) or bottom-right. Use the <code>position</code> option when calling the Toast API to choose placement.

### Width

Toasts have a flexible width that sizes to content, with a minimum of 360px and maximum of 480px.

### Overflow

Long messages wrap within the toast width (360-480px). Craft messages to take up no more than two lines.

## Best Practices

**Do**

<p>
  Do use toasts for notifications that don't need to interrupt the user's workflow.
</p>

**Don't**

<p>
  Don't use toasts for destructive, high-impact decisions that require the user's full attention.
</p>

## Accessibility

### Keyboard interaction

If a toast is non-actionable it is not in the page's tab sequence.

#### Actionable toasts

When a toast has interactive elements (dismiss button, action button), the tab order is:

1. Dismiss (close) button
2. Action button (if present)

### Live region

The entire contents of the toast must be announced as it appears on screen. Toasts use `role="status"` for info/success and `role="alert"` for warning/error, with `aria-live` set to `polite` or `assertive` accordingly.

### Reading order

In order to give all users adequate time to find and reach the action button, the toast element must be placed immediately after the user's current element.

### Time sensitive

Toasts must remain on screen long enough for users to read the message and access any action buttons. The default duration is 6 seconds; the timer pauses if focus is brought into the toast.