Display a short message with important informations.

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.



To import the component you just have to use this code below.

import { Message } from '@marigold/components';


variantsuccess | warning | info | errorThe available variants of this component.
sizeThe available sizes of this component.


messageTitle (required)stringnoneSet a message title. This is required.


Info Message

This is the default info <Message>. The color is in a blue tone and contains the <Info> icon.

There is an update available.

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.

Danger Zone!

Hello, I am a simple warning message.

Error Message

The error <Message> is colored in a red tone and contains the <Exclamation> icon.

Wrong here.

Hello, I am a simple error message.