Skip to main content

Toast

A toast notification is a brief, non-intrusive message that appears on the screen to provide users with information or alerts.

Example

Illustrates the animations that happen when the Toast component enters and exits from view. You can see an animated example of this component here.

A toast component is displayed in the bottom left of the page.

Enter transition

When the toast component enters into view, it always enters from the left hand side of the screen at 200ms on the x axis. We use $easing-out to show the toast decelerate into position.

A chart showing the toast component's enter transition with an X Translate animation. It slides in from the left over 200ms, using an easing-out effect.
PropertyCubic BezierEasing tokenNotes
X Translate(0, 0, .18, .99)$easing-outEnters into view from the left, gently decelerates to a stop.

Exit transition

When the toast component exits from view, it always exits towards the left hand side of the screen at 100ms on the X axis. We use $easing-in to show the toast accelerate from stationary to off the screen. Exit transitions are always quicker than entrance transitions because they are no longer needed.

A chart showing the toast component's exit transition with an X Translate animation. It exits to the left over 100ms, using an easing-in effect to gently accelerate out of view.
PropertyCubic BezierEasing tokenNotes
X Translate(0.8, 0, 1, 1)$easing-inExits from view to the left, gently accelerates from stationary.