StandardMessageDialog

Displays a message dialog with optional title, text blocks, bulleted list, and buttons

import { StandardMessageDialog } from "@roku-sdk/components";

StandardMessageDialog(props: IStandardMessageDialogProps): JSX.Element

Description

Displays a message dialog with optional title, text blocks, bulleted list, and buttons.

StandardMessageDialog is a pre-built dialog similar to the legacy Dialog node. It provides a convenient way to display informational messages with:

One or more text blocks at the top (message)
An optional bulleted/numbered/lettered list (bulletText)
One or more text blocks at the bottom (bottomMessage)
A row of buttons (buttons)

Parameters

Name	Type	Description
`props`	IStandardMessageDialogProps

Example

const [showDialog, setShowDialog] = createSignal(false);

{showDialog() && (
    <StandardMessageDialog
        title="Terms of Service"
        message={["Please review the following terms:"]}
        bulletText={["You must be 18 or older", "Content is for personal use only", "Subscription auto-renews monthly"]}
        bulletType="numbered"
        bottomMessage={["By continuing, you agree to these terms."]}
        buttons={["Accept", "Decline"]}
        onButtonSelected={(index) => {
            console.log(index === 0 ? "Accepted" : "Declined");
            setShowDialog(false);
        }}
        onWasClosed={() => setShowDialog(false)}
    />
)}

Types

IStandardMessageDialogProps

Properties for the StandardMessageDialog component.

Extends IStandardDialogProps with message-specific fields for displaying informational text blocks and bulleted lists.

Name	Type	Description
`bottomMessage?`	`string[]`	One or more blocks of informational text displayed at the bottom of the dialog's content area. Each string in the array is displayed as a separate block of text with standard spacing.
`bulletText?`	`string[]`	An array of strings displayed as a bulleted or numbered list in the content area, below the message and above the bottom message.
`bulletType?`	`IStandardBulletType`	See below.
`buttons?`	`string[]`	List of button labels to display in the button area at the bottom of the dialog. Each string adds a new button. Minimize the number of buttons to ensure visibility.
`message?`	`string[]`	One or more blocks of informational text displayed at the top of the dialog's content area. Each string in the array is displayed as a separate block of text with standard spacing. To separate lines of text, add each line as an element in the array (do not use newline characters).
`title?`	`string`	The title displayed at the top of the dialog.

Extends IStandardDialogProps.

IStandardMessageDialogProps.bulletType

Specifies the type of list item delimiter when bulletText is set.

"bullet": bullet points (default)
"numbered": numbered list (1, 2, 3...)
"lettered": lettered list (a, b, c...)

IStandardBulletType

Bullet list delimiter type for StandardMessageDialog.

type IStandardBulletType = "bullet" | "numbered" | "lettered";