Alerts | Trimble Modus React Bootstrap Developer Guide

Overview

Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight variants.

For links, use the <Alert.Link> component to provide matching colored links within any alert.

Use the custom react component AlertDismissible.

import Alert from `@trimbleinc/modus-react-bootstrap/Alert`

Name	Type	Default	Description
closeLabel	string	`'Close alert'`	Sets the text for alert close button.
dismissible	boolean		Renders a properly aligned dismiss button, as well as adding extra horizontal padding to the Alert.
onClose	function		controls `show` Callback fired when alert is closed.
show	boolean	`true`	controlled by: `onClose`, initial prop: `defaultShow` Controls the visual state of the Alert.
transition	boolean \| elementType	`Fade`	Animate the alert dismissal. Defaults to using `<Fade>` animation or use `false` to disable. A custom `react-transition-group` Transition can also be provided.
variant	'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light'		The Alert visual variant
bsPrefix	string	`'alert'`

import Alert.Heading from `@trimbleinc/modus-react-bootstrap/Alert.Heading`

Name	Type	Default	Description
as	elementType	`<DivStyledAsH4>`
bsPrefix required	string	`'alert-heading'`

import Alert.Link from `@trimbleinc/modus-react-bootstrap/Alert.Link`

Name	Type	Default	Description
as	elementType	`<SafeAnchor>`
bsPrefix required	string	`'alert-link'`

import AlertDismissible from `@trimbleinc/modus-react-bootstrap/AlertDismissible`

Name	Type	Default	Description
closeLabel	string		Sets the text for alert close button.
onClose	function		controls `show` Callback fired when alert is closed.
show	boolean		controlled by: `onClose`, initial prop: `defaultShow` Controls the visual state of the Alert.
transition	boolean \| elementType		Animate the alert dismissal. Defaults to using `<Fade>` animation or use `false` to disable. A custom `react-transition-group` Transition can also be provided.
variant	'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light'		The Alert visual variant
bsPrefix	string	`'alert'`