# ButtonToolbar

*Category:* Components
*Section:* Interaction
*Source:* https://uikit.developers.rio.cloud/#/components/buttonToolbar
*Captured:* 2026-04-27T14:57:14.185Z

The ButtonToolbar is a utility component designed to simplify usage and alignment. Its purpose is to ensure consistent spacing.

## ButtonToolbar

### Example: ButtonToolbar

ButtonToolbar
Button Button

ButtonToolbar centered
Cancel Save changes

ButtonToolbar right aligned
Cancel Save changes

ButtonToolbar space between
Previous Next

#### React (tsx)

```tsx
import ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';
import Divider from '@rio-cloud/rio-uikit/Divider';
import Button from '@rio-cloud/rio-uikit/Button';
import StepButton from '@rio-cloud/rio-uikit/StepButton';
import FormLabel from '@rio-cloud/rio-uikit/FormLabel';

export default () => (
    <div className='max-width-300'>
        <FormLabel>ButtonToolbar</FormLabel>
        <ButtonToolbar>
            <Button>Button</Button>
            <Button bsStyle='primary'>Button</Button>
        </ButtonToolbar>

        <Divider />

        <FormLabel>ButtonToolbar centered</FormLabel>
        <ButtonToolbar alignment='center'>
            <Button>Cancel</Button>
            <Button bsStyle='primary'>Save changes</Button>
        </ButtonToolbar>

        <Divider />

        <FormLabel>ButtonToolbar right aligned</FormLabel>
        <ButtonToolbar alignment='right'>
            <Button>Cancel</Button>
            <Button bsStyle='primary'>Save changes</Button>
        </ButtonToolbar>

        <Divider />

        <FormLabel>ButtonToolbar space between</FormLabel>
        <ButtonToolbar alignment='space-between'>
            <StepButton direction='previous'>Previous</StepButton>
            <StepButton direction='next' bsStyle='primary'>
                Next
            </StepButton>
        </ButtonToolbar>
    </div>
);
```

#### HTML (html)

```html
<div class="max-width-300">
    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">ButtonToolbar</div>
    <div class="btn-toolbar">
        <button type="button" class="btn btn-default btn-component" tabindex="0">Button</button>
        <button type="button" class="btn btn-primary btn-component" tabindex="0">Button</button>
    </div>
    <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
        <div class="divider-line bg-light" style="width: 100%; height: 1px;">
        </div>
    </div>
    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">ButtonToolbar centered</div>
    <div class="btn-toolbar justify-content-center">
        <button type="button" class="btn btn-default btn-component" tabindex="0">Cancel</button>
        <button type="button" class="btn btn-primary btn-component" tabindex="0">Save changes</button>
    </div>
    <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
        <div class="divider-line bg-light" style="width: 100%; height: 1px;">
        </div>
    </div>
    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">ButtonToolbar right aligned</div>
    <div class="btn-toolbar justify-content-end">
        <button type="button" class="btn btn-default btn-component" tabindex="0">Cancel</button>
        <button type="button" class="btn btn-primary btn-component" tabindex="0">Save changes</button>
    </div>
    <div class="Divider position-relative width-100pct" style="padding-top: 15px; padding-bottom: 15px;">
        <div class="divider-line bg-light" style="width: 100%; height: 1px;">
        </div>
    </div>
    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">ButtonToolbar space between</div>
    <div class="btn-toolbar justify-content-between">
        <button type="button" class="btn btn-default btn-component" tabindex="0">
            <span class="rioglyph rioglyph-chevron-left">
            </span>Previous</button>
        <button type="button" class="btn btn-primary btn-icon-right btn-component" tabindex="0">
            <span class="rioglyph rioglyph-chevron-right">
            </span>Next</button>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| alignment | 'left' \| 'right' \| 'center' \| 'space-between' | — | Align buttons to a defined side or set them apart. |
| className | string | — | Additional classes set to the outer element. |