Buttons

Buttons are a fundamental element of any user interface. Users can use them to trigger actions, such as submitting a form, opening a modal, or navigating to another page.

Default Button

Buttons with a solid background – use them to draw attention to the most important actions.

Source

<Button Variant=ButtonVariant.Primary>Primary</Button>
<Button Variant=ButtonVariant.Secondary>Secondary</Button>
<Button Variant=ButtonVariant.Alternate>Alternate</Button>
<Button Variant=ButtonVariant.Inverse>Inverse</Button>
<Button Variant=ButtonVariant.Information>Information</Button>
<Button Variant=ButtonVariant.Danger>Danger</Button>
<Button Variant=ButtonVariant.Warning>Warning</Button>
<Button Variant=ButtonVariant.Success>Success</Button>
<Button Variant=ButtonVariant.Ghost>Ghost</Button>

Outline Button

Buttons defined by a border rather than a solid background. Use them to emphasize alternative or less critical actions without overwhelming the interface.

Source

<Button Variant=ButtonVariant.Primary Outline>Primary</Button>
<Button Variant=ButtonVariant.Secondary Outline>Secondary</Button>
<Button Variant=ButtonVariant.Alternate Outline>Alternate</Button>
<Button Variant=ButtonVariant.Inverse Outline>Inverse</Button>
<Button Variant=ButtonVariant.Information Outline>Information</Button>
<Button Variant=ButtonVariant.Danger Outline>Danger</Button>
<Button Variant=ButtonVariant.Warning Outline>Warning</Button>
<Button Variant=ButtonVariant.Success Outline>Success</Button>
<Button Variant=ButtonVariant.Ghost Outline>Ghost</Button>

Button Sizing

Buttons are available in several sizes.

Source

<Button Variant=ButtonVariant.Primary Size=Size.ExtraSmall>Primary</Button>
<Button Variant=ButtonVariant.Primary Size=Size.Small>Primary</Button>
<Button Variant=ButtonVariant.Primary Size=Size.Medium>Primary</Button>
<Button Variant=ButtonVariant.Primary Size=Size.Large>Primary</Button>
<Button Variant=ButtonVariant.Primary Size=Size.ExtraLarge>Primary</Button>

No Animation Button

This example demonstrates a Button with disabled animation by setting Animate to false.

Source

<Button Variant=ButtonVariant.Primary Animate="false">Primary (No Animation)</Button>

Custom Styled Button

This example demonstrates a Button with completely custom styling. Instead of using the ButtonVariant parameter, a custom CSS class is applied to achieve a unique color scheme.

Source

<Button class="bg-linear-45 from-indigo-500 via-purple-500 to-pink-500 hover:text-white hover:-rotate-5 hover:scale-105 hover:from-pink-500 hover:via-indigo-600 hover:to-purple-500 px-6 py-3 transition-all rounded-lg shadow-lg">
    Custom Styled Button
</Button>

Button Component Parameters

Property	Description
AssistiveLabel	string – Accessible label for screen readers. (Default: "Action Button")
Variant	ButtonVariant – Determines the button style. Options: `Primary`, `Secondary`, `Alternate`, `Inverse`, `Information`, `Danger`, `Warning`, `Success`, `Ghost`. (Default: `Primary`)
Size	Size – Specifies the size of the button. Options: `ExtraSmall`, `Small`, `Medium`, `Large`, `ExtraLarge`. (Default: `Medium`)
Outline	bool – If set to `true`, renders the button with an outline style instead of a solid background. (Default: false)
Animate	bool – Controls whether the button animations (such as active scaling) are enabled. (Default: true)
Label	string – Optional text label if no child content is provided.
ChildContent	RenderFragment – The content displayed inside the button.