Skip to content
On this page

Message

A Message provides system feedback for users. Messages can be provided as a prominently-displayed banner with a longer explanation, or as inline validation feedback.

Guidelines

Using messages

Messages must include text clearly defining the system feedback to the user. They also include an icon to help users recognize the type of message, and they can also feature an optional dismiss button to close the message.

Example of a success type Codex Message.

Accessibility note

The message icon adds a point of recognition for color-blind users.

Specifications

The message component may contain the following items:

Specification of Message.

  1. Icon
    Icons simplify user recognition and provide the ability to shorten message text. A specific icon is matched with each message type (e.g., ‘success’) to ensure recognition.
  2. Message text
    The message text should be as clear and concise as possible, offering feedback to users. If applicable, it may also suggest next steps.
  3. Close button (optional)
    To allow for the message to be dismissed, an optional icon-only quiet button can be included.

Specification of Inline Message.

The inline message component includes both the icon and message elements, excluding the close button.

Refer to the Message component in Codex Figma.

Types

Message layout

There are two types of messages, each suited to specific use cases:

  1. Message: Utilize it to display system feedback, respond to user actions, or provide information.
  2. Inline message: Employ it to offer feedback on the validation of form inputs.

Representation of message and inline message.

Message type

Depending on the feedback conveyed to the user, the messages can be categorized as follows:

  1. Neutral or notice messages provide general user feedback. They are accompanied by the 'infoFilled' icon by default, but the icon may be changed to any other system icon to emphasize a specific aspect of the notice message.
  2. Success messages deliver feedback of a successful user interaction, like publishing an article. Accompany the message with the 'success' icon.
  3. Error messages have the strongest visual priority of all system messages. Use them to alert the user only in situations when their immediate attention is needed. Accompany the message with the 'error' icon.
  4. Warning messages provide important information about circumstances that require caution. Accompany the message with the 'alert' icon.

Message types based on feedback conveyed to the user: notice, success, error, and warning.

Inline messages follow the same categorization: notice, success, error, and warning.

Inline message types based on feedback conveyed to the user: notice, success, error, and warning.

Dismissability

Messages can be categorized based on how they are removed from the interface as follows:

Dismiss button

Messages can be dismissed by utilizing the close button within the message. Note that inline messages cannot be dismissable.

Message with a dismiss button.

Auto-dismiss

Messages can be also auto-dismissable. This means they will automatically disappear after 4 seconds.

This feature should only be used for very short messages to ensure that they can be read and understood before disappearing. When in doubt, do not use auto-dismiss. To prevent error messages from disappearing before users fix the error, do not use auto-dismiss with error messages. Auto-dismiss can be used with or without the manual dismiss button.

Two auto-dismissible messages: one without dismiss button and one with a dismiss button.

Demos

Configurable

Message text
NameValue
Props
type
inline
dismissButtonLabel
Slots
default
View
Reading direction

Fade in

When a message is dynamically added to the UI, use the fadeIn prop to enable a transition.

Dismiss button

Messages can be made dismissable by supplying a semantic label for the dismiss button via the dismissButtonLabel prop. This label will be visually hidden but accessible to assistive technology, specifically screen readers.

When the dismiss button is clicked, the Message component hides itself, and a 'user-dismissed' event is emitted to the parent component in case the parent component needs to react to the message dismissal in some way.

Note that inline messages cannot be dismissable.

Notice message with dismiss button

Auto-dismiss

The autoDismiss prop can be used to automatically remove the message after a period of time. Set this prop to true to use the default display time of 4000 milliseconds (4 seconds). To customize the display time, set the autoDismiss prop to a number of milliseconds.

This feature should only be used for very short messages to ensure that can be read and understood before disappearing. When in doubt, do not use auto-dismiss. Auto-dismiss cannot be used for error messages: if the type prop is set to error, the autoDismiss prop will be ignored and a warning will be thrown if it's set.

Auto-dismiss can be used with or without the manual dismiss button.

Multiline message

Message content can contain markup like bold text and links.

With custom icon

Only notice messages may have a custom icon.

Notice message with custom icon

Vue usage

Message styles and icon will vary depending on the message type (notice, warning, error or success). Messages are block style by default, but can be displayed as inline messages via the inline prop.

Block-style messages can be made dismissable in the following ways:

  • By using the dismissButtonLabel prop, which adds a dismiss button
  • By using the autoDismiss prop. This can be set to true to use the default display time of 4000 milliseconds (4 seconds), or the display time can be customized by setting autoDismiss to a number of milliseconds. Error messages cannot auto-dismiss: if the type prop is set to error, then the autoDismiss prop will be ignored.

Props

Prop nameDescriptionTypeValuesDefault
typeStatus type of Message.StatusType'notice', 'warning', 'error', 'success''notice'
inlineWhether this message follows the inline design (no padding, background color, or border).boolean-false
iconCustom message icon. Only allowed for notice messages.Icon-null
fadeInWhether the message should fade in. Should be used for messages that are dynamically displayed, not present on page load.boolean-false
dismissButtonLabelLabel text for the dismiss button for user-dismissable messages.

An icon-only button will be displayed that will hide the message on click. This prop is for the hidden button label required for accessibility purposes and tooltip text.
string-''
autoDismissEnable automatic dismissal of message after a period of time.

This prop can be set to true to use the default display time of 4000 milliseconds. To customize the display time, set this prop to a number of milliseconds.

Error messages cannot be automatically dismissed. If the type prop is set to error, this prop will be ignored.

TODO: consider adding a stricter validator to set limits on this. If the time is too short, the message may not be readable. If the time is too long, the message probably shouldn't be auto-dismissed.
boolean|number-false

Events

Event namePropertiesDescription
user-dismissedEmitted when the message is dismissed by the user via the dismiss button.
auto-dismissedEmitted when the message is automatically dismissed after the display time.

Slots

NameDescriptionBindings
defaultMessage content.

CSS-only version

Note that some features of the Vue component require JavaScript and are therefore not supported in the CSS-only version (fade in, dismiss button, and auto-dismiss).

Markup structure

TIP

The outer <div> should have one of the following ARIA attributes:

  • For notice, warning, and success messages: aria-live="polite"
  • For error messages: role="alert"

Message layout

There are two layout styles for messages: block and inline. Use the following classes to apply these layouts.

  • Block: cdx-message--block (class can be omitted since this is the default)
  • Inline: cdx-message--inline

Message types

There are 4 message types, which change the colors and icon depending on the message's purpose. Use these classes to apply the different message type styles:

  • Notice: cdx-message--notice (class can be omitted since this is the default)
  • Warning: cdx-message--warning
  • Error: cdx-message--error
  • Success: cdx-message--success

Multiline message

Message content can contain markup like bold text and links.