Message
Used to show important tips on a page.
Import
import { Message } from 'rsuite';Examples
Basic
Types
With header and actions
With icon
Bordered
Centered
Closable
Full
With toaster
A message type that contains an Alert
Accessibility
ARIA properties
Message has a role of alert.
Keyboard interactions
No keyboard interaction needed.
Props
<Message>
| Property | Type (Default) |
Description |
|---|---|---|
| bordered | boolean | Show a border around the message box. |
| centered | boolean | Center the message vertically. |
| children | ReactNode | The description information for the message. |
| classPrefix | string ('message') |
The prefix of the component CSS class. |
| closable | boolean | Whether it is possible to close the message box |
number (2000) |
⚠️[Deprecated]Use toaster.push(<Message />, { duration: 2000 }) instead. |
|
| full | boolean | Fill the container |
| header | ReactNode | The title of the message. |
| onClose | (event?: MouseEvent) => void | Called after the message is closed |
| showIcon | boolean | Whether to display an icon. |
| type | 'info' | 'success' | 'warning' | 'error' | The type of the message box. |