# Button

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

The button component is the React equivalent to the normal HTML button with some To check out the HTML version click here: Buttons

## Button

### Example: Standard buttons

Standard buttons
Default Primary Secondary Success Info Warning Danger Muted filled Muted
Disabled buttons
Default Primary Secondary Success Info Warning Danger Muted filled Muted
Button sizes
Extra Small Small Medium Large
Icon only buttons

#### React (tsx)

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

export default () => (
    <div>
        <FormLabel>Standard buttons</FormLabel>
        <ButtonToolbar>
            <Button iconName='rioglyph-truck'>Default</Button>
            <Button bsStyle={Button.PRIMARY} iconName='rioglyph-heart'>
                Primary
            </Button>
            <Button bsStyle={Button.SECONDARY} iconName='rioglyph-poi'>
                Secondary
            </Button>
            <Button bsStyle={Button.SUCCESS} iconName='rioglyph-thumbs-up'>
                Success
            </Button>
            <Button bsStyle={Button.INFO} iconName='rioglyph-info-sign'>
                Info
            </Button>
            <Button bsStyle={Button.WARNING} iconName='rioglyph-warning-sign'>
                Warning
            </Button>
            <Button bsStyle={Button.DANGER} iconName='rioglyph-error-sign'>
                Danger
            </Button>
            <Button bsStyle={Button.MUTED_FILLED} iconName='rioglyph-cog'>
                Muted filled
            </Button>
            <Button bsStyle={Button.MUTED} iconName='rioglyph-heart'>
                Muted
            </Button>
        </ButtonToolbar>

        <FormLabel className='margin-top-15'>Disabled buttons</FormLabel>
        <ButtonToolbar>
            <Button disabled iconName='rioglyph-truck'>
                Default
            </Button>
            <Button bsStyle={Button.PRIMARY} disabled iconName='rioglyph-heart'>
                Primary
            </Button>
            <Button bsStyle={Button.SECONDARY} disabled iconName='rioglyph-poi'>
                Secondary
            </Button>
            <Button bsStyle={Button.SUCCESS} disabled iconName='rioglyph-thumbs-up'>
                Success
            </Button>
            <Button bsStyle={Button.INFO} disabled iconName='rioglyph-info-sign'>
                Info
            </Button>
            <Button bsStyle={Button.WARNING} disabled iconName='rioglyph-warning-sign'>
                Warning
            </Button>
            <Button bsStyle={Button.DANGER} disabled iconName='rioglyph-error-sign'>
                Danger
            </Button>
            <Button bsStyle={Button.MUTED_FILLED} disabled iconName='rioglyph-cog'>
                Muted filled
            </Button>
            <Button bsStyle={Button.MUTED} disabled iconName='rioglyph-heart'>
                Muted
            </Button>
        </ButtonToolbar>

        <FormLabel className='margin-top-15'>Button sizes</FormLabel>
        <ButtonToolbar>
            <Button bsSize={Button.XS} iconName='rioglyph-truck'>
                Extra Small
            </Button>
            <Button bsStyle={Button.PRIMARY} bsSize={Button.SM} iconName='rioglyph-heart'>
                Small
            </Button>
            <Button bsStyle={Button.SUCCESS} bsSize={Button.MD} iconName='rioglyph-thumbs-up'>
                Medium
            </Button>
            <Button
                bsStyle={Button.INFO}
                bsSize={Button.LG}
                onClick={() => console.log('button clicked')}
                iconName='rioglyph-info-sign'
            >
                Large
            </Button>
        </ButtonToolbar>

        <FormLabel className='margin-top-15'>Icon only buttons</FormLabel>
        <ButtonToolbar>
            <Button iconOnly iconName='rioglyph-truck' />
            <Button bsStyle={Button.PRIMARY} iconOnly iconName='rioglyph-heart' />
            <Button bsStyle={Button.SUCCESS} iconOnly iconName='rioglyph-thumbs-up' />
            <Button bsStyle={Button.INFO} iconOnly iconName='rioglyph-status-driving' />
            <Button bsStyle={Button.WARNING} iconOnly iconName='rioglyph-warning-sign' />
            <Button bsStyle={Button.DANGER} iconOnly iconName='rioglyph-error-sign' />
            <Button bsStyle={Button.MUTED_FILLED} iconOnly iconName='rioglyph-cog' />
            <Button bsStyle={Button.MUTED} iconOnly iconName='rioglyph-heart' />
        </ButtonToolbar>
    </div>
);
```

#### HTML (html)

```html
<div>
    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Standard buttons</div>
    <div class="btn-toolbar">
        <button type="button" class="btn btn-default btn-component" tabindex="0">
            <span class="rioglyph rioglyph-truck">
            </span>Default</button>
        <button type="button" class="btn btn-primary btn-component" tabindex="0">
            <span class="rioglyph rioglyph-heart">
            </span>Primary</button>
        <button type="button" class="btn btn-secondary btn-component" tabindex="0">
            <span class="rioglyph rioglyph-poi">
            </span>Secondary</button>
        <button type="button" class="btn btn-success btn-component" tabindex="0">
            <span class="rioglyph rioglyph-thumbs-up">
            </span>Success</button>
        <button type="button" class="btn btn-info btn-component" tabindex="0">
            <span class="rioglyph rioglyph-info-sign">
            </span>Info</button>
        <button type="button" class="btn btn-warning btn-component" tabindex="0">
            <span class="rioglyph rioglyph-warning-sign">
            </span>Warning</button>
        <button type="button" class="btn btn-danger btn-component" tabindex="0">
            <span class="rioglyph rioglyph-error-sign">
            </span>Danger</button>
        <button type="button" class="btn btn-muted-filled btn-component" tabindex="0">
            <span class="rioglyph rioglyph-cog">
            </span>Muted filled</button>
        <button type="button" class="btn btn-muted btn-component" tabindex="0">
            <span class="rioglyph rioglyph-heart">
            </span>Muted</button>
    </div>
    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 margin-top-15">Disabled buttons</div>
    <div class="btn-toolbar">
        <button type="button" class="btn btn-default btn-component" disabled="" tabindex="0">
            <span class="rioglyph rioglyph-truck">
            </span>Default</button>
        <button type="button" class="btn btn-primary btn-component" disabled="" tabindex="0">
            <span class="rioglyph rioglyph-heart">
            </span>Primary</button>
        <button type="button" class="btn btn-secondary btn-component" disabled="" tabindex="0">
            <span class="rioglyph rioglyph-poi">
            </span>Secondary</button>
        <button type="button" class="btn btn-success btn-component" disabled="" tabindex="0">
            <span class="rioglyph rioglyph-thumbs-up">
            </span>Success</button>
        <button type="button" class="btn btn-info btn-component" disabled="" tabindex="0">
            <span class="rioglyph rioglyph-info-sign">
            </span>Info</button>
        <button type="button" class="btn btn-warning btn-component" disabled="" tabindex="0">
            <span class="rioglyph rioglyph-warning-sign">
            </span>Warning</button>
        <button type="button" class="btn btn-danger btn-component" disabled="" tabindex="0">
            <span class="rioglyph rioglyph-error-sign">
            </span>Danger</button>
        <button type="button" class="btn btn-muted-filled btn-component" disabled="" tabindex="0">
            <span class="rioglyph rioglyph-cog">
            </span>Muted filled</button>
        <button type="button" class="btn btn-muted btn-component" disabled="" tabindex="0">
            <span class="rioglyph rioglyph-heart">
            </span>Muted</button>
    </div>
    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 margin-top-15">Button sizes</div>
    <div class="btn-toolbar">
        <button type="button" class="btn btn-default btn-xs btn-component" tabindex="0">
            <span class="rioglyph rioglyph-truck">
            </span>Extra Small</button>
        <button type="button" class="btn btn-primary btn-sm btn-component" tabindex="0">
            <span class="rioglyph rioglyph-heart">
            </span>Small</button>
        <button type="button" class="btn btn-success btn-md btn-component" tabindex="0">
            <span class="rioglyph rioglyph-thumbs-up">
            </span>Medium</button>
        <button type="button" class="btn btn-info btn-lg btn-component" tabindex="0">
            <span class="rioglyph rioglyph-info-sign">
            </span>Large</button>
    </div>
    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 margin-top-15">Icon only buttons</div>
    <div class="btn-toolbar">
        <button type="button" class="btn btn-default btn-icon-only btn-component" tabindex="0">
            <span class="rioglyph rioglyph-truck">
            </span>
        </button>
        <button type="button" class="btn btn-primary btn-icon-only btn-component" tabindex="0">
            <span class="rioglyph rioglyph-heart">
            </span>
        </button>
        <button type="button" class="btn btn-success btn-icon-only btn-component" tabindex="0">
            <span class="rioglyph rioglyph-thumbs-up">
            </span>
        </button>
        <button type="button" class="btn btn-info btn-icon-only btn-component" tabindex="0">
            <span class="rioglyph rioglyph-status-driving">
            </span>
        </button>
        <button type="button" class="btn btn-warning btn-icon-only btn-component" tabindex="0">
            <span class="rioglyph rioglyph-warning-sign">
            </span>
        </button>
        <button type="button" class="btn btn-danger btn-icon-only btn-component" tabindex="0">
            <span class="rioglyph rioglyph-error-sign">
            </span>
        </button>
        <button type="button" class="btn btn-muted-filled btn-icon-only btn-component" tabindex="0">
            <span class="rioglyph rioglyph-cog">
            </span>
        </button>
        <button type="button" class="btn btn-muted btn-icon-only btn-component" tabindex="0">
            <span class="rioglyph rioglyph-heart">
            </span>
        </button>
    </div>
