Message #

User-facing message with icon.

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.

Demos #

Configurable #

<cdx-message dismiss-button-label="Close">Message text</cdx-message>

type

inline

dismissButtonLabel

default

Fade in #

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

<template>
  <cdx-button :disabled="showMessage" @click="showMessage = true">
    Show message
  </cdx-button>
  <cdx-message v-if="showMessage" type="warning" :fade-in="true">
    <p><strong>Warning!</strong> Here's some information you should know.</p>
  </cdx-message>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { CdxMessage, CdxButton } from "@wikimedia/codex";

export default defineComponent({
  name: "MessageFadeIn",
  components: { CdxMessage, CdxButton },
  data() {
    return {
      showMessage: false
    };
  }
});
</script>

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

<cdx-message dismiss-button-label="Close">
	Notice message with dismiss button
</cdx-message>

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 understand before disappearing. When in doubt, do not use auto-dismiss.

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

<template>
  <cdx-button :disabled="showMessage" @click="showMessage = true">
    Show message
  </cdx-button>
  <cdx-message
    v-if="showMessage"
    type="success"
    :fade-in="true"
    :auto-dismiss="true"
    :display-time="3000"
  >
    Success! This message will disappear...
  </cdx-message>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { CdxMessage, CdxButton } from "@wikimedia/codex";

export default defineComponent({
  name: "MessageAutoDismiss",
  components: { CdxMessage, CdxButton },
  data() {
    return {
      showMessage: false
    };
  }
});
</script>

Multiline message #

Message content can contain markup like bold text and links.

<cdx-message type="error">
	<p><strong>An error has occurred</strong></p>
	<p>Comprehensive explanation of the error</p>
</cdx-message>

With custom icon #

Only notice messages may have a custom icon.

<cdx-message :icon="cdxIconArticle">
	Notice message with custom icon
</cdx-message>

Usage #

Props #

Events #

Slots #