Messages

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

Header

Required description copy. Optional Link

Edit the code below to see your changes live!

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

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

API

Message

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 below 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.

Props ending with * are required

Message[MessageItem]

Prop Name	Type	Default	Description
`text` *	`string`		Message to be displayed.
`link`	`MessageLinkItem`		See below for usage.

Props ending with * are required

Message[MessageLinkItem]

Prop Name	Type	Description
`external`	`boolean`	Shows an external icons when the `external` flag is set and target="_blank".
`href`	`string`	Same as a HTML anchor href attribute.
`text`	`string`	Link text to display.
`target`	`string`	Same as a HTML anchor target attribute.

Props ending with * are required

Inherited Props

Examples

Types

There are four types of Messages based on the level of message you want to display.

Required description copy.

Edit the code below to see your changes live!

<>
  <Message type="error" messages={[{ text: 'Required description copy.' }]} marginVertical="medium" />
  <Message type="success" messages={[{ text: 'Required description copy.' }]} marginVertical="medium" />
  <Message type="warning" messages={[{ text: 'Required description copy.' }]} marginVertical="medium" />
  <Message type="info" messages={[{ text: 'Required description copy.' }]} marginVertical="medium" />
</>

<>
  <Message type="error" messages={[{ text: 'Required description copy.' }]} marginVertical="medium" />
  <Message type="success" messages={[{ text: 'Required description copy.' }]} marginVertical="medium" />
  <Message type="warning" messages={[{ text: 'Required description copy.' }]} marginVertical="medium" />
  <Message type="info" messages={[{ text: 'Required description copy.' }]} marginVertical="medium" />
</>

Header

Message's allow you to pass an optional header prop.

Required description copy.

Header

Required description copy.

Edit the code below to see your changes live!

<>
  <Message type="success" messages={[{ text: 'Required description copy.' }]} marginVertical="medium" />
  <Message
    header="Header"
    type="success"
    messages={[{ text: 'Required description copy.' }]}
    marginVertical="medium"
  />
</>

<>
  <Message type="success" messages={[{ text: 'Required description copy.' }]} marginVertical="medium" />
  <Message
    header="Header"
    type="success"
    messages={[{ text: 'Required description copy.' }]}
    marginVertical="medium"
  />
</>

onClose

Toggles the visibility of the close button, and provides an on click callback.

Required description copy.

Edit the code below to see your changes live!

<>
  <Message type="info" messages={[{ text: 'Required description copy.' }]} marginVertical="medium" />
  <Message
    onClose={() => null}
    type="info"
    messages={[{ text: 'Required description copy.' }]}
    marginVertical="medium"
  />
</>

<>
  <Message type="info" messages={[{ text: 'Required description copy.' }]} marginVertical="medium" />
  <Message
    onClose={() => null}
    type="info"
    messages={[{ text: 'Required description copy.' }]}
    marginVertical="medium"
  />
</>

Actions

Message's allow you to pass an optional actions prop.

header

Required description copy.

header

Required description copy.

Edit the code below to see your changes live!

<>
  <Message
    header="header"
    type="info"
    messages={[{ text: 'Required description copy.' }]}
    marginVertical="medium"
  />
  <Message
    actions={[
      { text: 'First Action', onClick: () => null },
      { text: 'Second Action', variant: 'subtle', onClick: () => null },
    ]}
    header="header"
    type="info"
    messages={[{ text: 'Required description copy.' }]}
    marginVertical="medium"
  />
</>

<>
  <Message
    header="header"
    type="info"
    messages={[{ text: 'Required description copy.' }]}
    marginVertical="medium"
  />
  <Message
    actions={[
      { text: 'First Action', onClick: () => null },
      { text: 'Second Action', variant: 'subtle', onClick: () => null },
    ]}
    header="header"
    type="info"
    messages={[{ text: 'Required description copy.' }]}
    marginVertical="medium"
  />
</>

Beta