React Suite Message Icons

0 0 2 minutes read

A React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application.

In this article, we’ll learn about React Suite Message Icons. A message component is used to show important tips on a page. React suite provides 4 types of icons(info, warning, error, success) that can be used with the message component.

Message Props

children: It provides the description information for the message.
classPrefix: It is used to denote the prefix of the component CSS class.
closable: It gives whether to close the message box.
full: It fills the message container.
header: It provides the title of the message.
onClose: It is called after the message is closed.
showIcon: It is used whether to display an icon or not.
type: It displays the type of message box. Four types include info, warning, error, and success.

Syntax:

//Import Statement
import { Message } from "rsuite";

//Function component
Function App () {
 return (
   <Message showIcon closable type="warning" header="Warning">
      ...
   </Message>
  );
}

Example 1: Below example demonstrates the basic message with icons.

Javascript

import React from "react"; 
import { Message } from "rsuite"; 
import "rsuite/dist/rsuite.min.css"; 
  
function App() { 
    return ( 
        <div style={{ padding: 10 }}> 
            <h2>zambiatek</h2> 
            <h3 style={{ color: 'green' }}> 
                React Suite Message Icons</h3> 
            <div> 
                <Message showIcon type="info"> 
                    Want more info about GFG courses? 
                </Message> 
                <Message showIcon type="success"> 
                    Great! You purchased a course. 
                </Message> 
            </div> 
        </div> 
    ); 
} 
  
export default App; 

Output:

Example 2: Below example demonstrates the closable message with icons.

Javascript

import React from "react"; 
import { Message } from "rsuite"; 
import "rsuite/dist/rsuite.min.css"; 
  
function App() { 
    return ( 
        <div style={{ padding: 10 }}> 
            <h2>zambiatek</h2> 
            <h3 style={{ color: "green" }}> 
                React Suite Message Icons</h3> 
            <div> 
                <Message showIcon closable type="warning" 
                    header="Warning"> 
                      Don't forget to check your email for 
                      the latest updates. 
                </Message> 
  
                <Message showIcon closable type="error" 
                    header="Error"> 
                        Something went wrong. Please try 
                        again later. 
                </Message> 
            </div> 
        </div> 
    ); 
} 
  
export default App;

Output:

Reference: https://rsuitejs.com/components/message/#icons

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!