Toast

The Toast component is a container for stacking elements in the corner or edge of the page.

You've received a new message.

You've received another message.

Code Example

<Toast>
  <Alert>Something great just happened</Alert>
</Toast>

Components

Toast is a standalone component.

Toast

Toast can be customized with the following props:

Prop	Type	Description
`h-align`	string	Sets the horizonal alignment to one of the below props
`start`	boolean	Sets the horizontal alignment to `start`.
`center`	boolean	Sets the horizontal alignment to `center`.
`end`	boolean	Sets the horizontal alignment to `end`.
`v-align`	string	Sets the vertical alignment to one of the below props
`top`	boolean	Sets the vertical alignment to `top`.
`middle`	boolean	Sets the vertical alignment to `middle`.
`bottom`	boolean	Sets the vertical alignment to `bottom`.

Horizontal Position

There are two ways to set the horizontal position of the Toast:

The start, center, and end boolean props.
The h-align prop, which accepts a string with any of the three prop names, above.

Vertical Position

Similar to the horizontal positioning, there are two ways to set the vertical position of the Toast:

The top, middle, and bottom boolean props.
The v-align prop, which accepts a string with any of the three prop names, above.

Top Start

You've received a new message.

You've received another message.

Code Example

<Toast top start>
  <Alert>Something great just happened</Alert>
</Toast>

Top Center

You've received a new message.

You've received another message.

Code Example

<Toast top center>
  <Alert>Something great just happened</Alert>
</Toast>

Top End

You've received a new message.

You've received another message.

Code Example

<Toast top end>
  <Alert>Something great just happened</Alert>
</Toast>

Start Middle

You've received a new message.

You've received another message.

Code Example

<Toast start middle>
  <Alert>Something great just happened</Alert>
</Toast>

Center Middle

You've received a new message.

You've received another message.

Code Example

<Toast center middle>
  <Alert>Something great just happened</Alert>
</Toast>

End Middle

You've received a new message.

You've received another message.

Code Example

<Toast end middle>
  <Alert>Something great just happened</Alert>
</Toast>

Start Bottom

You've received a new message.

You've received another message.

Code Example

<Toast start bottom>
  <Alert>Something great just happened</Alert>
</Toast>

Center Bottom

You've received a new message.

You've received another message.

Code Example

<Toast center bottom>
  <Alert>Something great just happened</Alert>
</Toast>

End Bottom

Since end and bottom are the defaults, you can just leave the props off.

You've received a new message.

You've received another message.

Code Example

<Toast>
  <Alert>Something great just happened</Alert>
</Toast>

Prev Stack

Next Breadcrumbs