Button

1. Demo AstrolButton

@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" />

<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), text to display on the button (optional).
Icon (string), icon to display on the button (optional).
AnimateIcon (bool), defines if the icon is animated when present (defaults to false).
Title (string), title of the button (optional).
Class (string), CSS class to customize styles (optional).
Form (string), HTML property in case you need to reference a form outside of it.
OnClick (MouseEventArgs), to specify the button's action.
BorderRadius (string), border radius of the button (defaults to 5px).
Outline (bool), if you want the button to have no fill (defaults to false).
Status (bool), if you want the button to be inactive (defaults to true).
Autofocus (bool), if the button should be focused when created (defaults to false).
Type (ButtonType), defines the type of button (defaults to ButtonType.Button).
- Button (enum)
- Submit (enum)
- Reset (enum)
Style (AstrolStyle), defines the style of the button (defaults to AstrolStyle.Base).
- Base (enum)
- White (enum)
- Black (enum)
- Red (enum)
- Orange (enum)
- Green (enum)
- Blue (enum)
- Yellow (enum)
- Purple (enum)