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

# Button

The button is one of the commonly used components on the page. But you should use this component correctly. Choose a suitable variant, role and icons to make your buttons easy-to-understand for users. 

```tsx
import { Button, Icon, Role } from 'altrone-ui';

return <Button leftIcon={<Icon i="check" />} role={Role.success}>Confirm</Button>
```

## Variants

There are four different variants for buttons. They do not have any differences in functionality, only in styles. Use the variants that suit your design.&#x20;

### <mark style="color:blue;">ButtonVariant</mark>

<pre class="language-typescript"><code class="lang-typescript">enum ButtonVariant {
<strong>  default = '',
</strong>  borders = 'borders',
  transparent = 'transparent',
  text = 'text'
}
</code></pre>

## Context Menu

You can use button as a dropdown. To do that you should provide a [ContextMenuType](/altrone-ui/components/lists/contextmenu.md) object to `dropdown` property. Pay attention that in that case `onClick` property won't work while you have `dropdown` property.&#x20;

## Properties

| Property        | Type                                                             | Description                                                                                                               |
| --------------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
| **`children`**  | `ReactNode`                                                      | Content of the button                                                                                                     |
| **`onClick`**   | `() => void`                                                     | Callback fires when user clicks on the button                                                                             |
| **`role`**      | [`Role`](/altrone-ui/utils/enums/role.md)                        | Role of the button. Default value is default                                                                              |
| **`variant`**   | [`ButtonVariant`](#buttonvariant)                                | Variant of style                                                                                                          |
| **`href`**      | `string`                                                         | Makes button as a link                                                                                                    |
| **`target`**    | `HTMLAnchorElement['target']`                                    | Change target attribute for link-button                                                                                   |
| **`fluid`**     | `boolean`                                                        | If true the button will take full width of the parent component. Default value is `false`                                 |
| **`leftIcon`**  | `JSX.Element`                                                    | Adds an icon to the left side of the button                                                                               |
| **`rightIcon`** | `JSX.Element`                                                    | Adds an icon to the right side of the button                                                                              |
| **`size`**      | [`Size`](/altrone-ui/utils/enums/size.md)                        | Size of the button                                                                                                        |
| **`dropdown`**  | [`ContextMenuType`](/altrone-ui/components/lists/contextmenu.md) | If passed shows a dropdown when user clicked on the button                                                                |
| **`isIcon`**    | `boolean`                                                        | Use this prop in cases when your `children` contains only icon to correct styles for the button. Default value is `false` |
| **`indicator`** | [`Indicator`](/altrone-ui/utils/types/indicator.md)              | Adds indicator to the button                                                                                              |
| **`loading`**   | `boolean`                                                        | Hides button content and show loading animation. Default value is `false`                                                 |
| **`progress`**  | `number`                                                         | Shows a thin progress bar below the button content. Default value is `undefined`                                          |
| **`disabled`**  | `boolean`                                                        | Mark the button as disabled. Default value is `false`                                                                     |
| **`type`**      | `HTMLButtonElement['type']`                                      | Change type of the button. This changes `type` attribute for `<button>` tag. Default value is `button`                    |
| **`elevation`** | [`Elevation`](/altrone-ui/utils/enums/elevation.md)              | Shadows of the button. Default value is `convex`                                                                          |
| **`className`** | `string`                                                         | Custom CSS class                                                                                                          |

## History

* **`Altrone 2.0`**:
  * added `elevation` prop
  * added `loading` prop
  * added `progress` prop
* **`Altrone 1.1`**:&#x20;
  * added `indicator` prop
* **`Altrone 1.0`**: initial release