Overview

Messages should be used within other elements to convey helpful information in an unobtrusive way.

Examples

Use <Message> component with a variant to apply color and message prop for displaying text. Pass modus icon name to the prop icon to display within a message to further convey meaning.

API

Message

import Message from `@trimbleinc/modus-react-bootstrap/Message`
NameTypeDefaultDescription
icon
element

Icon must be either a valid JSX element or a modus icon, ex: 'info_outlined'. Icon: ReactElement | string

label
string

message text

message
string
show
boolean
true
controlled by: onClose, initial prop: defaultShow

Controls the visual state.

variant
'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light'

The visual variant