# ToggleButton

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

This toggle button is based on the button component that can be used directly.

## ToggleButton

### Example: Default ToggleButtons

Default ToggleButtons
btn-default (untoggled) btn-default (toggled) btn-primary (untoggled)
Other Styles

#### React (tsx)

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

const handleClick = (response: boolean) => Notification.info(`Toggled: ${response}`);

export default () => (
    <div>
        <FormLabel>Default ToggleButtons</FormLabel>
        <div className='btn-toolbar'>
            <ToggleButton onClick={handleClick}>btn-default (untoggled)</ToggleButton>
            <ToggleButton active onClick={handleClick}>
                btn-default (toggled)
            </ToggleButton>
            <ToggleButton bsStyle='primary' onClick={handleClick}>
                btn-primary (untoggled)
            </ToggleButton>
        </div>
        <FormLabel className='margin-top-15'>Other Styles</FormLabel>
        <div className='btn-toolbar'>
            <ToggleButton bsStyle='success' iconName='rioglyph-thumbs-up' iconOnly />
            <ToggleButton bsStyle='info' iconName='rioglyph-status-driving' iconOnly />
            <ToggleButton bsStyle='warning' iconName='rioglyph-warning-sign' iconOnly />
            <ToggleButton bsStyle='danger' iconName='rioglyph-error-sign' iconOnly />
        </div>
    </div>
);
```

#### HTML (html)

```html
<div>
    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Default ToggleButtons</div>
    <div class="btn-toolbar">
        <button type="button" class="btn btn-default btn-toggle btn-component" tabindex="0">btn-default (untoggled)</button>
        <button type="button" class="btn btn-default btn-toggle active btn-component" tabindex="0">btn-default (toggled)</button>
        <button type="button" class="btn btn-primary btn-toggle btn-component" tabindex="0">btn-primary (untoggled)</button>
    </div>
    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5 margin-top-15">Other Styles</div>
    <div class="btn-toolbar">
        <button type="button" class="btn btn-success btn-toggle btn-icon-only btn-component" tabindex="0">
            <span class="rioglyph rioglyph-thumbs-up">
            </span>
        </button>
        <button type="button" class="btn btn-info btn-toggle btn-icon-only btn-component" tabindex="0">
            <span class="rioglyph rioglyph-status-driving">
            </span>
        </button>
        <button type="button" class="btn btn-warning btn-toggle btn-icon-only btn-component" tabindex="0">
            <span class="rioglyph rioglyph-warning-sign">
            </span>
        </button>
        <button type="button" class="btn btn-danger btn-toggle btn-icon-only btn-component" tabindex="0">
            <span class="rioglyph rioglyph-error-sign">
            </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: Controlled ToggleButton

Controlled ToggleButton
Control the toggle

#### React (tsx)

```tsx
import { useState } from 'react';

import ToggleButton from '@rio-cloud/rio-uikit/ToggleButton';
import Button from '@rio-cloud/rio-uikit/Button';
import Notification from '@rio-cloud/rio-uikit/Notification';
import FormLabel from '@rio-cloud/rio-uikit/FormLabel';

const handleClick = (response: boolean) => Notification.info(`Toggled: ${response}`);

export default () => {
    const [isToggled, setIsToggled] = useState(false);

    return (
        <div>
            <FormLabel>Controlled ToggleButton</FormLabel>
            <div className='margin-bottom-25'>
                <ToggleButton active={isToggled} iconName='rioglyph-cards-table' iconOnly />
            </div>
            <Button onClick={() => setIsToggled(!isToggled)}>Control the toggle</Button>
        </div>
    );
};
```

#### HTML (html)

```html
<div>
    <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Controlled ToggleButton</div>
    <div class="margin-bottom-25">
        <button type="button" class="btn btn-default btn-toggle btn-icon-only btn-component" tabindex="0">
            <span class="rioglyph rioglyph-cards-table">
            </span>
        </button>
    </div>
    <button type="button" class="btn btn-default btn-component" tabindex="0">Control the toggle</button>
</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. |