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.