left align
right align
```
## When to use a ToggleButton?
### ToggleButton vs Checkbox
ToggleButtons are not an alternative to Checkboxes. They are not form controls and should not appear inside a form. ToggleButtons should only manipulate local UI states, i.e. they should not directly or indirectly initiate a remote API call to change database states.
### ToggleButton vs ToggleSwitch
Both of them provide options to toggle between states. Consider the following points to choose between them:
1. Prefer ToggleSwitches to toggle states on mobile; they support swipe gestures
2. ToggleButtons fit better in designs with space constraints
3. Use ToggleButtons to programmatically toggle the state. For example, you can bind a keyboard shortcut to a *mute* button in a video player.
## Accessibility
1. ToggleButtons accept most of the [button element's attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) such as `disabled` & `onClick` and supports [data-\* attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).
2. ToggleButton is focusable and keyboard navigable; tab (or shift+tab when tabbing backwards).
3. space and enter toggles the state of ToggleButton.
4. ToggleButton has a role of “[button](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role)”.
5. ToggleButton uses `aria-pressed` to assist screen readers; the on/off state of ToggleButton determines its value.
6. ToggleButton accept the aria-\* attributes [button role](https://www.w3.org/TR/wai-aria-1.1/#button).
## Accessibility must-haves
Add `aria-label` or `aria-labelledby` in Icon ToggleButton to help assistive technologies.
[comment]: # "ToggleButton Props"
## Props
### children
React node for caption
| type | required | default |
| ---- | -------- | ------- |
| node | true | N/A |
### seamless
Renders a seamless variant
| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |
### on
Sets the state of button
| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |
### size
Sets the size of button. Possible values are `"xs", "s", "m", "l"` for extra small, small, medium & large respectively
| type | required | default |
| ---- | -------- | ------- |
| enum | false | "m" |
### link
Renders a link ToggleButton
| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |
### as
Link element to render. Accepts an HTML element or a React component.
| type | required | default |
| ----------- | -------- | ------- |
| elementType | false | "a" |
### asProps
Accepts props & attributes for the link element.
| type | required | default |
| ------ | -------- | ------- |
| object | false | {} |
### icon
Renders an Icon ToggleButton.
| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |
### compact
Renders a ToggleButton with less spacing around.
| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |
### emphasize
Emphasizes the icon instead of background by coloring it.
Works only for Compact Icon ToggleButton
| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |
### qualifier
Qualifiers are icons that enhance the caption. ToggleButton prepends the qualifier by default
Accepts SVG or SVG wrapped React component. Checkout `@asphalt-react/iconpack` for SVG wrapped React components.
> ⚠️ Do not use `qualifier` to render an Icon ToggleButton, use `icon` prop instead
| type | required | default |
| ------- | -------- | ------- |
| element | false | null |
### qualifierEnd
Appends qualifier to the caption
| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |
### stickStart
Adapts to let other buttons stick to its start
| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |
### stickEnd
Adapts to let other buttons stick to its end
| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |
### stick
Enhances the style of the supporting button.
| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |
### underline
Adds underline in link ToggleButton
| type | required | default |
| ---- | -------- | ------- |
| bool | false | true |
### brand
Applies brand intent when ToggleButton is on.
| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |
---
_Source: https://npm.io/package/@asphalt-react/toggle-button · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._