MessageBar

Intent variants

This is an informational message.

Operation completed successfully.

Please review your settings.

Something went wrong.

<FuiMessageBar intent="info">Info message</FuiMessageBar>
<FuiMessageBar intent="error">Error message</FuiMessageBar>

Layout

Multiline This message has a title and can wrap to multiple lines.

Single line message with inline content.

<FuiMessageBar layout="multiline" intent="info">
  <template #title>Title</template>
  Description
</FuiMessageBar>
<FuiMessageBar layout="singleline" intent="info">
  Short message
</FuiMessageBar>

Dismissible

Click the X to dismiss this message.

<script setup>
import { ref } from 'vue'
const visible = ref(true)
</script>

<template>
  <FuiMessageBar v-if="visible" dismissible @dismiss="visible = false">
    Dismissible message
  </FuiMessageBar>
</template>

With actions

Unsaved changes You have unsaved changes that will be lost.

<FuiMessageBar intent="warning">
  <template #title>Unsaved changes</template>
  Description text.
  <template #actions>
    <FuiButton size="small">Save</FuiButton>
  </template>
</FuiMessageBar>

Props

Prop	Type	Default	Description
intent	info | success | warning | error	info	Message type
layout	multiline | singleline	multiline	Layout style
dismissible	boolean	false	Show dismiss button

Slots

Slot	Description
default	Message body
title	Title (multiline only)
actions	Action buttons