Basic example of usage is this:

$this->widget(
    'booster.widgets.TbButtonGroup',
    array(
        'buttons' => array(
            array('label' => 'Left', 'url' => '#'),
            array('label' => 'Middle', 'url' => '#'),
            array('label' => 'Right', 'url' => '#')
        ),
    )
);

Here's all configuration properties which you can set for TbButtonGroup widget.

Justified button groups

$this->widget(
	'booster.widgets.TbButtonGroup',
	array(
		'justified' => true,
		'buttons' => array(
            array('label' => 'Left', 'url' => '#'),
            array('label' => 'Middle', 'url' => '#'),
            array('label' => 'Right', 'url' => '#')
		),
	)
);

Multiple button groups

$this->widget(
    'booster.widgets.TbButtonGroup',
    array(
        'buttons' => array(
            array('label' => '1', 'url' => '#'),
            array('label' => '2', 'url' => '#'),
            array('label' => '3', 'url' => '#'),
            array('label' => '4', 'url' => '#'),
        ),
    )
); echo ' ';
$this->widget(
    'booster.widgets.TbButtonGroup',
    array(
        'buttons' => array(
            array('label' => '5', 'url' => '#'),
            array('label' => '6', 'url' => '#'),
            array('label' => '7', 'url' => '#'),
        ),
    )
); echo ' ';
$this->widget(
    'booster.widgets.TbButtonGroup',
    array(
        'buttons' => array(
            array('label' => '8', 'url' => '#'),
        ),
    )
);

Vertical button groups

Make a set of buttons appear vertically stacked rather than horizontally.

$this->widget(
    'booster.widgets.TbButtonGroup',
    array(
        'stacked' => true,
        'buttons' => array(
            array(
                'buttonType' => 'button',
                'url' => '#',
                'icon' => 'align-left'
            ),
            array(
                'buttonType' => 'button',
                'url' => '#',
                'icon' => 'align-center'
            ),
            array(
                'buttonType' => 'button',
                'url' => '#',
                'icon' => 'align-right'
            ),
            array(
                'buttonType' => 'button',
                'url' => '#',
                'icon' => 'align-justify'
            ),
        ),
    )
);

Radio or checkbox

$this->widget(
    'booster.widgets.TbButtonGroup',
    array(
        'context' => 'primary',
        'toggle' => 'radio',
        'buttons' => array(
            array('label' => 'Lefst', 'icon'=>'arrow-left'),
            array('label' => 'Middle', 'icon'=>'arrow-up'),
            array('label' => 'Right', 'icon'=>'arrow-right'),
        ),
    )
);

In order to display one or the other, configure its toggle attribute.

$this->widget(
    'booster.widgets.TbButtonGroup',
    array(
        'toggle' => 'checkbox',
        'buttons' => array(
            array('label' => 'Left'),
            array('label' => 'Middle'),
            array('label' => 'Right'),
        ),
    )
);

Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

$this->widget(
    'booster.widgets.TbButtonGroup',
    array(
        'size' => 'large',
        'buttons' => array(
            array(
                'label' => 'Action',
                'items' => array(
                    array('label' => 'Action', 'url' => '#'),
                    array('label' => 'Another action', 'url' => '#'),
                    array('label' => 'Something else', 'url' => '#'),
                    '---',
                    array(
                        'label' => 'More options',
                        'items' => array(
                            array(
                                'label' => 'Second level link',
                                'url' => '#'
                            ),
                            array(
                                'label' => 'Second level link',
                                'url' => '#'
                            ),
                            array(
                                'label' => 'Second level link',
                                'url' => '#'
                            ),
                            array(
                                'label' => 'Second level link',
                                'items' => array(
                                    array(
                                        'label' => 'Third level link',
                                        'url' => '#'
                                    ),
                                )
                            ),
                        )
                    ),
                )
            ),
        ),
    )
); echo ' ';
$this->widget(
    'booster.widgets.TbButtonGroup',
    array(
        'size' => 'large',
        'context' => 'primary',
        'buttons' => array(
            array(
                'label' => 'Action',
                'items' => array(
                    array('label' => 'Action', 'url' => '#'),
                    array('label' => 'Another action', 'url' => '#'),
                    array('label' => 'Something else', 'url' => '#'),
                    '---',
                    array('label' => 'Separate link', 'url' => '#'),
                )
            ),
        ),
    )
); echo ' ';
$this->widget(
    'booster.widgets.TbButtonGroup',
    array(
        'size' => 'large',
        'context' => 'danger',
        'buttons' => array(
            array(
                'label' => 'Danger',
                'items' => array(
                    array('label' => 'Action', 'url' => '#'),
                    array('label' => 'Another action', 'url' => '#'),
                    array('label' => 'Something else', 'url' => '#'),
                    '---',
                    array('label' => 'Separate link', 'url' => '#'),
                )
            ),
        ),
    )
); echo ' ';
$this->widget(
    'booster.widgets.TbButtonGroup',
    array(
        'size' => 'large',
        'context' => 'success',
        'buttons' => array(
            array(
                'label' => 'Success',
                'items' => array(
                    array('label' => 'Action', 'url' => '#'),
                    array('label' => 'Another action', 'url' => '#'),
                    array('label' => 'Something else', 'url' => '#'),
                    '---',
                    array('label' => 'Separate link', 'url' => '#'),
                )
            ),
        ),
    )
); echo ' ';
$this->widget(
    'booster.widgets.TbButtonGroup',
    array(
        'size' => 'large',
        'context' => 'info',
        'buttons' => array(
            array(
                'label' => 'Info',
                'items' => array(
                    array('label' => 'Action', 'url' => '#'),
                    array('label' => 'Another action', 'url' => '#'),
                    array('label' => 'Something else', 'url' => '#'),
                    '---',
                    array('label' => 'Separate link', 'url' => '#'),
                )
            ),
        ),
    )
); echo ' ';
$this->widget(
    'booster.widgets.TbButtonGroup',
    array(
        'size' => 'large',
        'context' => 'warning',
        'buttons' => array(
            array(
                'label' => 'Warning',
                'items' => array(
                    array('label' => 'Action', 'url' => '#'),
                    array('label' => 'Another action', 'url' => '#'),
                    array('label' => 'Something else', 'url' => '#'),
                    '---',
                    array('label' => 'Separate link', 'url' => '#'),
                )
            ),
        ),
    )
); echo ' ';

