Yugen UI

Dialog

Dialog is a modal window that asks people to confirm or provide information before continuing.

modalType="modal" closes with Esc or a click on the backdrop. modalType="alert" makes people choose one of the actions.

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 {  Dialog, DialogTrigger, DialogSurface, DialogTitle,  DialogDescription, DialogContent, DialogActions, DialogClose,} from "yugen-ui";

Variants

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

Alert dialog

No X button, and Esc or a backdrop click doesn't close it.

Usage

Do
  • The title states the question or action clearly.
  • The primary button uses a specific verb (“Delete”, not “OK”).
  • Place the primary button to the right of Cancel.
Don't
  • Don't open a Dialog on top of another Dialog.
  • Don't use Dialog for messages that need no response. Use MessageBar or Toast.

Props

Prop · TypeDefaultDescription
Dialog.open / onOpenChangeboolean / (open) => voidDefault: —Controls the open state.
DialogSurface.modalType"modal" | "alert"Default: "modal"How the dialog can be closed.
DialogSurface.material"glass" | "glass-clear"Default: —Yugen Labs — a glass surface.
DialogTitle.actionReactNode | nullDefault: close button (X)Pass null to hide the close button.
DialogActions—Default: —Right-aligned row of buttons at the bottom.

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

Key · TypeDefault (English)messagesVi
closestring

Nhãn nút X ở DialogTitle.

Default (English)"Close"messagesVi"Đóng"