</div>
```

#### Props: Base button props

### Base button props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| disabled | boolean | false | Whether the button should be disabled. |
| active | boolean | false | Set the button toggled. Should be used in combination with "asToggle" prop. |
| iconOnly | boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |
| iconRight | boolean | false | Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side. |
| iconName | string | — | Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code. |
| multiline | boolean | false | Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only. |
| block | boolean | false | Defines whether the button takes up the full width of the parent element. |
| bsStyle | BUTTON_STYLE | 'default' | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |
| bsSize | BUTTON_SIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |
| variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |
| noRippleEffect | boolean | — | Whether the "ripple" effect should be suppressed on this button. |
| autoTrackingKey | string | — | Optional key used to generate automatic GA tracking attributes when no explicit tracking attributes are provided. Resulting label format: button::<autoTrackingKey>. |
| tabIndex | number | 0 | Number of the index used for keyboard support. |
| className | string | — | Additional classes to be set on the button element. |

#### Props: Regular button

### Regular button

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| asToggle | false | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |
| onClick | (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | — | Callback function triggered when clicking the button. |
| type | 'button' \| 'submit | 'button' | Defines the type of the button. This may be used for form submit buttons. |

#### Props: ToggleButton

### ToggleButton

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| asToggle | true | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |
| onClick | (value: boolean) => void | — | Callback function triggered when clicking the button. |

#### Props: Link element buttons

### Link element buttons

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| as | 'a' | — | Defines this component as a link element. |
| type | never | — | Native button type is not supported when using as="a". |
| href | string | — | Defines the destination URL for the link button. |
| asToggle | false | false | Toggle behavior is not supported when using as="a". |
| onClick | (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void | — | Callback function triggered when clicking the link. |

### Example: Buttons with link styles

Buttons with link styles
Primary Success Info Warning Danger
Button with link styles - inline

This is an example for an Inline link button.
Note Link styled buttons can also be used within text blocks by setting the variant type to Button.VARIANT_LINK_INLINE .

#### React (tsx)

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

export default () => (
    <div>
        <FormLabel>Buttons with link styles</FormLabel>
        <ButtonToolbar>
            <Button bsStyle={Button.PRIMARY} variant={Button.VARIANT_LINK} iconName='rioglyph-heart'>
                Primary
            </Button>
            <Button bsStyle={Button.SUCCESS} variant={Button.VARIANT_LINK} iconName='rioglyph-thumbs-up'>
                Success
            </Button>
            <Button bsStyle={Button.INFO} variant={Button.VARIANT_LINK} iconName='rioglyph-info-sign'>
                Info
            </Button>
            <Button bsStyle={Button.WARNING} variant={Button.VARIANT_LINK} iconName='rioglyph-warning-sign'>
                Warning
            </Button>
            <Button bsStyle={Button.DANGER} variant={Button.VARIANT_LINK} iconName='rioglyph-error-sign'>
                Danger
            </Button>
        </ButtonToolbar>
        <div>
            <FormLabel className='margin-top-25'>Button with link styles - inline</FormLabel>
        </div>
        <div className='display-inline-flex gap-4'>
            This is an example for an{' '}
            <Button bsStyle={Button.PRIMARY} variant={Button.VARIANT_LINK_INLINE} iconName='rioglyph-new-window'>
                Inline link
            </Button>{' '}
            button.
        </div>
        <p className='margin-top-25'>
            <span className='label label-info label-condensed margin-right-5'>Note</span> Link styled buttons can also
            be used within text blocks by setting the variant type to{' '}
            <code className='code'>Button.VARIANT_LINK_INLINE</code>.
        </p>
    </div>
);
```

