> 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

This component is used to make clickable actions on the page

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