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
`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"
  />
</>

Beta