---
id: buttongroup
title: ButtonGroup
---

import { IconsStyle } from "@site/src/components/Docs_Icons";
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import Usage from "../component_usage/ButtonGroup.mdx";
import Play from "@site/playground/ButtonGroup/buttongroup.playground";

<IconsStyle />

ButtonGroup is a linear set of segments, each of which function as a button that can display a different view/or perform a different action.
Use a ButtonGroup to offer choices that are closely related but mutually exclusive.
This component inherits [all native TouchableHighlight and TouchableOpacity props that come with React Native TouchableHighlight or TouchableOpacity elements](https://reactnative.dev/docs/touchablehighlight.html).

## Import

```tsx
import { ButtonGroup } from "@rneui/themed";
```

## Usage

<Usage />

## Props

<div class='table-responsive'>

| Name                        | Type                                                | Default           | Description                                                                                                                          |
| --------------------------- | --------------------------------------------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| `Component`                 | React Component                                     |                   | Choose other button component such as TouchableOpacity.                                                                              |
| `activeOpacity`             | number                                              |                   | Add active opacity to the button in buttonGroup.                                                                                     |
| `button`                    | object                                              |                   | Button for the component.                                                                                                            |
| `buttonContainerStyle`      | View Style                                          |                   | Specify styling for button containers.                                                                                               |
| `buttonStyle`               | View Style                                          |                   | Specify styling for button.                                                                                                          |
| `buttons`                   | `(string` \| `ButtonComponent` \| `ButtonObject)[]` |                   | Array of buttons for component (required), if returning a component, must be an object with { element: componentName }.              |
| `containerStyle`            | View Style                                          |                   | Specify styling for main button container.                                                                                           |
| `disabled`                  | `boolean` \| `number[]`                             | `false`           | Controls if buttons are disabled. Setting `true` makes all of them disabled, while using an array only makes those indices disabled. |
| `disabledSelectedStyle`     | View Style                                          |                   | Styling for each selected button when disabled.                                                                                      |
| `disabledSelectedTextStyle` | Text Style                                          |                   | Styling for the text of each selected button when disabled.                                                                          |
| `disabledStyle`             | View Style                                          |                   | Styling for each button when disabled.                                                                                               |
| `disabledTextStyle`         | Text Style                                          |                   | Styling for the text of each button when disabled.                                                                                   |
| `innerBorderStyle`          | { color?: string; width?: number; }                 |                   | Update the styling of the interior border of the list of buttons.                                                                    |
| `onHideUnderlay`            | Function                                            |                   | Function called on hiding underlay.                                                                                                  |
| `onLongPress`               | GestureResponderEventHandler                        |                   | Called when a long-tap gesture is detected.                                                                                          |
| `onPress`                   | (...args: any[]) => void                            | `Function`        | Method to update Button Group Index.                                                                                                 |
| `onPressIn`                 | GestureResponderEventHandler                        |                   | Called when a touch is engaged before `onPress`.                                                                                     |
| `onPressOut`                | GestureResponderEventHandler                        |                   | Called when a touch is released before `onPress`.                                                                                    |
| `onShowUnderlay`            | Function                                            |                   | Function called on showing underlay.                                                                                                 |
| `pressableProps`            | PressableProps except click handlers                | `None`            |                                                                                                                                      |
| `selectMultiple`            | boolean                                             | `false`           | Allows the user to select multiple buttons.                                                                                          |
| `selectedButtonStyle`       | View Style                                          |                   | Specify styling for selected button.                                                                                                 |
| `selectedIndex`             | number                                              | `null`            | Current selected index of array of buttons.                                                                                          |
| `selectedIndexes`           | number[]                                            | `[]`              | Current selected indexes from the array of buttons.                                                                                  |
| `selectedTextStyle`         | Text Style                                          |                   | Specify specific styling for text in the selected state.                                                                             |
| `setOpacityTo`              | (value: number) => void                             |                   | Function to set the opacity.                                                                                                         |
| `textStyle`                 | Text Style                                          |                   | Specify specific styling for text.                                                                                                   |
| `underlayColor`             | string                                              | `Color [Primary]` | Specify underlayColor for TouchableHighlight.                                                                                        |
| `vertical`                  | boolean                                             | `false`           | Display the ButtonGroup vertically.                                                                                                  |

</div>

## Playground

<Play />
