Toast

A toast inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen. They shouldn't interrupt the user experience, and they don't require user input to disappear.

Example

To start using toasts you need to render a toast container at the root of your app:

<ToastContainer />

<ToastContainer />

<ToastContainer />

Then, you can queue a toast from anywhere:

<Button
  onPress={() => ToastQueue.positive('Toast is added!')}
  color="primary">
  Show toast
</Button>

<Button
  onPress={() => ToastQueue.positive('Toast is added!')}
  color="primary">
  Show toast
</Button>

<Button
  onPress={() =>
    ToastQueue
      .positive(
        'Toast is added!'
      )}
  color="primary"
>
  Show toast
</Button>

Content

You can trigger a toast using any of the methods from ToastQueue. A <ToastContainer> element must be rendered at the root of your app in order for it to display the queued toasts.

Toasts are shown according to a priority queue, depending on their variant. Actionable toasts are prioritized over non-actionable toasts, and errors are prioritized over other types of notifications. Only one toast will be displayed at a time.

<ButtonGroup>
  <Button
    onPress={() => ToastQueue.neutral('Toast available')}    color="primary">
    Neutral Toast
  </Button>
  <Button
    onPress={() => ToastQueue.positive('Toast is done!')}    color="secondary">
    Positive Toast
  </Button>
  <Button
    onPress={() => ToastQueue.negative('Toast is burned!')}    color="danger">
    Negative Toast
  </Button>
  <Button
    onPress={() => ToastQueue.info('Toasting…')}    color="primary"
    variant="outlined">
    Info Toast
  </Button>
</ButtonGroup>

<ButtonGroup>
  <Button
    onPress={() => ToastQueue.neutral('Toast available')}    color="primary">
    Neutral Toast
  </Button>
  <Button
    onPress={() => ToastQueue.positive('Toast is done!')}    color="secondary">
    Positive Toast
  </Button>
  <Button
    onPress={() => ToastQueue.negative('Toast is burned!')}    color="danger">
    Negative Toast
  </Button>
  <Button
    onPress={() => ToastQueue.info('Toasting…')}    color="primary"
    variant="outlined">
    Info Toast
  </Button>
</ButtonGroup>

<ButtonGroup>
  <Button
    onPress={() =>
      ToastQueue
        .neutral(
          'Toast available'
        )}    color="primary"
  >
    Neutral Toast
  </Button>
  <Button
    onPress={() =>
      ToastQueue
        .positive(
          'Toast is done!'
        )}    color="secondary"
  >
    Positive Toast
  </Button>
  <Button
    onPress={() =>
      ToastQueue
        .negative(
          'Toast is burned!'
        )}    color="danger"
  >
    Negative Toast
  </Button>
  <Button
    onPress={() =>
      ToastQueue.info(
        'Toasting…'
      )}    color="primary"
    variant="outlined"
  >
    Info Toast
  </Button>
</ButtonGroup>

API