Message

Example

Import

JavaScript

import '@sbddesign/bui-ui/message.js'

React

import { BuiMessageReact as BuiMessage } from '@sbddesign/bui-ui/react'

Usage

JavaScript

<bui-message mood="success" text="₿1,000 received."></bui-message>
<bui-message mood="caution" text="Transaction is pending."></bui-message>
<bui-message mood="danger" text="An error occured. Please try again later."></bui-message>
<bui-message text="Just an FYI, there can only be 21 million BTC."></bui-message>

React

<BuiMessage mood="success" text="₿1,000 received."></BuiMessage>
<BuiMessage mood="caution" text="Transaction is pending."></BuiMessage>
<BuiMessage mood="danger" text="An error occured. Please try again later."></BuiMessage>
<BuiMessage text="Just an FYI, there can only be 21 million BTC."></BuiMessage>

Properties

Property	Attribute	Type	Required	Reflected	Description
text	text	string	No	No	Message text content
mood	mood	string	No	No	Message mood: “neutral”, “success”, “caution”, “danger”
showIcon	show-icon	boolean	No	Yes	Whether to show an icon
icon	icon	string	No	No	Icon name or identifier

Valid Values

Message Moods

• neutral - Default neutral message
• success - Success/positive message
• caution - Warning/caution message
• danger - Error/danger message

Behavior

• Mood Styling: The mood property controls the visual appearance and color scheme of the message
• Icon Display: The showIcon property controls whether an icon is displayed alongside the text
• Custom Icons: The icon property allows you to specify which icon to display
• Text Content: The text property contains the main message content
• Visual Hierarchy: Different moods provide clear visual distinction for different message types

Events

The message component does not emit custom events. It behaves as a standard HTML element for displaying messages.