SectionMessage
Display important information 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.
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.
| Property | Type | Description |
|---|---|---|
variant | success | warning | info | error | The available variants of this component. |
size | - | The available sizes of this component. |
Each variant communicates a different level of severity, helping users quickly understand the nature of the message.
| Variant | Description | When to use |
|---|---|---|
info | Blue-tinted message for neutral information. This is the default variant. | General announcements, tips, or contextual information that doesn't require immediate action. |
success | Green-tinted message indicating a positive outcome. | Confirming a completed action or successful state, like a saved form or resolved issue. |
warning | Yellow-tinted message signaling caution. | Potential issues or conditions the user should be aware of before proceeding. |
error | Red-tinted message for critical problems. | Errors that need attention, like validation failures or system errors. |
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.
- 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.
Place section message near the affected content.
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>.
import { SectionMessage } from '@marigold/components';export default () => ( <SectionMessage closeButton> <SectionMessage.Title> Configuration of the hardware key </SectionMessage.Title> <SectionMessage.Content> Activating the function allows you to change the scanning direction. Keep in mind to have the correct settings set to "changeable". </SectionMessage.Content> </SectionMessage>);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.
import { Inline, Link, SectionMessage, Stack } from '@marigold/components';export default () => ( <SectionMessage closeButton> <SectionMessage.Title>This page is read-only.</SectionMessage.Title> <SectionMessage.Content> <Stack space={2}> You don't have permission to edit this page. If you think you should have editing rights, contact your group administrator. <Inline space={4}> <Link href="#">View team roles</Link> <Link href="#">About permission</Link> </Inline> </Stack> </SectionMessage.Content> </SectionMessage>);Use section messages for providing non-disruptive feedback or notifications, allowing users to address the message when convenient.
Don't use the section message if you need to interact with it to proceed with a task or a flow.
Props
SectionMessage
Prop
Type
SectionMessage.Title
Prop
Type
SectionMessage.Content
Prop
Type
Alternative components
-
Dialog: If you need to interact with messages to proceed 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.