ButtonGroup

ButtonGroup manages the layout, visual attributes, and focus management of a vertical list of Button nodes

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

ButtonGroup(props: IButtonGroupProps): JSX.Element

Description

ButtonGroup manages the layout, visual attributes, and focus management of a vertical list of Button nodes. Buttons can be created by setting the buttons field to an array of label strings. A single observer on onButtonSelected can watch for any button in the group to be selected.

By default, Button nodes added to the group will have the default button appearance. Several fields allow you to override the appearance of all buttons at once.

Parameters

Name	Type	Description
`props`	IButtonGroupProps

Example

<buttonGroup
    buttons={["Play", "Pause", "Stop"]}
    onButtonSelected={(index) => console.log("Selected button:", index)}
    onButtonFocused={(index) => console.log("Focused button:", index)}
/>

Types

IButtonGroupProps

Properties for the ButtonGroup node.

ButtonGroup manages the layout, visual attributes, and focus management of a vertical list of Button nodes. When the ButtonGroup has focus, it sets the key focus on a single one of its child Button nodes.

Name	Type	Description
`onButtonFocused?`	`EventHandler<number>`	Fired when a button in the group receives the key focus. The handler receives the zero-based index of the focused button.
`onButtonSelected?`	`EventHandler<number>`	Fired when a button in the group is selected by the user. The handler receives the zero-based index of the selected button.
`text?`	`string`	Specifies the text for a single button. Typically `buttons` (string array) is preferred for creating multiple buttons at once.

Extends IButtonGroupDataProps, IGroupProps, ILayoutGroupProps.

IButtonGroupDataProps

Properties shared across ButtonGroup-like components.

Provides the visual customization fields for button groups, including text styling, icon bitmaps, sizing, and button creation via string arrays.

Name	Type	Description
`buttonHeight?`	`number`	Specifies the height of each Button node in the group. Only set to override the system default.
`buttons?`	`string[]`	Allows a set of Button nodes to be easily created by providing an array of button labels. Each string in the array results in a Button node added to the ButtonGroup, using the string as the button label.
`focusBitmapUri?`	`Uri`	Specifies the bitmap to be used as the background for the Button node that has focus. Only set to override the system default.
`focusButton?`	`number`	Causes the button with the specified index to receive the focus when the ButtonGroup has the key focus. If the ButtonGroup does not have the key focus when set, the specified button will display the focus footprint as its background.
`focusedIconUri?`	`Uri`	Specifies the bitmap for the focused button icon. Only set to override the system default.
`focusedTextColor?`	`string`	Specifies the button label color for the Button node that has focus, if any. Only set to override the system default.
`focusedTextFont?`	`string`	Specifies the font for the Button node that has focus, if any. Only set to override the system default.
`focusFootprintBitmapUri?`	`Uri`	Specifies the bitmap to be used as the focus footprint background when focus is not on the ButtonGroup node. The focus footprint is a visual indicator of the button that will take focus when focus moves back onto the ButtonGroup.
`height?`	`number`	Specifies the height of each Button node in the group. Only set to override the system default.
`iconUri?`	`Uri`	Specifies the bitmap for the button icon for all unfocused Button nodes in the group. Only set to override the system default.
`id?`	`string`
`maxWidth?`	`number`	Specifies the maximum width for the Button nodes in the group. Must be greater than or equal to `minWidth`.
`minWidth?`	`number`	Specifies the minimum width for the Button nodes in the group. Must be less than or equal to `maxWidth`.
`rightJustify?`	`boolean`	Specifies whether the button labels and icons should be right- or left-justified. When right-justified and there is an icon, it appears to the right of the button label.
`showFocusFootprint?`	`boolean`	Controls whether the focus footprint bitmap is displayed when the ButtonGroup does not have the key focus.
`textColor?`	`string`	Specifies the button label color for all unfocused Button nodes in the group. Only set to override the system default.
`textFont?`	`string`	Specifies the font for all unfocused Button nodes in the group. Only set to override the system default.
`width?`	`number`

Updated about 3 hours ago

What’s Next

ButtonRow

Did this page help you?