# StepButton

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

The StepButton is a convenient component designed to simplify usage and alignment of buttons with chevrons.

## StepButton

### Example: Step buttons

Step buttons
Previous Next

#### React (tsx)

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

export default () => (
    <div>
        <FormLabel>Step buttons</FormLabel>
        <div className='btn-toolbar'>
            <StepButton direction='previous'>Previous</StepButton>
            <StepButton direction='next' bsStyle='primary'>
                Next
            </StepButton>
        </div>
    </div>
);
```

#### HTML (html)

```html
<div>
    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Step buttons</div>
    <div class="btn-toolbar">
        <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 |
| --- | --- | --- | --- |
| direction | 'next' \| 'previous' | 'next' | Defines the chevron icon for the respective direction. |