# Button

> AstrolButton is an essential Blazor component in applications and websites, providing a clear and visually prominent way for users to initiate actions or processes.

Source page: https://doc.astrolui.com/basic-component/button

## 1. Demo AstrolButton

```razor
@using Astrol.Entities.Basic.UI
@using Astrol.Component.Basic.Button
<AstrolButton Text="Button 1" />
<AstrolButton Text="Button 2" Style="AstrolStyle.White" />
<AstrolButton Text="Button 3" Style="AstrolStyle.Black" />
<AstrolButton Text="Button 4" Style="AstrolStyle.Blue" />
<AstrolButton Text="Button 5" Style="AstrolStyle.Green" />
<AstrolButton Text="Button 6" Style="AstrolStyle.Orange" />
<AstrolButton Text="Button 7" Style="AstrolStyle.Red" />
<AstrolButton Text="Button 8" Style="AstrolStyle.Yellow" />
<AstrolButton Text="Button 9" Style="AstrolStyle.Purple" />
<br />
<AstrolButton Text="Button 1" Outline="true" />
<AstrolButton Text="Button 2" Style="AstrolStyle.White" Outline="true" />
<AstrolButton Text="Button 3" Style="AstrolStyle.Black" Outline="true" />
<AstrolButton Text="Button 4" Style="AstrolStyle.Blue" Outline="true" />
<AstrolButton Text="Button 5" Style="AstrolStyle.Green" Outline="true" />
<AstrolButton Text="Button 6" Style="AstrolStyle.Orange" Outline="true" />
<AstrolButton Text="Button 7" Style="AstrolStyle.Red" Outline="true" />
<AstrolButton Text="Button 8" Style="AstrolStyle.Yellow" Outline="true" />
<AstrolButton Text="Button 9" Style="AstrolStyle.Purple" Outline="true" />
<br />
<AstrolButton Text="Button 1" Style="AstrolStyle.Blue" Icon="astrol-plus" />
<AstrolButton Text="Button 2" Style="AstrolStyle.Red" Icon="astrol-cancel" Outline="true" />
<AstrolButton Text="Button 3" Style="AstrolStyle.Green" Icon="astrol-spin5" AnimateIcon="true" />
<AstrolButton Text="Button 4" Style="AstrolStyle.Orange" Icon="astrol-spin4" AnimateIcon="true" Outline="true" />
```

### Supported parameters

- **Text** (string?): button text (optional).
- **Icon** (string?): class of the button icon (optional).
- **AnimateIcon** (bool): spins the icon when there is one (default is **false**).
- **Title** (string?): HTML title attribute (tooltip). Recommended for icon-only buttons (optional).
- **Class** (string?): CSS class to customize styles (optional).
- **Form** (string?): HTML form attribute: id of the form the button belongs to when placed outside it (optional).
- **OnClick** (EventCallback<MouseEventArgs>): button action; it runs immediately on every click. To avoid double submissions, disable the button (**Status="false"**) while it is processing.
- **BorderRadius** (string): border radius (default: the theme radius, **8px**).
- **Outline** (bool): button without fill, only with the border and text in the chosen color (default is **false**).
- **Status** (bool): whether the button is enabled; with **false** it is disabled (default is **true**).
- **Autofocus** (bool): the button receives focus when first rendered (also inside a modal); only if **Status** is true (default is **false**).
- **Type** (ButtonType): button type (default is **ButtonType.Button**).
  - **Button** (enum)
  - **Submit** (enum)
  - **Reset** (enum)
- **Style** (AstrolStyle): button style (default is **AstrolStyle.Base**).
  - **Base** (enum)
  - **White** (enum)
  - **Black** (enum)
  - **Red** (enum)
  - **Orange** (enum)
  - **Green** (enum)
  - **Blue** (enum)
  - **Yellow** (enum)
  - **Purple** (enum)