# Titanium.UI.ButtonBar

> An iOS button bar component.

- Source: https://titaniumsdk.com/docs/sdk/13.2.0/Titanium.UI.ButtonBar
- Titanium SDK version: 13.2.0
- Kind: view
- Platforms: Android, iPhone, iPad, macOS
- Since: Titanium SDK Android 10.0.0, iPhone 0.8, iPad 0.8, macOS 9.2.0
- Extends: Titanium.UI.View
- Inheritance: Titanium.UI.View > Titanium.Proxy

| Android | iOS |
| ------- | --- |
| ![Android](./buttonbar_android.png) |  |

The button bar is a set of buttons joined into a single control.
On iOS, you can set up the buttons with either a title or image, but not both.
On Android, you can set up the buttons with a title, image, or both.

Use the [Titanium.UI.createButtonBar](https://titaniumsdk.com/docs/sdk/Titanium.UI.md#createButtonBar) method or **`<ButtonBar>`** Alloy element to create a button bar.

The [TabbedBar](https://titaniumsdk.com/docs/sdk/Titanium.UI.iOS.TabbedBar.md) control is a button bar where the
last selected button maintains a pressed or selected state. The following discussion
applies to both button bar and tabbed bar.

## Example: Simple 3 button button bar

``` js
const win = Ti.UI.createWindow();
const buttonBar = Titanium.UI.createButtonBar({
  labels:['One', 'Two', 'Three']
});
buttonBar.addEventListener('click', (e) => {
  console.log(`Clicked on button index: ${e.index}`);
});
win.add(buttonBar);
win.open();
```

## Example: Alloy XML Markup

Previous example as an Alloy view.

``` xml
<Alloy>
    <Window id="win">
        <ButtonBar id="buttonBar">
            <!-- The Labels tag sets the ButtonBar.labels property -->
            <Labels>
                <!-- Specify text with node text or the title attribute. -->
                <!-- Can also specify the enabled, image and width attributes. -->
                <Label>One</Label>
                <Label>Two</Label>
                <Label>Three</Label>
            </Labels>
        </ButtonBar>
    </Window>
</Alloy>
```

## Properties

### index

- Type: Number
- Platforms: Android, iPhone, iPad, macOS
- DEPRECATED since 8.0.0. This property has been deprecated in Titanium SDK 8.0.0 as this property has no effect and will be removed in SDK 9.0.0.

Index of the currently selected button.

### labels

- Type: Array<String> | Array<BarItemType>
- Platforms: Android, iPhone, iPad, macOS

Array of labels for the button bar.

The labels can be specified either using an array of strings, in which case
each string defines the title for a button, or using an array of simple
dictionary objects, [BarItemType](https://titaniumsdk.com/docs/sdk/BarItemType.md), which can specify title, image, width and
enabled state for each button.

In Alloy you specify the labels with a nested `<Labels>` element that contains one or more `<Label>` elements.

``` xml
<Alloy>
    <ButtonBar>
        <Labels>
            <!-- Specify text with node text or "title" attribute. -->
            <Label>button 1</Label>
            <Label title="button 2"/>
            <!-- uses images and/or widths -->
            <Label width="40" image="/KS_nav_ui.png"/>
            <!-- set as disabled -->
            <Label enabled="false">disabled</Label>
            <!-- empty labels will print a warning (no properties) -->
            <!-- <Label/> -->
        </Labels>
    </ButtonBar>
</Alloy>
```

### selectedButtonColor

- Type: String | Titanium.UI.Color
- Platforms: iPhone, iPad, macOS
- Since: Titanium SDK 9.0.0
- Requires: iOS 13.0+

Color of selected button, as a color name or hex triplet.

For information about color values, see the "Colors" section of [Titanium.UI](https://titaniumsdk.com/docs/sdk/Titanium.UI.md).

### selectedTextColor

- Type: String | Titanium.UI.Color
- Platforms: iPhone, iPad, macOS
- Since: Titanium SDK 9.0.0

Color of title of button when it is selected, as a color name or hex triplet.

For information about color values, see the "Colors" section of [Titanium.UI](https://titaniumsdk.com/docs/sdk/Titanium.UI.md).

### textColor

- Type: String | Titanium.UI.Color
- Platforms: iPhone, iPad, macOS
- Since: Titanium SDK 9.0.0

Color of title of button, as a color name or hex triplet.

For information about color values, see the "Colors" section of [Titanium.UI](https://titaniumsdk.com/docs/sdk/Titanium.UI.md).

## Events

### click

- Platforms: Android, iPhone, iPad, macOS

Fired when a button is clicked.

Event properties:

- `index` (Number): Index of the clicked button.

## Inherited members

90 members are inherited. Each is documented on the type that declares it.

- [Titanium.Proxy](https://titaniumsdk.com/docs/sdk/13.2.0/Titanium.Proxy.md): `addEventListener`, `apiName`, `applyProperties`, `bubbleParent`, `fireEvent`, `lifecycleContainer`, `removeEventListener`
- [Titanium.UI.View](https://titaniumsdk.com/docs/sdk/13.2.0/Titanium.UI.View.md): `accessibilityDisableLongPress`, `accessibilityHidden`, `accessibilityHint`, `accessibilityLabel`, `accessibilityValue`, `anchorPoint`, `animate`, `animatedCenter`, `backgroundColor`, `backgroundDisabledColor`, `backgroundDisabledImage`, `backgroundFocusedColor`, `backgroundFocusedImage`, `backgroundGradient`, `backgroundImage`, `backgroundLeftCap`, `backgroundRepeat`, `backgroundSelectedColor`, `backgroundSelectedImage`, `backgroundTopCap`, `borderColor`, `borderRadius`, `borderWidth`, `bottom`, `center`, `clearMotionEffects`, `clipMode`, `convertPointToView`, `elevation`, `filterTouchesWhenObscured`, `focus`, `focusable`, `getViewById`, `height`, `hiddenBehavior`, `hide`, `horizontalMotionEffect`, `horizontalWrap`, `id`, `insertAt`, `keepHardwareMode`, `keepScreenOn`, `keypressed`, `layout`, `left`, `longpress`, `opacity`, `overrideCurrentAnimation`, `pinch`, `postlayout`, `previewContext`, `pullBackgroundColor`, `rect`, `right`, `rotate`, `rotation`, `rotationX`, `rotationY`, `scaleX`, `scaleY`, `show`, `size`, `softKeyboardOnFocus`, `stopAnimation`, `tintColor`, `toImage`, `tooltip`, `top`, `touchEnabled`, `touchFeedback`, `touchFeedbackColor`, `transform`, `transitionName`, `translationX`, `translationY`, `translationZ`, `verticalMotionEffect`, `viewShadowColor`, `viewShadowOffset`, `viewShadowRadius`, `visible`, `width`, `zIndex`

---

- This corpus documents Titanium SDK 13.4.1. Anything here that does not name a version describes 13.4.1.
- Titanium is maintained by TiDev. The Appcelerator toolchain is retired: there is no `appc` CLI, no Appcelerator Studio and no hosted build service. The supported CLI is `titanium` on npm, invoked as `ti`.