InlineMessage

Overview

InlineMessages inform merchants about important component/section level changes or persistent conditions that need their attention.

When to use:

  • To alert the merchant of a change or condition related to an individual component or section.

Implementation

An inline message, mostly used for displaying alerts within Modals. Is a condensed version of the Message component.

Edit the code below to see your changes live!

<InlineMessage
  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

Do's and Don'ts

Do
Place message within the Modal or Panel where the information or actions related to the message are located.
Can be persistent (until the issue is resolved) or dismissable.
Focus on a single theme or piece of information and include a clear description that summarises the issue and how to resolve it.
Should be written in sentence case with appropriate punctuation.
Don't
Never use InlineMessages for marketing information or upsell.
Don’t use InlineMessages as the primary entry point for information or actions that the merchant needs on a regular basis.
Never place InlineMessages in the middle or at the bottom of a page. Instead use a Message.
Never use InlineMessages for quick, dismissable feedback on actions. Instead use Alerts.