Skip to main content

Message

Basic​

Basic example of the Message component.

Your profile has been updated successfully

 
const BasicComponent = () => {
  return <Message>Your profile has been updated successfully</Message>;
};

Types of messages​

Use the type prop to change the type of message.

Unable to connect to the server. Please check your internet connection.

Payment processed successfully! Your order is confirmed.

Scheduled maintenance will occur tonight from 2-4 AM EST.

 
const TypesOfMessagesComponent = () => {
  return (
    <>
      <Message type="error">
        Unable to connect to the server. Please check your internet connection.
      </Message>
      <Message type="success">
        Payment processed successfully! Your order is confirmed.
      </Message>
      <Message type="info">
        Scheduled maintenance will occur tonight from 2-4 AM EST.
      </Message>
    </>
  );
};