React Suite Message Icons
Last Updated :
08 Jun, 2022
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>GeeksforGeeks</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>GeeksforGeeks</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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...