Overview

Toasts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight required contextual classes (e.g., .toast-success). For inline dismissal, use the prop show to set the visibility of the toast.

Toasts

API

Toast

import Toast from `@trimbleinc/modus-react-bootstrap/Toast`
NameTypeDefaultDescription
animation
boolean
true

Apply a CSS fade transition to the toast

autohide
boolean
false

Auto hide the toast. Note: it will only trigger the onClose function, the show property should be manually set.

delay
number
3000

Delay hiding the toast (ms)

onClose
function

A Callback fired when the in-built close button of ToastHeader is clicked.

show
boolean
true

When true The modal will show itself.

transition
elementType
<Fade>

A react-transition-group Transition component used to animate the Toast on dismissal.

bsPrefix
string
'toast'

ToastHeader

import ToastHeader from `@trimbleinc/modus-react-bootstrap/ToastHeader`
NameTypeDefaultDescription
closeButton
boolean
true

Specify whether the Component should contain a close button

closeLabel
string
'Close'

Provides an accessible label for the close button. It is used for Assistive Technology when the label text is not readable.

bsPrefix
string

ToastBody

import ToastBody from `@trimbleinc/modus-react-bootstrap/ToastBody`
NameTypeDefaultDescription
as
elementType
<div>
bsPrefix required
string
'toast-body'