Split button dropdowns

Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.

$this->widget(
    'booster.widgets.TbButtonGroup',
    array(
        'context' => 'default',
        // '', 'primary', 'info', 'success', 'warning', 'danger' or 'inverse'
        'buttons' => array(
            array('label' => 'Action', 'url' => '#'),
            array(
                'items' => array(
                    array('label' => 'Action', 'url' => '#'),
                    array('label' => 'Another action', 'url' => '#'),
                    array('label' => 'Something else', 'url' => '#'),
                    '---',
                    array('label' => 'Separate link', 'url' => '#'),
                )
            ),
        ),
    )
); echo ' ';
$this->widget(
    'booster.widgets.TbButtonGroup',
    array(
        'context' => 'primary',
        // '', 'primary', 'info', 'success', 'warning', 'danger' or 'inverse'
        'buttons' => array(
            array('label' => 'Action', 'url' => '#'),
            array(
                'items' => array(
                    array('label' => 'Action', 'url' => '#'),
                    array('label' => 'Another action', 'url' => '#'),
                    array('label' => 'Something else', 'url' => '#'),
                    '---',
                    array('label' => 'Separate link', 'url' => '#'),
                )
            ),
        ),
    )
); echo ' ';
$this->widget(
    'booster.widgets.TbButtonGroup',
    array(
        'context' => 'danger',
        'buttons' => array(
            array('label' => 'Action', 'url' => '#'),
            array(
                'items' => array(
                    array('label' => 'Action', 'url' => '#'),
                    array('label' => 'Another action', 'url' => '#'),
                    array('label' => 'Something else', 'url' => '#'),
                    '---',
                    array('label' => 'Separate link', 'url' => '#'),
                )
            ),
        ),
    )
); echo ' ';
$this->widget(
    'booster.widgets.TbButtonGroup',
    array(
        'context' => 'warning',
        'buttons' => array(
            array('label' => 'Action', 'url' => '#'),
            array(
                'items' => array(
                    array('label' => 'Action', 'url' => '#'),
                    array('label' => 'Another action', 'url' => '#'),
                    array('label' => 'Something else', 'url' => '#'),
                    '---',
                    array('label' => 'Separate link', 'url' => '#'),
                )
            ),
        ),
    )
); echo ' ';
$this->widget(
    'booster.widgets.TbButtonGroup',
    array(
        'context' => 'success',
        'buttons' => array(
            array('label' => 'Action', 'url' => '#'),
            array(
                'items' => array(
                    array('label' => 'Action', 'url' => '#'),
                    array('label' => 'Another action', 'url' => '#'),
                    array('label' => 'Something else', 'url' => '#'),
                    '---',
                    array('label' => 'Separate link', 'url' => '#'),
                )
            ),
        ),
    )
); echo ' ';
$this->widget(
    'booster.widgets.TbButtonGroup',
    array(
        'context' => 'info',
        'buttons' => array(
            array('label' => 'Action', 'url' => '#'),
            array(
                'items' => array(
                    array('label' => 'Action', 'url' => '#'),
                    array('label' => 'Another action', 'url' => '#'),
                    array('label' => 'Something else', 'url' => '#'),
                    '---',
                    array('label' => 'Separate link', 'url' => '#'),
                )
            ),
        ),
    )
); echo ' ';

