MessageBar

MessageBar communicates important information about the state of the whole page or a region.

MessageBar stays until people dismiss it or the situation is resolved, unlike a Toast, which disappears on its own.

SavedYour changes have been synced.

Import

Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.

TSX

// npm install yugen-uiimport { MessageBar } from "yugen-ui";

Variants

Each tile is a standalone example: hover to copy, or press Code to see the source.

TipPress Ctrl+K to search.

SuccessInvitation sent.

Heads upThis version will soon reach end of support.

ErrorCan't connect to the server.

Intent

info, success, warning, error.

Storage almost fullYou've used 95% of your storage.

Actions & dismiss

actions holds buttons that resolve the issue; onDismiss shows a close button.

Payment failedYour bank declined the transaction. Check your balance or use a different payment method.

Multiline

layout="multiline" for long content; actions move to a line below.

Usage

Place the MessageBar at the top of the area it describes.
State the cause and how to fix it.

Don't

Don't show more than 2–3 MessageBars at once.
Don't use the error intent for neutral information.

Props

Prop · Type	Default	Description
intent"info" \| "success" \| "warning" \| "error"	Default: "info"	Severity.
titleReactNode	Default: —	Bold title.
actionsReactNode	Default: —	Action buttons (size small).
onDismiss() => void	Default: —	Shows a close button.
layout"singleline" \| "multiline"	Default: "singleline"	Layout.

Messages

Text built into the component: labels, aria-labels, screen reader announcements.

English by default. Change it with the messages prop of YugenProvider, by the namespace below; messagesVi has the Vietnamese set. See Interface language.

messages.messageBar

Key · Type	Default (English)	messagesVi
dismissstring Nhãn nút đóng (khi có `onDismiss`).	Default (English)`"Dismiss"`	messagesVi`"Đóng thông báo"`