Toast
The ToastHub component is used to display text message toasts.
import { ToastHub, Toast, Button } from '@aragon/ui'
const App = () => (
<ToastHub>
<Toast>
{toast => (
<Button onClick={() => toast("hello world")</Button>}>Click me</Button>
)}
</Toast>
</ToastHub>
)
TYPE | DEFAULT VALUE |
|---|---|
Number | 4000 |
Set this property to change how long toasts will stick around.
TYPE | DEFAULT VALUE |
|---|---|
Boolean | false |
Set this property to
true to add a small timout-indicator to toast messages.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.
TYPE | DEFAULT VALUE |
|---|---|
"left", "center" or "right" | "end" |
Set this property to change the position where toasts will appear.
TYPE | DEFAULT VALUE |
|---|---|
Boolean | false |
Set this property to
true to make toasts appear from the top.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).
The Toast component calls its render-child and passes a single function that allows you to create pop-up messages.
Last modified 6mo ago