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

<RzButton Variant=ThemeVariant.Primary>Primary</RzButton>
<RzButton Variant=ThemeVariant.Secondary>Secondary</RzButton>
<RzButton Variant=ThemeVariant.Accent>Accent</RzButton>
<RzButton Variant=ThemeVariant.Inverse>Inverse</RzButton>
<RzButton Variant=ThemeVariant.Information>Information</RzButton>
<RzButton Variant=ThemeVariant.Destructive>Destructive</RzButton>
<RzButton Variant=ThemeVariant.Warning>Warning</RzButton>
<RzButton Variant=ThemeVariant.Success>Success</RzButton>
<RzButton Variant=ThemeVariant.Ghost>Ghost</RzButton>

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

<RzButton Variant=ThemeVariant.Primary Outline>Primary</RzButton>
<RzButton Variant=ThemeVariant.Secondary Outline>Secondary</RzButton>
<RzButton Variant=ThemeVariant.Accent Outline>Accent</RzButton>
<RzButton Variant=ThemeVariant.Inverse Outline>Inverse</RzButton>
<RzButton Variant=ThemeVariant.Information Outline>Information</RzButton>
<RzButton Variant=ThemeVariant.Destructive Outline>Destructive</RzButton>
<RzButton Variant=ThemeVariant.Warning Outline>Warning</RzButton>
<RzButton Variant=ThemeVariant.Success Outline>Success</RzButton>
<RzButton Variant=ThemeVariant.Ghost Outline>Ghost</RzButton>

Button Sizing

Buttons are available in several sizes.

Source

<RzButton Variant=ThemeVariant.Primary Size=Size.ExtraSmall>Primary</RzButton>
<RzButton Variant=ThemeVariant.Primary Size=Size.Small>Primary</RzButton>
<RzButton Variant=ThemeVariant.Primary Size=Size.Medium>Primary</RzButton>
<RzButton Variant=ThemeVariant.Primary Size=Size.Large>Primary</RzButton>
<RzButton Variant=ThemeVariant.Primary Size=Size.ExtraLarge>Primary</RzButton>

No Animation Button

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

Source

<RzButton Variant=ThemeVariant.Primary Animate="false">Primary (No Animation)</RzButton>

Custom Styled Button

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

Source

<RzButton 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
</RzButton>

Button Component Parameters

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