Menu
Documentation
v4.0.0-beta.4

Message

<BaseMessage /> · A versatile message component.

View SourceOpen Issue
A default message.
vue
<template>
  <BaseMessage
    icon
    rounded="md"
  >
    A default message.
  </BaseMessage>
</template>

Features

  • Supports message states
  • Supports icons
  • Can have a close button

Anatomy

This component accepts text content as a child. You can customize the message visual style by using the available props.

vue
<template>
  <BaseMessage>
    <!-- Content goes here -->
  </BaseMessage>
</template>

API Reference

This component has props that you can use to modify its visual style.

Prop Type
message
default:""
string

The message to display.

icon
default:-
string

Whether to show an icon, or the name of the icon to display.

close-icon
default:-
string

The icon to show in the close button

closable
default:-
boolean

Whether to show a close button.

variant
default:"default"
"default" | "primary" | "muted" | "success" | "info" | "warning" | "destructive"

The variant of the message.

rounded
default:"sm"
"none" | "md" | "sm" | "lg" | "full"

The radius of the message.

as-child
default:-
boolean

Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.

as
default:-
AsTag | Component

The element or component this component should render as. Can be overwritten by `asChild`.

Event Emitted Value Type
close
[]
Slot Type
#default
any
#icon
any
#close-button
any

Examples

Type

Use the variant prop to control the color of the message.

A default message.
A primary message.
A successful message.
An information message.
A warning message.
A destructive message.
vue
<template>
  <BaseMessage variant="success">
    A successful message.
  </BaseMessage>
  <BaseMessage variant="info">
    An information message.
  </BaseMessage>
  <BaseMessage variant="warning">
    A warning message.
  </BaseMessage>
  <BaseMessage variant="destructive">
    A destructive message.
  </BaseMessage>
</template>

Icon

Use the icon prop to display an icon inside the message.

A muted message.
A primary message.
A successful message.
An information message.
A warning message.
A destructive message.
vue
<template>
  <BaseMessage
    color="muted"
    icon="mingcute:globe-fill"
    rounded="md"
  >
    A muted message.
  </BaseMessage>
  <BaseMessage
    color="primary"
    icon="mingcute:bling-fill"
    rounded="md"
  >
    A primary message.
  </BaseMessage>
  <BaseMessage icon rounded="md">
    A successful message.
  </BaseMessage>
  <BaseMessage color="info" icon rounded="md">
    An information message.
  </BaseMessage>
  <BaseMessage color="warning" icon rounded="md">
    A warning message.
  </BaseMessage>
  <BaseMessage color="danger" icon rounded="md">
    A destructive message.
  </BaseMessage>
</template>

Radius

Use the rounded prop to control the border radius of the message.

A successful message.
An information message.
A warning message.
A destructive message.
vue
<template>
  <BaseMessage color="success" icon rounded="sm">
    A successful message.
  </BaseMessage>
  <BaseMessage color="info" icon rounded="md">
    An information message.
  </BaseMessage>
  <BaseMessage color="warning" icon rounded="lg">
    A warning message.
  </BaseMessage>
  <BaseMessage color="danger" icon rounded="full">
    A destructive message.
  </BaseMessage>
</template>

Closable

Use the closable prop to display a close button on the message.

A successful message.
An information message.
A warning message.
A destructive message.
vue
<template>
  <BaseMessage color="success" icon rounded="sm">
    A successful message.
  </BaseMessage>
  <BaseMessage color="info" icon rounded="md">
    An information message.
  </BaseMessage>
  <BaseMessage color="warning" icon rounded="lg">
    A warning message.
  </BaseMessage>
  <BaseMessage color="danger" icon rounded="full">
    A destructive message.
  </BaseMessage>
</template>

List

Pagination