> For the complete documentation index, see [llms.txt](https://2600hz.gitbook.io/sds/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://2600hz.gitbook.io/sds/sds-3.0/sds-components/components/button/code.md).

# Code

### Button API

This component extends the native [`<button>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) API. That's why the `type` prop is not included in the table..

|                    |                                                                                                            |     |
| ------------------ | ---------------------------------------------------------------------------------------------------------- | --- |
| `children`         | `ReactNode`                                                                                                | :x: |
| `variant`          | `'base' \| 'primary' \| 'secondary' \| 'ghost' \| 'danger' \| 'dangerAlt' \| 'inverted' \| 'invertedAlt';` | :x: |
| `size`             | `'default' \| 'large' \| 'small';`                                                                         | :x: |
| `iconOnly`         | [`AvailableTelicon`](https://2600hz.github.io/sds-telicon/)                                                | :x: |
| `iconBefore`       | [`AvailableTelicon`](https://2600hz.github.io/sds-telicon/)                                                | :x: |
| `iconAfter`        | [`AvailableTelicon`](https://2600hz.github.io/sds-telicon/)                                                | :x: |
| `isDisabled`       | `boolean`                                                                                                  | :x: |
| `isSelected`       | `boolean`                                                                                                  | :x: |
| `isLoading`        | `boolean \| 'before' \| 'after';`                                                                          | :x: |
| `iconSpacing`      | `string`                                                                                                   | :x: |
| `scaleWhileActive` | `boolean`                                                                                                  | :x: |

<details>

<summary>children</summary>

A string or an HTML structure passed as child.

</details>

<details>

<summary>variant</summary>

Controls the stylistic state of the button.

</details>

<details>

<summary>size</summary>

Controls the size of the button.

</details>

<details>

<summary>iconOnly, iconBefore and iconAfter</summary>

`iconOnly` is used when you only want to render an icon as a button. `iconBefore` renders a button on the right side of the text, and `iconAfter` renders the icon right to the text.&#x20;

</details>

<details>

<summary>isDisabled and isSelected</summary>

Controls the enabled or disabled state of the component. `isSelected` controls if the button shows a selected state on the button.

</details>

<details>

<summary>isLoading</summary>

Used to set a loading state to a button. You can control if its only a button or if its shown before or after the children.

</details>

<details>

<summary>iconSpacing</summary>

Controls the gap between the icon and the child. This should be a string, so you can control it just as if it was CSS.

</details>

<details>

<summary>scaleWhileActive</summary>

This prop changes the scale while active.

</details>

## Example

<table data-view="cards"><thead><tr><th></th><th></th><th></th></tr></thead><tbody><tr><td>Live Demo</td><td><a href="https://codesandbox.io/s/button-kkd96f">Code Sandbox</a></td><td></td></tr></tbody></table>