Message — DEPRECATED

Deprecated. Use ModalDialog with openModal from @uxf/ui/modal instead. This component is kept only for existing usages.

A confirm/alert dialog host driven by a module-level singleton ref. Message is mounted once near the app root; MessageService opens and closes dialogs imperatively from anywhere.

Usage

Mount the host once (e.g. in _app.tsx):

import { Message, MessageService } from "@uxf/ui/message";

function App(props: AppProps) {
    return (
        <>
            {props.children}
            <Message ref={MessageService.getMessageRef()} />
        </>
    );
}

Open a confirm (accept + cancel) or an alert (cancel only):

import { MessageService } from "@uxf/ui/message";

MessageService.openConfirm({
    acceptLabel: "Confirm",
    cancelLabel: "Cancel",
    title: "Title",
    description: "Description",
    color: "error",
    onAccept: () => {},
    onCancel: () => {},
});

MessageService.openAlert({
    cancelLabel: "Got it",
    title: "Title",
    description: "Description",
    color: "warning",
});

API

Import path: @uxf/ui/message.

Export	Kind	Description
`Message`	component	The dialog host to mount once (`forwardRef<MessageRef>`).
`MessageService`	object	Imperative API: `getMessageRef`, `openAlert`, `openConfirm`, `close`.
`MessageProps`	type	Props of a message (the object passed to the service).
`MessageRef`	type	Imperative handle: `{ message(props); close() }`.

MessageService methods:

Method	Signature	Description
`getMessageRef`	`() => RefObject<MessageRef>`	Shared ref to pass to `<Message>`.
`openConfirm`	`(props & { onAccept; acceptLabel }) => void`	Opens a dialog with cancel + accept buttons (`onAccept` and `acceptLabel` required).
`openAlert`	`(props without onAccept/acceptLabel) => void`	Opens a dialog with only the cancel button.
`close`	`() => void`	Closes the current dialog.

Props

MessageProps (also the shape accepted by the service methods):

Prop	Type	Default	Description
`title`	`string`	— (required)	Heading.
`cancelLabel`	`string`	— (required)	Cancel button label.
`color`	`MessageColor`	— (required)	Color scheme (`default`, `success`, `error`, `warning`). Drives the accept button color and the alert-bubble icon color.
`description`	`string`	—	Body text under the title.
`acceptLabel`	`string`	`"Ok"`	Accept button label.
`onAccept`	`() => void`	—	Accept handler. When set, an accept button is shown.
`onCancel`	`() => void`	—	Cancel handler.
`variant`	`"simple" \| "centered"`	`"simple"`	Layout. `centered` stacks and centers content with full-width buttons.
`icon`	`IconName`	per `color`	Icon rendered in the alert bubble.
`CustomIconComponent`	`ReactNode`	—	Replaces the default alert bubble. Pass `null` to render no icon at all.
`width`	`DialogPanelWidth`	`centered` → `"sm"`, else `"xs"`	Dialog panel width (`xs`, `sm`, `default`, `lg`, `xl`).
`children`	`ReactNode`	—	Extra content inserted below the title/description.
`className`	`string`	—	Added to the dialog panel.

Requirements

Mount exactly one <Message ref={MessageService.getMessageRef()} />; the service methods are no-ops until it is mounted.
Import the component stylesheets once in your global CSS (Message composes AlertBubble, Button, and Dialog):
```
@import url("@uxf/ui/css/alert-bubble.css");
@import url("@uxf/ui/css/message.css");
@import url("@uxf/ui/css/dialog.css");
@import url("@uxf/ui/css/button.css");
```
Also requires the global @uxf/ui token layer, set up once per app — see @uxf/ui setup.

Default

Open in new tab

Usage

Mount the host once (e.g. in _app.tsx):

import { Message, MessageService } from "@uxf/ui/message"; function App(props: AppProps) { return ( <> {props.children} <Message ref={MessageService.getMessageRef()} /> </> ); }

Open a confirm (accept + cancel) or an alert (cancel only):

import { MessageService } from "@uxf/ui/message"; MessageService.openConfirm({ acceptLabel: "Confirm", cancelLabel: "Cancel", title: "Title", description: "Description", color: "error", onAccept: () => {}, onCancel: () => {}, }); MessageService.openAlert({ cancelLabel: "Got it", title: "Title", description: "Description", color: "warning", });

API

Import path: @uxf/ui/message.

Export

Kind

Description

Message

component

The dialog host to mount once (forwardRef<MessageRef>).

MessageService

object

Imperative API: getMessageRef, openAlert, openConfirm, close.

MessageProps

type

Props of a message (the object passed to the service).

MessageRef

type

Imperative handle: { message(props); close() }.

MessageService methods:

Method

Signature

Description

getMessageRef

() => RefObject<MessageRef>

Shared ref to pass to <Message>.

openConfirm

(props & { onAccept; acceptLabel }) => void

Opens a dialog with cancel + accept buttons (onAccept and acceptLabel required).

openAlert

(props without onAccept/acceptLabel) => void

Opens a dialog with only the cancel button.

close

() => void

Closes the current dialog.

Props

MessageProps (also the shape accepted by the service methods):

Prop

Type

Default

Description

title

string

— (required)

Heading.

cancelLabel

string

— (required)

Cancel button label.

color

MessageColor

— (required)

Color scheme (default, success, error, warning). Drives the accept button color and the alert-bubble icon color.

description

string

—

Body text under the title.

acceptLabel

string

"Ok"

Accept button label.

onAccept

() => void

—

Accept handler. When set, an accept button is shown.

onCancel

() => void

—

Cancel handler.

variant

"simple" | "centered"

"simple"

Layout. centered stacks and centers content with full-width buttons.

icon

IconName

per color

Icon rendered in the alert bubble.

CustomIconComponent

ReactNode

—

Replaces the default alert bubble. Pass null to render no icon at all.

width

DialogPanelWidth

centered → "sm", else "xs"

Dialog panel width (xs, sm, default, lg, xl).

children

ReactNode

—

Extra content inserted below the title/description.

className

string

—

Added to the dialog panel.

Requirements

Mount exactly one <Message ref={MessageService.getMessageRef()} />; the service methods are no-ops until it is mounted.

Import the component stylesheets once in your global CSS (Message composes AlertBubble, Button, and Dialog):

@import url("@uxf/ui/css/alert-bubble.css");
@import url("@uxf/ui/css/message.css");
@import url("@uxf/ui/css/dialog.css");
@import url("@uxf/ui/css/button.css");

Also requires the global @uxf/ui token layer, set up once per app — see @uxf/ui setup.