#### HTML (html)

```html
<div>
    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Buttons with link styles</div>
    <div class="btn-toolbar">
        <button type="button" class="btn btn-primary btn-link btn-component" tabindex="0">
            <span class="rioglyph rioglyph-heart">
            </span>Primary</button>
        <button type="button" class="btn btn-success btn-link btn-component" tabindex="0">
            <span class="rioglyph rioglyph-thumbs-up">
            </span>Success</button>
        <button type="button" class="btn btn-info btn-link btn-component" tabindex="0">
            <span class="rioglyph rioglyph-info-sign">
            </span>Info</button>
        <button type="button" class="btn btn-warning btn-link btn-component" tabindex="0">
            <span class="rioglyph rioglyph-warning-sign">
            </span>Warning</button>
        <button type="button" class="btn btn-danger btn-link btn-component" tabindex="0">
            <span class="rioglyph rioglyph-error-sign">
            </span>Danger</button>
    </div>
    <div>
        <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 margin-top-25">Button with link styles - inline</div>
    </div>
    <div class="display-inline-flex gap-4">This is an example for an <button type="button" class="btn btn-primary btn-link btn-link-inline btn-component" tabindex="0">
            <span class="rioglyph rioglyph-new-window">
            </span>Inline link</button> button.</div>
    <p class="margin-top-25">
        <span class="label label-info label-condensed margin-right-5">Note</span> Link styled buttons can also be used within text blocks by setting the variant type to <code class="code">Button.VARIANT_LINK_INLINE</code>.
    </p>
</div>
```

#### Props: Base button props

### Base button props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| disabled | boolean | false | Whether the button should be disabled. |
| active | boolean | false | Set the button toggled. Should be used in combination with "asToggle" prop. |
| iconOnly | boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |
| iconRight | boolean | false | Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side. |
| iconName | string | — | Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code. |
| multiline | boolean | false | Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only. |
| block | boolean | false | Defines whether the button takes up the full width of the parent element. |
| bsStyle | BUTTON_STYLE | 'default' | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |
| bsSize | BUTTON_SIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |
| variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |
| noRippleEffect | boolean | — | Whether the "ripple" effect should be suppressed on this button. |
| autoTrackingKey | string | — | Optional key used to generate automatic GA tracking attributes when no explicit tracking attributes are provided. Resulting label format: button::<autoTrackingKey>. |
| tabIndex | number | 0 | Number of the index used for keyboard support. |
| className | string | — | Additional classes to be set on the button element. |

#### Props: Regular button

