Button Component
The BosuiButton component provides interactive buttons with various styles, colors, and behaviors. It supports loading states, disabled states, and different visual variants to fit your application's design needs.
Button variant and colors
There are a couple of preset button variants and colors:
Custom colors
You can easily change the color of the button through classes or the built in parameters:
Loading and Success States
Buttons can display loading indicators and success states for async operations:
Form Submit Buttons
Buttons can be configured for form submission:
Form Button Code
<BosuiButton Type="submit" Color="Color.Primary">Submit Form</BosuiButton>
<BosuiButton Type="button" Color="Color.Secondary">Regular Button</BosuiButton>
<BosuiButton Type="reset" Color="Color.Warning">Reset Form</BosuiButton>Custom Content
Buttons can contain custom content including icons, text, and other elements:
Custom Content Code
<BosuiButton Color="Color.Primary">
<i class="bosui-icon-download"></i>
<span style="margin-left: 0.5rem;">Download</span>
</BosuiButton>
<BosuiButton Color="Color.Success">
<span style="margin-right: 0.5rem;">Save</span>
<i class="bosui-icon-save"></i>
</BosuiButton>
<BosuiButton Color="Color.Info">
<div style="display: flex; flex-direction: column; align-items: center;">
<i class="bosui-icon-upload"></i>
<small style="font-size: 0.7rem;">Upload</small>
</div>
</BosuiButton>Component Properties
| Property | Type | Default | Description |
|---|---|---|---|
| Text | string? | null | Text content to display in the button. Alternative to ChildContent. |
| ChildContent | RenderFragment? | null | Custom content to render inside the button. Takes precedence over Text. |
| Type | string? | "button" | HTML button type: "button", "submit", or "reset". |
| Click | EventCallback<bool> | - | Event handler for button click events. |
| Disabled | bool | false | Whether the button is disabled and non-interactive. |
| ValidSubmit | bool | false | Shows success animation after click when true. |
| Variant | Variant | Variant.Flat | Visual style variant: Flat, Raised, Outlined, Text, or Icon. |
| Color | Color | Color.Primary | Color scheme: Primary, Secondary, Success, Danger, Warning, Info, PrimaryText, SecondaryText. |
| Style | string? | null | Custom CSS styles to apply to the button. |
| Class | string? | null | Additional CSS classes to apply to the button. |
Quick Navigation
Color Options
Primary
Secondary
Success
Danger
Warning
Info