Button

Button is a simple widget that generates a buttonSelected event when the user selects it

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

Button(props: IButtonProps): JSX.Element

Description

Button is a simple widget that generates a buttonSelected event when the user selects it. The button can display a label and/or an icon, as well as a background image. Fields are provided to customize the label text and color depending on whether or not the button has the key focus.

By default, the background is only shown when the button has focus. Buttons are typically used in a ButtonGroup node. When a Button is not a child of a ButtonGroup, set showFocusFootprint to true so it always displays a background image.

Parameters

Example

<button
    text="Play"
    showFocusFootprint={true}
    onButtonSelected={() => console.log("Button selected")}
/>

Types

IButtonProps

Properties for the Button node.

The Button node is a simple widget that generates a buttonSelected event when the user selects it. The button can display a label and/or an icon, as well as a background image. Fields are provided to customize the label text and color depending on whether or not the button has the key focus. Similarly, the bitmaps used for the icon and background can be specified for both focused and unfocused button states.

By default, the background of the button is only shown when the button has the key focus. Buttons are typically used in a ButtonGroup node that manages which button in the group will have the key focus when the ButtonGroup node receives the focus.

Extends IButtonDataProps, IGroupProps.