Search…
Toast
The ToastHub component is used to display text message toasts.

Usage

import { ToastHub, Toast, Button } from '@aragon/ui'
const App = () => (
<ToastHub>
<Toast>
{toast => (
<Button onClick={() => toast("hello world")</Button>}>Click me</Button>
)}
</Toast>
</ToastHub>
)

Demonstration

Props

timeout

TYPE
DEFAULT VALUE
Number
4000
Set this property to change how long toasts will stick around.

showIndicator

TYPE
DEFAULT VALUE
Boolean
false
Set this property to true to add a small timout-indicator to toast messages.

threshold

TYPE
DEFAULT VALUE
Number
Infinity
Set this property to change the threshold of toasts being presented at the same time. This will be used as an aproximation or a guideline, but it will still allow bursts to at least show.

position

TYPE
DEFAULT VALUE
"left", "center" or "right"
"end"
Set this property to change the position where toasts will appear.

top

TYPE
DEFAULT VALUE
Boolean
false
Set this property to true to make toasts appear from the top.

shift

TYPE
DEFAULT VALUE
Number
0
Use this property to shift the position of the toast from its “end position” (right on left to right languages).

Compound components

Toast

The Toast component calls its render-child and passes a single function that allows you to create pop-up messages.
Copy link
Outline
Usage
Demonstration
Props
Compound components