Toast

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.

LoadingRing

SyncIndicator

Last modified 2mo ago

Copy link

Outline

Usage

Demonstration

Props

Compound components

Usage

Demonstration

Props

`timeout`

`showIndicator`

`threshold`

`position`

`top`

`shift`

Compound components

`Toast`