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 & Hooks

<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
duration 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.

useToaster

useToaster is a React Hook for creating and managing Toasts.

import { useToaster } from 'rsuite';

return () => {
  const toaster = useToaster();

  ...
};

toaster.push

Push a message and return a unique key.

type PlacementType = 'topCenter' | 'bottomCenter' | 'topStart' | 'topEnd' | 'bottomStart' | 'bottomEnd';

interface ToastContainerProps{
  /** The placement of the message box */
  placement?: PlacementType;

  /** Set the message to appear in the specified container */
  container?: HTMLElement | (() => HTMLElement);

  /** The number of milliseconds to wait before automatically closing a message */
  duration?: number;
}

toaster.push(message: ReactNode, options?: ToastContainerProps): string;

e.g:

// Push a message
toaster.push(<Message>message</Message>);

// Push a message and set the duration
toaster.push(<Message>message</Message>, {
  duration: 1000
});

// Push notification and set placement
toaster.push(<Notification>message</Notification>, {
  placement: 'topEnd'
});

toaster.remove

Remove a message by key

toaster.remove(key: string): void;

e.g:

const key = toaster.push(<Notification>message</Notification>, {
  placement: 'topEnd'
});

toaster.remove(key);

toaster.clear

Clear all messages

toaster.clear(): void;
Vercel banner