Toast

Provides a brief notification.

Basic usage

Your receipt has been uploaded

<Toast title="Your receipt has been uploaded" onClose={() => closeToast()} />

Variant

The Toast comes with two visual styles: success (default) and alert.

Your receipt has been uploadedYour receipt has been uploaded

<>
  <Toast
    title="Your receipt has been uploaded"
    variant="success"
    onClose={() => closeToast()}
  />
  <Toast
    title="Your receipt has been uploaded"
    variant="alert"
    onClose={() => closeToast()}
  />
</>

Content

Use the children prop to add any content to the Toast.

Your receipt has been uploaded

Description (optional)

<Toast title="Your receipt has been uploaded" onClose={() => closeToast()}>
  Description (optional)
</Toast>

Action

Use the action prop to add a button (action) to your Toast. Only one action is supported.

Your receipt has been uploaded

<Toast
  title="Your receipt has been uploaded"
  onClose={() => closeToast()}
  action={{
    text: "Action",
    onClick: () => {},
  }}
/>

Sticky

Setting the canExpire prop to false will make the Toast component stay on the page. No timer will be shown to be user.

Your receipt has been uploaded

<Toast
  title="Your receipt has been uploaded"
  onClose={() => closeToast()}
  canExpire={false}
/>