SectionMessage

Display important informations in a section of a screen.

The <SectionMessage> component is a block-level element designed to alert users about specific content in a designated section on the page. It is positioned close to the relevant content to clearly indicate its connection. Section messages provide contextual feedback within a section of the page and are persistent, non-modal elements.

Anatomy

The section message consists of a container which includes an optional icon to support the message and a title. The actual content of section messages is located under the title.

Optionally, you can add a button to dismiss the message.

Anatomy of a SectionMessage

Appearance

The appearance of a component can be customized using the variant and size props. These props adjust the visual style and dimensions of the component, available values are based on the active theme.

Variant
Size
The selected theme does not has any options for "size".
This page is read-only!
You don't have permission to edit this page. If you think you should have editing rights, contact your group administrator.
PropertyTypeDescription
variantsuccess | warning | info | errorThe available variants of this component.
size-The available sizes of this component.

Usage

Section messages are ideal for displaying important feedback related to a specific section of the page.

Unlike modal dialogs, which interrupt the user's workflow, section messages remain visible without blocking interaction with other parts of the interface.

Do
  • The section message title should make the topic or purpose of the message clear.
  • The content provides a brief description of the event that has occurred on the page.

Position

They should be positioned close to the relevant content, typically directly above, to ensure users can easily identify the relationship between the message and the affected area.

Do
Place section messages near the affected content.

Place section message near the affected content.

Don't
Don't place section messages in unaffected sections.

Don't place section messages in unaffected sections.

Dismissable message

Dismissable messages are used to provide temporary feedback or notifications that the user can manually close or dismiss when they no longer need the information. They are generally used when feedback is helpful but doesn't need to stay on screen permanently.

To provide this, you have to use the closeButton property on the <SectionMessage>.

Configuration of the hardware key
Activating the function allows you to change the scanning direction. Keep in mind to have the correct settings set to "changeable".

You can also control the dismissable message by using the close and onClose property.

Actions

Actions, such as buttons or links, should be placed near the message content to make the next steps intuitive for users. Clear, accessible options help users easily respond to the feedback provided, allowing them to address the issue without disrupting their workflow.

This page is read-only.
You don't have permission to edit this page. If you think you should have editing rights, contact your group administrator.
Do

Use section messages for providing non-disruptive feedback or notifications, allowing users to address the message when convenient.

Don't

Don't use the section message if you need to interact with it to procced with a task or a flow.

Props

Did you know? You can explore, test, and customize props live in Marigold's storybook. Watch the effects they have in real-time!

SectionMessage

children?
ReactNode;
The children of the component.
close?
boolean;
If the message should be closed/dismissed (controlled).
closeButton?
boolean;
Adds a close button, makes the section message dismissable.
onCloseChange?
(close: boolean) => void;
Handler that is called when you need to control the dismissable message to close.

SectionMessage.Title

children?
ReactNode;
The children of the component.

SectionMessage.Content

children?
ReactNode;
The children of the component.

Alternative components

  • Dialog: If you need to interact with messages to procced with a task or a flow you should use a dialog.

  • Form components: When you need to inform the users of a status from a form field, you can use the help text/ validation message which comes with our form components.

Last update: 2 months ago