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
`actions`	`object[]`		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.
`header`	`string`		Optional header to display in message.
`messages` *	`MessageItem`		See MessageItem for usage.
`type`	`success` \| `error` \| `warning` \| `info`	`success`	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

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.

Beta