Message
The <Message> component is used to capture the users atention to provide information. It is meant to show only very relevant information. The title should contain the most relevant information about the message.
This component should not be added on a dynymic way.
There are currently three different variants of the <Message> component. The info variant is set as default. Inside the <Message> it lends itself to using the <Text> component.
Import
To import the component you just have to use this code below.
import { Message } from '@marigold/components';Appearance
| Property | Type | Description |
|---|---|---|
variant | warning | error | info | success | The available variants of this component. |
size | | The available sizes of this component. |
Props
| Property | Type | Default | Description |
|---|---|---|---|
messageTitle (required) | string | none | Set a message title. This is required. |
Examples
Info Message
This is the default info <Message>. The color is in a blue tone and contains the <Info> icon.
Hello, I am a simple info message.
Warning Message
Here you can see the warning <Message>. The color is in a yellow tone and contains the<Notification> icon.
Hello, I am a simple warning message.
Error Message
The error <Message> is colored in a red tone and contains the <Exclamation> icon.
Hello, I am a simple error message.