### Regular button

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| asToggle | false | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |
| onClick | (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | — | Callback function triggered when clicking the button. |
| type | 'button' \| 'submit | 'button' | Defines the type of the button. This may be used for form submit buttons. |

#### Props: ToggleButton

### ToggleButton

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| asToggle | true | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |
| onClick | (value: boolean) => void | — | Callback function triggered when clicking the button. |

#### Props: Link element buttons

### Link element buttons

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| as | 'a' | — | Defines this component as a link element. |
| type | never | — | Native button type is not supported when using as="a". |
| href | string | — | Defines the destination URL for the link button. |
| asToggle | false | false | Toggle behavior is not supported when using as="a". |
| onClick | (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void | — | Callback function triggered when clicking the link. |

### Example: Button group

Button group

Button with tooltips
Button with Tooltip Disabled Button with Tooltip
Block button
Block button
Multiline button
This is a multiline button with a lot of Text
Toggle button
Toggle me
Add something / take picture button example

#### React (tsx)

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

export default () => (
    <div>
        <FormLabel>Button group</FormLabel>
        <ButtonToolbar>
            <div className='btn-group'>
                <Button iconName='rioglyph-cloud-download' iconOnly />
                <Button iconName='rioglyph-cloud-upload' iconOnly />
                <Button iconName='rioglyph-cog' iconOnly />
            </div>
        </ButtonToolbar>

        <FormLabel className='margin-top-15'>Button with tooltips</FormLabel>
        <ButtonToolbar>
            <SimpleTooltip content='Uhh, click me!' width='auto' placement='bottom'>
                <Button bsStyle={Button.INFO}>Button with Tooltip</Button>
            </SimpleTooltip>

            <SimpleTooltip content='This is not the button you are looking for' placement='top'>
                <span className='cursor-not-allowed'>
                    <Button bsStyle={Button.INFO} disabled>
                        Disabled Button with Tooltip
                    </Button>
                </span>
            </SimpleTooltip>
        </ButtonToolbar>

        <FormLabel className='margin-top-15'>Block button</FormLabel>
        <ButtonToolbar className='max-width-500'>
            <Button block>Block button</Button>
        </ButtonToolbar>

        <FormLabel className='margin-top-15'>Multiline button</FormLabel>
        <ButtonToolbar className='max-width-200'>
            <Button bsStyle={Button.PRIMARY} bsSize={Button.LG} multiline>
                This is a multiline button with a lot of Text
            </Button>
        </ButtonToolbar>

        <FormLabel className='margin-top-15'>Toggle button</FormLabel>
        <ButtonToolbar className='max-width-200'>
            <Button asToggle>Toggle me</Button>
        </ButtonToolbar>

        <FormLabel className='margin-top-15'>Add something / take picture button example</FormLabel>
        <ButtonToolbar className='max-width-200'>
            <Button
                bsStyle='unstyled'
                className={
                    'height-70 width-60 bg-lightest border border-style-dashed ' +
                    'border-width-1 border-color-light text-color-light hover-text-color-darker'
                }
            >
                <span className='rioglyph rioglyph-plus-sign margin-0 text-size-20' />
            </Button>
        </ButtonToolbar>
    </div>
);
```

#### HTML (html)

```html
<div>
    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Button group</div>
    <div class="btn-toolbar">
        <div class="btn-group">
            <button type="button" class="btn btn-default btn-icon-only btn-component" tabindex="0">
                <span class="rioglyph rioglyph-cloud-download">
                </span>
            </button>
            <button type="button" class="btn btn-default btn-icon-only btn-component" tabindex="0">
                <span class="rioglyph rioglyph-cloud-upload">
                </span>
            </button>
            <button type="button" class="btn btn-default btn-icon-only btn-component" tabindex="0">
                <span class="rioglyph rioglyph-cog">
                </span>
            </button>
        </div>
    </div>
    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 margin-top-15">Button with tooltips</div>
    <div class="btn-toolbar">
        <button type="button" class="btn btn-info btn-component" tabindex="0">Button with Tooltip</button>
        <span class="cursor-not-allowed">
            <button type="button" class="btn btn-info btn-component" disabled="" tabindex="0">Disabled Button with Tooltip</button>
        </span>
    </div>
    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 margin-top-15">Block button</div>
    <div class="max-width-500 btn-toolbar">
        <button type="button" class="btn btn-default btn-block btn-component" tabindex="0">Block button</button>
    </div>
    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 margin-top-15">Multiline button</div>
    <div class="max-width-200 btn-toolbar">
        <button type="button" class="btn btn-primary btn-lg btn-multiline btn-component" tabindex="0">This is a multiline button with a lot of Text</button>
    </div>
    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 margin-top-15">Toggle button</div>
    <div class="max-width-200 btn-toolbar">
        <button type="button" class="btn btn-default btn-toggle btn-component" tabindex="0">Toggle me</button>
    </div>
    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 margin-top-15">Add something / take picture button example</div>
    <div class="max-width-200 btn-toolbar">
        <button type="button" class="btn btn-unstyled btn-component height-70 width-60 bg-lightest border border-style-dashed border-width-1 border-color-light text-color-light hover-text-color-darker" tabindex="0">
            <span class="rioglyph rioglyph-plus-sign margin-0 text-size-20">
            </span>
        </button>
    </div>
</div>
```

#### Props: Base button props

### Base button props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| disabled | boolean | false | Whether the button should be disabled. |
| active | boolean | false | Set the button toggled. Should be used in combination with "asToggle" prop. |
| iconOnly | boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |
| iconRight | boolean | false | Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side. |
| iconName | string | — | Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code. |
| multiline | boolean | false | Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only. |
| block | boolean | false | Defines whether the button takes up the full width of the parent element. |
| bsStyle | BUTTON_STYLE | 'default' | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |
| bsSize | BUTTON_SIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |
| variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |
| noRippleEffect | boolean | — | Whether the "ripple" effect should be suppressed on this button. |
| autoTrackingKey | string | — | Optional key used to generate automatic GA tracking attributes when no explicit tracking attributes are provided. Resulting label format: button::<autoTrackingKey>. |
| tabIndex | number | 0 | Number of the index used for keyboard support. |
| className | string | — | Additional classes to be set on the button element. |

#### Props: Regular button

### Regular button

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| asToggle | false | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |
| onClick | (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | — | Callback function triggered when clicking the button. |
| type | 'button' \| 'submit | 'button' | Defines the type of the button. This may be used for form submit buttons. |

#### Props: ToggleButton

### ToggleButton

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| asToggle | true | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |
| onClick | (value: boolean) => void | — | Callback function triggered when clicking the button. |

#### Props: Link element buttons

### Link element buttons

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| as | 'a' | — | Defines this component as a link element. |
| type | never | — | Native button type is not supported when using as="a". |
| href | string | — | Defines the destination URL for the link button. |
| asToggle | false | false | Toggle behavior is not supported when using as="a". |
| onClick | (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void | — | Callback function triggered when clicking the link. |

### Example: Outlined buttons (transparent)

Outlined buttons (transparent)
Default Primary Success Info Warning Danger Muted filled Muted

#### React (tsx)

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

export default () => (
    <div>
        <FormLabel>Outlined buttons (transparent)</FormLabel>
        <ButtonToolbar>
            <Button variant={Button.VARIANT_OUTLINE} iconName='rioglyph-truck'>
                Default
            </Button>
            <Button bsStyle={Button.PRIMARY} variant={Button.VARIANT_OUTLINE} iconName='rioglyph-heart'>
                Primary
            </Button>
            <Button bsStyle={Button.SUCCESS} variant={Button.VARIANT_OUTLINE} iconName='rioglyph-thumbs-up'>
                Success
            </Button>
            <Button bsStyle={Button.INFO} variant={Button.VARIANT_OUTLINE} iconName='rioglyph-info-sign'>
                Info
            </Button>
            <Button bsStyle={Button.WARNING} variant={Button.VARIANT_OUTLINE} iconName='rioglyph-warning-sign'>
                Warning
            </Button>
            <Button bsStyle={Button.DANGER} variant={Button.VARIANT_OUTLINE} iconName='rioglyph-error-sign'>
                Danger
            </Button>
            <Button bsStyle={Button.MUTED_FILLED} variant={Button.VARIANT_OUTLINE} iconName='rioglyph-cog'>
                Muted filled
            </Button>
            <Button bsStyle={Button.MUTED} variant={Button.VARIANT_OUTLINE} iconName='rioglyph-heart'>
                Muted
            </Button>
        </ButtonToolbar>
    </div>
);
```

#### HTML (html)

```html
<div>
    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Outlined buttons (transparent)</div>
    <div class="btn-toolbar">
        <button type="button" class="btn btn-default btn-outline btn-component" tabindex="0">
            <span class="rioglyph rioglyph-truck">
            </span>Default</button>
        <button type="button" class="btn btn-primary btn-outline btn-component" tabindex="0">
            <span class="rioglyph rioglyph-heart">
            </span>Primary</button>
        <button type="button" class="btn btn-success btn-outline btn-component" tabindex="0">
            <span class="rioglyph rioglyph-thumbs-up">
            </span>Success</button>
        <button type="button" class="btn btn-info btn-outline btn-component" tabindex="0">
            <span class="rioglyph rioglyph-info-sign">
            </span>Info</button>
        <button type="button" class="btn btn-warning btn-outline btn-component" tabindex="0">
            <span class="rioglyph rioglyph-warning-sign">
            </span>Warning</button>
        <button type="button" class="btn btn-danger btn-outline btn-component" tabindex="0">
            <span class="rioglyph rioglyph-error-sign">
            </span>Danger</button>
        <button type="button" class="btn btn-muted-filled btn-outline btn-component" tabindex="0">
            <span class="rioglyph rioglyph-cog">
            </span>Muted filled</button>
        <button type="button" class="btn btn-muted btn-outline btn-component" tabindex="0">
            <span class="rioglyph rioglyph-heart">
            </span>Muted</button>
    </div>
</div>
```

#### Props: Base button props

### Base button props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| disabled | boolean | false | Whether the button should be disabled. |
| active | boolean | false | Set the button toggled. Should be used in combination with "asToggle" prop. |
| iconOnly | boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |
| iconRight | boolean | false | Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side. |
| iconName | string | — | Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code. |
| multiline | boolean | false | Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only. |
| block | boolean | false | Defines whether the button takes up the full width of the parent element. |
| bsStyle | BUTTON_STYLE | 'default' | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |
| bsSize | BUTTON_SIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |
| variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |
| noRippleEffect | boolean | — | Whether the "ripple" effect should be suppressed on this button. |
| autoTrackingKey | string | — | Optional key used to generate automatic GA tracking attributes when no explicit tracking attributes are provided. Resulting label format: button::<autoTrackingKey>. |
| tabIndex | number | 0 | Number of the index used for keyboard support. |
| className | string | — | Additional classes to be set on the button element. |

#### Props: Regular button

### Regular button

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| asToggle | false | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |
| onClick | (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | — | Callback function triggered when clicking the button. |
| type | 'button' \| 'submit | 'button' | Defines the type of the button. This may be used for form submit buttons. |

#### Props: ToggleButton

### ToggleButton

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| asToggle | true | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |
| onClick | (value: boolean) => void | — | Callback function triggered when clicking the button. |

#### Props: Link element buttons

### Link element buttons

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| as | 'a' | — | Defines this component as a link element. |
| type | never | — | Native button type is not supported when using as="a". |
| href | string | — | Defines the destination URL for the link button. |
| asToggle | false | false | Toggle behavior is not supported when using as="a". |
| onClick | (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void | — | Callback function triggered when clicking the link. |

### Example: Buttons as anchor element

Buttons as anchor element
Default Primary Secondary Success Info Warning Danger Muted filled Muted
Buttons as anchor element - disabled
Default Primary Secondary Success Info Warning Danger Muted filled Muted
Buttons as anchor element - various sizes
Extra Small Small Medium Large
Buttons as anchor element - icon only

#### React (tsx)

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

export default () => (
    <div>
        <FormLabel>Buttons as anchor element</FormLabel>
        <ButtonToolbar>
            <Button as='a' href='#' iconName='rioglyph-truck'>
                Default
            </Button>
            <Button as='a' href='#' bsStyle={Button.PRIMARY} iconName='rioglyph-heart'>
                Primary
            </Button>
            <Button as='a' href='#' bsStyle={Button.SECONDARY} iconName='rioglyph-poi'>
                Secondary
            </Button>
            <Button as='a' href='#' bsStyle={Button.SUCCESS} iconName='rioglyph-thumbs-up'>
                Success
            </Button>
            <Button as='a' href='#' bsStyle={Button.INFO} iconName='rioglyph-info-sign'>
                Info
            </Button>
            <Button as='a' href='#' bsStyle={Button.WARNING} iconName='rioglyph-warning-sign'>
                Warning
            </Button>
            <Button as='a' href='#' bsStyle={Button.DANGER} iconName='rioglyph-error-sign'>
                Danger
            </Button>
            <Button as='a' href='#' bsStyle={Button.MUTED_FILLED} iconName='rioglyph-cog'>
                Muted filled
            </Button>
            <Button as='a' href='#' bsStyle={Button.MUTED} iconName='rioglyph-heart'>
                Muted
            </Button>
        </ButtonToolbar>

        <FormLabel className='margin-top-15'>Buttons as anchor element - disabled</FormLabel>
        <ButtonToolbar>
            <Button as='a' href='#' disabled iconName='rioglyph-truck'>
                Default
            </Button>
            <Button as='a' href='#' bsStyle={Button.PRIMARY} disabled iconName='rioglyph-heart'>
                Primary
            </Button>
            <Button as='a' href='#' bsStyle={Button.SECONDARY} disabled iconName='rioglyph-poi'>
                Secondary
            </Button>
            <Button as='a' href='#' bsStyle={Button.SUCCESS} disabled iconName='rioglyph-thumbs-up'>
                Success
            </Button>
            <Button as='a' href='#' bsStyle={Button.INFO} disabled iconName='rioglyph-info-sign'>
                Info
            </Button>
            <Button as='a' href='#' bsStyle={Button.WARNING} disabled iconName='rioglyph-warning-sign'>
                Warning
            </Button>
            <Button as='a' href='#' bsStyle={Button.DANGER} disabled iconName='rioglyph-error-sign'>
                Danger
            </Button>
            <Button as='a' href='#' bsStyle={Button.MUTED_FILLED} disabled iconName='rioglyph-cog'>
                Muted filled
            </Button>
            <Button as='a' href='#' bsStyle={Button.MUTED} disabled iconName='rioglyph-heart'>
                Muted
            </Button>
        </ButtonToolbar>

        <FormLabel className='margin-top-15'>Buttons as anchor element - various sizes</FormLabel>
        <ButtonToolbar>
            <Button as='a' href='#' bsSize={Button.XS} iconName='rioglyph-truck'>
                Extra Small
            </Button>
            <Button as='a' href='#' bsStyle={Button.PRIMARY} bsSize={Button.SM} iconName='rioglyph-heart'>
                Small
            </Button>
            <Button as='a' href='#' bsStyle={Button.SUCCESS} bsSize={Button.MD} iconName='rioglyph-thumbs-up'>
                Medium
            </Button>
            <Button
                as='a'
                href='#'
                bsStyle={Button.INFO}
                bsSize={Button.LG}
                onClick={() => console.log('button clicked')}
                iconName='rioglyph-info-sign'
            >
                Large
            </Button>
        </ButtonToolbar>

        <FormLabel className='margin-top-15'>Buttons as anchor element - icon only</FormLabel>
        <ButtonToolbar>
            <Button as='a' href='#' iconOnly iconName='rioglyph-truck' />
            <Button as='a' href='#' bsStyle={Button.PRIMARY} iconOnly iconName='rioglyph-heart' />
            <Button as='a' href='#' bsStyle={Button.SUCCESS} iconOnly iconName='rioglyph-thumbs-up' />
            <Button as='a' href='#' bsStyle={Button.INFO} iconOnly iconName='rioglyph-status-driving' />
            <Button as='a' href='#' bsStyle={Button.WARNING} iconOnly iconName='rioglyph-warning-sign' />
            <Button as='a' href='#' bsStyle={Button.DANGER} iconOnly iconName='rioglyph-error-sign' />
            <Button as='a' href='#' bsStyle={Button.MUTED_FILLED} iconOnly iconName='rioglyph-cog' />
            <Button as='a' href='#' bsStyle={Button.MUTED} iconOnly iconName='rioglyph-heart' />
        </ButtonToolbar>
    </div>
);
```

#### HTML (html)

```html
<div>
    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Buttons as anchor element</div>
    <div class="btn-toolbar">
        <a href="#" class="btn btn-default gap-0 btn-component" tabindex="0">
            <span class="rioglyph rioglyph-truck">
            </span>Default</a>
        <a href="#" class="btn btn-primary gap-0 btn-component" tabindex="0">
            <span class="rioglyph rioglyph-heart">
            </span>Primary</a>
        <a href="#" class="btn btn-secondary gap-0 btn-component" tabindex="0">
            <span class="rioglyph rioglyph-poi">
            </span>Secondary</a>
        <a href="#" class="btn btn-success gap-0 btn-component" tabindex="0">
            <span class="rioglyph rioglyph-thumbs-up">
            </span>Success</a>
        <a href="#" class="btn btn-info gap-0 btn-component" tabindex="0">
            <span class="rioglyph rioglyph-info-sign">
            </span>Info</a>
        <a href="#" class="btn btn-warning gap-0 btn-component" tabindex="0">
            <span class="rioglyph rioglyph-warning-sign">
            </span>Warning</a>
        <a href="#" class="btn btn-danger gap-0 btn-component" tabindex="0">
            <span class="rioglyph rioglyph-error-sign">
            </span>Danger</a>
        <a href="#" class="btn btn-muted-filled gap-0 btn-component" tabindex="0">
            <span class="rioglyph rioglyph-cog">
            </span>Muted filled</a>
        <a href="#" class="btn btn-muted gap-0 btn-component" tabindex="0">
            <span class="rioglyph rioglyph-heart">
            </span>Muted</a>
    </div>
    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 margin-top-15">Buttons as anchor element - disabled</div>
    <div class="btn-toolbar">
        <a href="#" class="btn btn-default gap-0 disabled btn-component" aria-disabled="true" tabindex="-1">
            <span class="rioglyph rioglyph-truck">
            </span>Default</a>
        <a href="#" class="btn btn-primary gap-0 disabled btn-component" aria-disabled="true" tabindex="-1">
            <span class="rioglyph rioglyph-heart">
            </span>Primary</a>
        <a href="#" class="btn btn-secondary gap-0 disabled btn-component" aria-disabled="true" tabindex="-1">
            <span class="rioglyph rioglyph-poi">
            </span>Secondary</a>
        <a href="#" class="btn btn-success gap-0 disabled btn-component" aria-disabled="true" tabindex="-1">
            <span class="rioglyph rioglyph-thumbs-up">
            </span>Success</a>
        <a href="#" class="btn btn-info gap-0 disabled btn-component" aria-disabled="true" tabindex="-1">
            <span class="rioglyph rioglyph-info-sign">
            </span>Info</a>
        <a href="#" class="btn btn-warning gap-0 disabled btn-component" aria-disabled="true" tabindex="-1">
            <span class="rioglyph rioglyph-warning-sign">
            </span>Warning</a>
        <a href="#" class="btn btn-danger gap-0 disabled btn-component" aria-disabled="true" tabindex="-1">
            <span class="rioglyph rioglyph-error-sign">
            </span>Danger</a>
        <a href="#" class="btn btn-muted-filled gap-0 disabled btn-component" aria-disabled="true" tabindex="-1">
            <span class="rioglyph rioglyph-cog">
            </span>Muted filled</a>
        <a href="#" class="btn btn-muted gap-0 disabled btn-component" aria-disabled="true" tabindex="-1">
            <span class="rioglyph rioglyph-heart">
            </span>Muted</a>
    </div>
    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 margin-top-15">Buttons as anchor element - various sizes</div>
    <div class="btn-toolbar">
        <a href="#" class="btn btn-default btn-xs gap-0 btn-component" tabindex="0">
            <span class="rioglyph rioglyph-truck">
            </span>Extra Small</a>
        <a href="#" class="btn btn-primary btn-sm gap-0 btn-component" tabindex="0">
            <span class="rioglyph rioglyph-heart">
            </span>Small</a>
        <a href="#" class="btn btn-success btn-md gap-0 btn-component" tabindex="0">
            <span class="rioglyph rioglyph-thumbs-up">
            </span>Medium</a>
        <a href="#" class="btn btn-info btn-lg gap-0 btn-component" tabindex="0">
            <span class="rioglyph rioglyph-info-sign">
            </span>Large</a>
    </div>
    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 margin-top-15">Buttons as anchor element - icon only</div>
    <div class="btn-toolbar">
        <a href="#" class="btn btn-default btn-icon-only gap-0 btn-component" tabindex="0">
            <span class="rioglyph rioglyph-truck">
            </span>
        </a>
        <a href="#" class="btn btn-primary btn-icon-only gap-0 btn-component" tabindex="0">
            <span class="rioglyph rioglyph-heart">
            </span>
        </a>
        <a href="#" class="btn btn-success btn-icon-only gap-0 btn-component" tabindex="0">
            <span class="rioglyph rioglyph-thumbs-up">
            </span>
        </a>
        <a href="#" class="btn btn-info btn-icon-only gap-0 btn-component" tabindex="0">
            <span class="rioglyph rioglyph-status-driving">
            </span>
        </a>
        <a href="#" class="btn btn-warning btn-icon-only gap-0 btn-component" tabindex="0">
            <span class="rioglyph rioglyph-warning-sign">
            </span>
        </a>
        <a href="#" class="btn btn-danger btn-icon-only gap-0 btn-component" tabindex="0">
            <span class="rioglyph rioglyph-error-sign">
            </span>
        </a>
        <a href="#" class="btn btn-muted-filled btn-icon-only gap-0 btn-component" tabindex="0">
            <span class="rioglyph rioglyph-cog">
            </span>
        </a>
        <a href="#" class="btn btn-muted btn-icon-only gap-0 btn-component" tabindex="0">
            <span class="rioglyph rioglyph-heart">
            </span>
        </a>
    </div>
</div>
```

#### Props: Base button props

### Base button props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| disabled | boolean | false | Whether the button should be disabled. |
| active | boolean | false | Set the button toggled. Should be used in combination with "asToggle" prop. |
| iconOnly | boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |
| iconRight | boolean | false | Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side. |
| iconName | string | — | Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code. |
| multiline | boolean | false | Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only. |
| block | boolean | false | Defines whether the button takes up the full width of the parent element. |
| bsStyle | BUTTON_STYLE | 'default' | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |
| bsSize | BUTTON_SIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |
| variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |
| noRippleEffect | boolean | — | Whether the "ripple" effect should be suppressed on this button. |
| autoTrackingKey | string | — | Optional key used to generate automatic GA tracking attributes when no explicit tracking attributes are provided. Resulting label format: button::<autoTrackingKey>. |
| tabIndex | number | 0 | Number of the index used for keyboard support. |
| className | string | — | Additional classes to be set on the button element. |

#### Props: Regular button

### Regular button

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| asToggle | false | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |
| onClick | (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | — | Callback function triggered when clicking the button. |
| type | 'button' \| 'submit | 'button' | Defines the type of the button. This may be used for form submit buttons. |

#### Props: ToggleButton

### ToggleButton

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| asToggle | true | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |
| onClick | (value: boolean) => void | — | Callback function triggered when clicking the button. |

#### Props: Link element buttons

### Link element buttons

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| as | 'a' | — | Defines this component as a link element. |
| type | never | — | Native button type is not supported when using as="a". |
| href | string | — | Defines the destination URL for the link button. |
| asToggle | false | false | Toggle behavior is not supported when using as="a". |
| onClick | (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void | — | Callback function triggered when clicking the link. |

### Example: Action buttons

Action buttons
Click me! Click me! Click me! Click me! Click me! Click me!

#### React (tsx)

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

export default () => (
    <div>
        <FormLabel>Action buttons</FormLabel>
        <ButtonToolbar className='align-items-start'>
            <Button
                bsStyle={Button.PRIMARY}
                variant={Button.VARIANT_ACTION}
                iconName='rioglyph-truck'
                className='text-size-h1'
            >
                Click me!
            </Button>
            <Button
                bsStyle={Button.SUCCESS}
                variant={Button.VARIANT_ACTION}
                iconName='rioglyph-thumbs-up'
                className='text-size-h2'
            >
                Click me!
            </Button>
            <Button
                bsStyle={Button.INFO}
                variant={Button.VARIANT_ACTION}
                iconName='rioglyph-info-sign'
                className='text-size-h3'
            >
                Click me!
            </Button>
            <Button
                bsStyle={Button.WARNING}
                variant={Button.VARIANT_ACTION}
                iconName='rioglyph-warning-sign'
                className='text-size-20'
            >
                Click me!
            </Button>
            <Button
                bsStyle={Button.DANGER}
                variant={Button.VARIANT_ACTION}
                iconName='rioglyph-error-sign'
                className='text-size-16'
            >
                Click me!
            </Button>
            <Button
                bsStyle={Button.MUTED}
                variant={Button.VARIANT_ACTION}
                iconName='rioglyph-cog'
                className='text-size-14'
            >
                Click me!
            </Button>
        </ButtonToolbar>
    </div>
);
```

#### HTML (html)

```html
<div>
    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Action buttons</div>
    <div class="align-items-start btn-toolbar">
        <button type="button" class="btn btn-primary btn-action btn-component text-size-h1" tabindex="0">
            <span class="rioglyph rioglyph-truck">
            </span>Click me!</button>
        <button type="button" class="btn btn-success btn-action btn-component text-size-h2" tabindex="0">
            <span class="rioglyph rioglyph-thumbs-up">
            </span>Click me!</button>
        <button type="button" class="btn btn-info btn-action btn-component text-size-h3" tabindex="0">
            <span class="rioglyph rioglyph-info-sign">
            </span>Click me!</button>
        <button type="button" class="btn btn-warning btn-action btn-component text-size-20" tabindex="0">
            <span class="rioglyph rioglyph-warning-sign">
            </span>Click me!</button>
        <button type="button" class="btn btn-danger btn-action btn-component text-size-16" tabindex="0">
            <span class="rioglyph rioglyph-error-sign">
            </span>Click me!</button>
        <button type="button" class="btn btn-muted btn-action btn-component text-size-14" tabindex="0">
            <span class="rioglyph rioglyph-cog">
            </span>Click me!</button>
    </div>
</div>
```

#### Props: Base button props

### Base button props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| disabled | boolean | false | Whether the button should be disabled. |
| active | boolean | false | Set the button toggled. Should be used in combination with "asToggle" prop. |
| iconOnly | boolean | false | Use when the content of the button is an icon only to adapt the button spacing accordingly. |
| iconRight | boolean | false | Adds right side spacing for an icon. This should be used when having navigation buttons that use an icon on the right side. |
| iconName | string | — | Optional rio-glyph icon name that comes in handy for icon only buttons for not adding a span tag for the icon which reduces boilerplate code. |
| multiline | boolean | false | Defines whether the button text break into multiple lines when the button space exceeds. Multiline buttons should be used as exception only. |
| block | boolean | false | Defines whether the button takes up the full width of the parent element. |
| bsStyle | BUTTON_STYLE | 'default' | Sets the button style. Possible values are: default, unstyled, primary, secondary, info, warning, danger, success, muted and muted-filled |
| bsSize | BUTTON_SIZE | — | Sets the button size. Possible values are: xs, sm, md and lg |
| variant | BUTTON_VARIANT | — | Sets the button variant. Possible values are: link, link-inline, outline and action |
| noRippleEffect | boolean | — | Whether the "ripple" effect should be suppressed on this button. |
| autoTrackingKey | string | — | Optional key used to generate automatic GA tracking attributes when no explicit tracking attributes are provided. Resulting label format: button::<autoTrackingKey>. |
| tabIndex | number | 0 | Number of the index used for keyboard support. |
| className | string | — | Additional classes to be set on the button element. |

#### Props: Regular button

### Regular button

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| asToggle | false | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |
| onClick | (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | — | Callback function triggered when clicking the button. |
| type | 'button' \| 'submit | 'button' | Defines the type of the button. This may be used for form submit buttons. |

#### Props: ToggleButton

### ToggleButton

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| asToggle | true | false | Use the button as a toggle button. The toggle state can be controlled via the active prop. |
| onClick | (value: boolean) => void | — | Callback function triggered when clicking the button. |

#### Props: Link element buttons

### Link element buttons

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| as | 'a' | — | Defines this component as a link element. |
| type | never | — | Native button type is not supported when using as="a". |
| href | string | — | Defines the destination URL for the link button. |
| asToggle | false | false | Toggle behavior is not supported when using as="a". |
| onClick | (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void | — | Callback function triggered when clicking the link. |