# Button bar
[](https://github.com/material-components/material-components-ios/issues?q=is%3Aopen+is%3Aissue+label%3Atype%3ABug+label%3A%5BButtonBar%5D)
The Button Bar is a view that represents a list of UIBarButtonItems as horizontally aligned buttons.
## Design & API documentation
## Related components
## Table of contents
- [Overview](#overview)
- [Installation](#installation)
- [Installation with CocoaPods](#installation-with-cocoapods)
- [Importing](#importing)
- [Usage](#usage)
- [Typical use](#typical-use)
- [Supported UIBarButtonItem properties](#supported-uibarbuttonitem-properties)
- [Extensions](#extensions)
- [Theming](#theming)
- - -
## Overview
A Button Bar is similar in concept to a UIToolbar, but Button Bars are **not** a drop-in API
replacement for UIToolbar. Button Bars are slightly more versatile in that one might use a Button
Bar to create a Toolbar or a Navigation Bar (left/right button bars).
Button Bar supports a subset of UIBarButtonItem's properties. Learn more by reading the section on
[UIBarButtonItem properties](#uibarbuttonitem-properties).
## Installation
### Installation with CocoaPods
Add the following to your `Podfile`:
```bash
pod 'MaterialComponents/ButtonBar'
```
Then, run the following command:
```bash
pod install
```
### Importing
To import the component:
#### Swift
```swift
import MaterialComponents.MaterialButtonBar
```
#### Objective-C
```objc
#import "MaterialButtonBar.h"
```
## Usage
### Typical use
#### Swift
```swift
let buttonBar = MDCButtonBar()
let actionItem = UIBarButtonItem(
title: "<# title #>",
style: .done, // ignored
target: self,
action: "<# selector #>"
)
buttonBar.items = [actionItem]
let size = buttonBar.sizeThatFits(self.view.bounds.size)
buttonBar.frame = CGRect(x: <# x #>, y: <# y #>, width: size.width, height: size.height)
self.view.addSubview(buttonBar)
```
#### Objective-C
```objc
MDCButtonBar *buttonBar = [[MDCButtonBar alloc] init];
UIBarButtonItem *actionItem =
[[UIBarButtonItem alloc] initWithTitle:@"<# title #>"
style:UIBarButtonItemStyleDone // ignored
target:self
action:@selector(<# selector #>)];
buttonBar.items = @[ actionItem ];
CGSize size = [buttonBar sizeThatFits:self.view.bounds.size];
CGPoint origin = CGPointZero;
buttonBar.frame = CGRectMake(origin.x, origin.y, size.width, size.height);
[self.view addSubview:buttonBar];
```
### Supported UIBarButtonItem properties
The following properties are taken into consideration when `items` is set and the corresponding
buttons are created.
Changes made to properties marked (observed) will be reflected in the corresponding buttons.
- `title` (observed)
- `image` (observed)
- `enabled` (observed)
- `width`
- `target`
- `action`
- `titleTextAttributesForState:`
TODO(featherless): File bugs to observe the rest of the properties.
Note: in order to make Button Bar reflect changes to not-observed properties you must clear the
MDCButtonBar instance's `items` property and reset it, like so:
#### Swift
```swift
actionItem.target =
let items = buttonBar.items
buttonBar.items = nil
buttonBar.items = items
```
#### Objective-C
```objc
actionItem.target = ;
NSArray *items = buttonBar.items;
buttonBar.items = nil;
buttonBar.items = items;
```
## Extensions
### Theming
MDCButtonBar is intended to be themed through the AppBar component's theming extension. More
information can be found at https://github.com/material-components/material-components-ios/tree/develop/components/AppBar#theming.