Sizes

Utilize the size property large, small, or extra_small for sizing. Button dropdowns work at any of them.

$this->widget(
    'booster.widgets.TbButtonGroup',
array(
        'size' => 'large',
        'buttons' => array(
            array(
                'label' => 'Action',
                'items' => array(
                    array('label' => 'Action', 'url' => '#'),
                    array('label' => 'Another action', 'url' => '#'),
                    array('label' => 'Something else', 'url' => '#'),
                    '---',
                    array(
                        'label' => 'More options',
                        'items' => array(
                            array(
                                'label' => 'Second level link',
                                'url' => '#'
                            ),
                            array(
                                'label' => 'Second level link',
                                'url' => '#'
                            ),
                            array(
                                'label' => 'Second level link',
                                'url' => '#'
                            ),
                            array(
                                'label' => 'Second level link',
                                'items' => array(
                                    array(
                                        'label' => 'Third level link',
                                        'url' => '#'
                                    ),
                                )
                            ),
                        )
                    ),
                )
            ),
        ),
    )
); echo ' ';
$this->widget(
    'booster.widgets.TbButtonGroup',
    array(
        'buttons' => array(
            array(
                'label' => 'Action',
                'items' => array(
                    array('label' => 'Action', 'url' => '#'),
                    array('label' => 'Another action', 'url' => '#'),
                    array('label' => 'Something else', 'url' => '#'),
                    '---',
                    array(
                        'label' => 'More options',
                        'items' => array(
                            array(
                                'label' => 'Second level link',
                                'url' => '#'
                            ),
                            array(
                                'label' => 'Second level link',
                                'url' => '#'
                            ),
                            array(
                                'label' => 'Second level link',
                                'url' => '#'
                            ),
                            array(
                                'label' => 'Second level link',
                                'items' => array(
                                    array(
                                        'label' => 'Third level link',
                                        'url' => '#'
                                    ),
                                )
                            ),
                        )
                    ),
                )
            ),
        ),
    )
); echo ' ';
$this->widget(
    'booster.widgets.TbButtonGroup',
    array(
        'size' => 'small',
        'buttons' => array(
            array(
                'label' => 'Action',
                'items' => array(
                    array('label' => 'Action', 'url' => '#'),
                    array('label' => 'Another action', 'url' => '#'),
                    array('label' => 'Something else', 'url' => '#'),
                    '---',
                    array(
                        'label' => 'More options',
                        'items' => array(
                            array(
                                'label' => 'Second level link',
                                'url' => '#'
                            ),
                            array(
                                'label' => 'Second level link',
                                'url' => '#'
                            ),
                            array(
                                'label' => 'Second level link',
                                'url' => '#'
                            ),
                            array(
                                'label' => 'Second level link',
                                'items' => array(
                                    array(
                                        'label' => 'Third level link',
                                        'url' => '#'
                                    ),
                                )
                            ),
                        )
                    ),
                )
            ),
        ),
    )
); echo ' ';
$this->widget(
    'booster.widgets.TbButtonGroup',
    array(
        'size' => 'extra_small',
        'buttons' => array(
            array(
                'label' => 'Action',
                'items' => array(
                    array('label' => 'Action', 'url' => '#'),
                    array('label' => 'Another action', 'url' => '#'),
                    array('label' => 'Something else', 'url' => '#'),
                    '---',
                    array(
                        'label' => 'More options',
                        'items' => array(
                            array(
                                'label' => 'Second level link',
                                'url' => '#'
                            ),
                            array(
                                'label' => 'Second level link',
                                'url' => '#'
                            ),
                            array(
                                'label' => 'Second level link',
                                'url' => '#'
                            ),
                            array(
                                'label' => 'Second level link',
                                'items' => array(
                                    array(
                                        'label' => 'Third level link',
                                        'url' => '#'
                                    ),
                                )
                            ),
                        )
                    ),
                )
            ),
        ),
    )
); echo ' ';

Dropup menus

Dropdown menus can also be toggled from the bottom up by adding a single class to the htmlOptions attribute.

$this->widget(
    'booster.widgets.TbButtonGroup',
    array(
        'htmlOptions' => array('class' => 'dropup'),
        'buttons' => array(
            array('label' => 'Action', 'url' => '#'),
            array(
                'items' => array(
                    array('label' => 'Action', 'url' => '#'),
                    array('label' => 'Another action', 'url' => '#'),
                    array('label' => 'Something else', 'url' => '#'),
                    '---',
                    array('label' => 'Separate link', 'url' => '#'),
                )
            ),
        ),
    )
);