Basic usage

<BOBButton Text="Click me" OnClick="@(() => { })" />

Sizes

<BOBButton Text="Small" Size="BOBSize.Small" />
<BOBButton Text="Medium" Size="BOBSize.Medium" />
<BOBButton Text="Large" Size="BOBSize.Large" />

Icons

Icons can be placed before or after the text.

<BOBButton Text="Add" LeadingIcon="@BOBIconKeys.MaterialIconsOutlined.i_add" />
<BOBButton Text="Next" TrailingIcon="@BOBIconKeys.MaterialIconsOutlined.i_arrow_forward" />
<BOBButton Text="Save" LeadingIcon="@BOBIconKeys.MaterialIconsOutlined.i_save"
           TrailingIcon="@BOBIconKeys.MaterialIconsOutlined.i_check" />

Colors

Use semantic PaletteColor values, or any CSS color string.

<BOBButton Text="Primary" BackgroundColor="@PaletteColor.Primary" Color="@PaletteColor.PrimaryContrast" />
<BOBButton Text="Success" BackgroundColor="@PaletteColor.Success" Color="@PaletteColor.SuccessContrast" />
<BOBButton Text="Warning" BackgroundColor="@PaletteColor.Warning" Color="@PaletteColor.WarningContrast" />
<BOBButton Text="Error" BackgroundColor="@PaletteColor.Error" Color="@PaletteColor.ErrorContrast" />

Loading state

While Loading is true, the button is disabled and shows an indicator.

<BOBButton Text="Submitting" Loading="true" />
<BOBButton Text="Ring" Loading="true" LoadingIndicatorVariant="BOBLoadingIndicatorVariant.Ring" />
<BOBButton Text="Dots" Loading="true" LoadingIndicatorVariant="BOBLoadingIndicatorVariant.Dots" />
<BOBButton Text="Bars" Loading="true" LoadingIndicatorVariant="BOBLoadingIndicatorVariant.Bars" />

Disabled

<BOBButton Text="Disabled" Disabled="true" />

Full width

<div style="width: 100%;">
    <BOBButton Text="Full-width button" FullWidth="true" />
</div>

Shadow & Border

<BOBButton Text="Elevated" Shadow="@BOBShadowPresets.Elevation(3)" />
<BOBButton Text="Pill" Border="@BOBBorderPresets.Pill" />
<BOBButton Text="Rounded" Border="@BOBBorderPresets.RoundedLarge" />
<BOBButton Text="Strong" Border="@BOBBorderPresets.Strong" />

Transitions

Built-in transition presets for hover/click feedback.

<BOBButton Text="Hover scale" Transitions="@BOBTransitionPresets.HoverScale" />
<BOBButton Text="Hover lift" Transitions="@BOBTransitionPresets.HoverLift" />
<BOBButton Text="Material" Transitions="@BOBTransitionPresets.MaterialButton" />

Properties

Property	Type	Default	Description
`ChildContent`	`RenderFragment?`		Customizable Button content.
`Text`	`string?`		Text displayed inside the button. Ignored when is provided.
`LeadingIcon`	`IconKey?`		Closed-catalog icon key rendered before the button text.
`TrailingIcon`	`IconKey?`		Closed-catalog icon key rendered after the button text.
`OnClick`	`EventCallback<MouseEventArgs>`		Raised when the button is clicked and not disabled.
`AriaLabel`	`string?`		/// Accessible name for the button. Required when the button has no visible text /// (icon-only, -only without text). Forwarded to the /// inner <button> element. WCAG 4.1.2 Name, Role, Value. ///
`Transitions`	`BOBTransitions?`		Transition classes applied to the button element.
`Size`	`BOBSize`	`BOBSize.Medium`	Visual size of the button.
`FullWidth`	`bool`		When , the button spans the full width of its container.
`Loading`	`bool`		When , the button shows a loading indicator and is non-interactive.
`LoadingIndicatorVariant`	`BOBLoadingIndicatorVariant?`		Variant of the loading indicator shown when is .
`Shadow`	`ShadowStyle?`		Shadow style applied to the button.
`Border`	`BorderStyle?`		Border style applied to the button.
`DisableRipple`	`bool`		When , the ripple effect on click is disabled.
`RippleColor`	`string?`		Custom CSS color for the ripple effect.
`RippleDurationMs`	`int?`		Duration of the ripple animation in milliseconds.
`Density`	`BOBDensity`	`BOBDensity.Standard`	Vertical density (gap) of the button.
`BackgroundColor`	`string?`		Background color of the button. Accepts any valid CSS color value.
`Color`	`string?`		Text and icon color of the button. Accepts any valid CSS color value.
`Disabled`	`bool`		When , the button is non-interactive.