Message

Overview

Messages inform merchants about important page or system level changes or persistent conditions that need their attention.

When to use:

  • To communicate to the merchant in a prominent way.
  • To update them about a change or give them pertinent information.
  • To communicate a problem that needs to be resolved.

Implementation

A message primarily used for displaying page/table messaging, feature/discover/system level messages, or even non-critical messaging.

Edit the code below to see your changes live!

<Message
  header="Header"
  messages={[
    {
      text: 'Required description copy.',
      link: {
        text: 'Optional Link',
        href: '#',
      },
    },
  ]}
  onClose={() => null}
/>

Props

Prop name
Type
Default
Description
actionsobject[]

Accepts an array of objects with Button props and an additional text prop. Also, only two variants will be available to use: "secondary" and "subtle". See example for usage.

headerstring

Optional header to display in message.

messages *MessageItem

See MessageItem for usage.

typesuccess | error | warning | infosuccess

Determines the style of message to display.

onClose() => void

Function that will be called on close events.

localization{ close: string }

Overrides the label with localized text.

Props ending with * are required

Inherited

Expand

Margin Props

Do's and Don'ts

Do
To display a page or system level message.
Can be persistent (until the issue is resolved) or dismissable.
Should be placed directly below the page header at the top of the page.
Should focus on a single theme or piece of information and must include a clear description that summarises the issue and how to resolve it.
Be written in sentence case with appropriate punctuation.
Don't
Never use Messages for marketing information or upsell.
Not be used as the primary entry point for information or actions that the merchant needs on a regular basis.
Never place Messages in the middle or on the bottom of a page. Instead use an InlineMessage.
Never use Messages for quick, dismissable feedback on actions. Instead use Alerts.