StandardDialog

Base dialog node for the Roku standard dialog framework

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

StandardDialog(props: IStandardDialogProps): JSX.Element

Description

Base dialog node for the Roku standard dialog framework.

StandardDialog provides a structured dialog layout with optional title, content, button, and side-card areas. Use the StdDlg* area and item components as children to compose the dialog's UI.

Parameters

Name	Type	Description
`props`	IStandardDialogProps

Example

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

{showDialog() && (
    <StandardDialog
        onButtonSelected={(index) => {
            console.log(`Button ${index} selected`);
            setShowDialog(false);
        }}
        onWasClosed={() => setShowDialog(false)}
    >
        <stdDlgTitleArea primaryTitle="Confirm Action" />
        <stdDlgContentArea>
            <stdDlgTextItem text="Are you sure you want to continue?" />
        </stdDlgContentArea>
        <stdDlgButtonArea>
            <stdDlgButton text="OK" />
            <stdDlgButton text="Cancel" />
        </stdDlgButtonArea>
    </StandardDialog>
)}

Description

Parameters

Example

What’s Next