Button: Blazor button component

Examples

Colors

Semantic Color values map to daisyUI's btn-* colours, so they follow every theme.

website/Examples/Actions/ButtonColorsExample.razor Source

Variants

Filled, Outlined and Text map to btn, btn-outline and btn-ghost.

website/Examples/Actions/ButtonVariantsExample.razor Source

Sizes

Small, Medium (default) and Large.

website/Examples/Actions/ButtonSizesExample.razor Source

Icons

StartIcon and EndIcon take any Icons.Material ligature.

website/Examples/Actions/ButtonIconsExample.razor Source

Loading and disabled

Loading swaps in a spinner and blocks clicks; bind it to your own async work.

website/Examples/Actions/ButtonStatesExample.razor Source

Playground

ChildContent

Color Color

Variant Variant

Size Size

StartIcon

EndIcon

Disabled

FullWidth

<Button
        Color="Color.Primary"
        Variant="Variant.Filled">
    Save changes
</Button>

API

<Button>

DaisyBlazor

Parameters

ButtonType ButtonType
= ButtonType.Button
HTML button type attribute (button, submit or reset); defaults to button.
Color Color
= Color.Default
Semantic color mapped to btn-{color} (e.g. btn-primary); Default adds no color class.
Disabled bool
= false
Disables the button; links lose their href and get btn-disabled and aria-disabled.
EndIcon string
= null
Icon name rendered after the content; hidden while loading.
FullWidth bool
= false
Stretches the button to the full container width via btn-block.
Href string
= null
When set, renders an <a> link with this URL instead of a <button>.
Loading bool
= false
Shows a loading spinner in place of the start icon and disables the button.
Size Size
= Size.Medium
Button size: Small maps to btn-sm, Large to btn-lg, Medium (default) adds no class.
StartIcon string
= null
Icon name rendered before the content; replaced by the spinner while loading.
StopPropagation bool
= false
Stops the click event from propagating to parent elements (button mode only).
Target string
= null
Link target (e.g. "_blank") applied to the <a> when Href is set.
Variant Variant
= Variant.Text
Visual style: Outlined maps to btn-outline, Text to btn-ghost, Filled to a solid button. When not set, the app's DefaultButtonVariant applies (Text unless configured).
Class string
= null
Extra CSS classes merged onto the root element.
Style string
= null
Inline CSS styles applied to the root element.

Name	Type	Default	Description
ButtonType	ButtonType	ButtonType.Button	HTML button type attribute (button, submit or reset); defaults to button.
Color	Color	Color.Default	Semantic color mapped to btn-{color} (e.g. btn-primary); Default adds no color class.
Disabled	bool	false	Disables the button; links lose their href and get btn-disabled and aria-disabled.
EndIcon	string	null	Icon name rendered after the content; hidden while loading.
FullWidth	bool	false	Stretches the button to the full container width via btn-block.
Href	string	null	When set, renders an <a> link with this URL instead of a <button>.
Loading	bool	false	Shows a loading spinner in place of the start icon and disables the button.
Size	Size	Size.Medium	Button size: Small maps to btn-sm, Large to btn-lg, Medium (default) adds no class.
StartIcon	string	null	Icon name rendered before the content; replaced by the spinner while loading.
StopPropagation	bool	false	Stops the click event from propagating to parent elements (button mode only).
Target	string	null	Link target (e.g. "_blank") applied to the <a> when Href is set.
Variant	Variant	Variant.Text	Visual style: Outlined maps to btn-outline, Text to btn-ghost, Filled to a solid button. When not set, the app's DefaultButtonVariant applies (Text unless configured).
Class	string	null	Extra CSS classes merged onto the root element.
Style	string	null	Inline CSS styles applied to the root element.

Events

OnClick EventCallback<MouseEventArgs>
Raised when the button is clicked; not raised while disabled or loading.

Name	Type	Description
OnClick	EventCallback<MouseEventArgs>	Raised when the button is clicked; not raised while disabled or loading.

Content

ChildContent RenderFragment
Button label or content, rendered between the optional start and end icons.

Name	Type	Description
ChildContent	RenderFragment	Button label or content, rendered between the optional start and end icons.

From MudButton

Button keeps MudButton's parameter names, so most markup moves over by dropping the Mud prefix. See the migration guide for the shared enums, icons and services.

Since daisyUI 5.7 (the version the preset bundles), any .btn with aria-disabled="true" gets pointer-events: none, so it no longer receives clicks or hover. That is what Disabled wants, but a button you deliberately keep clickable while marked aria-disabled (to explain why the action is unavailable) goes dead. Put the explanation on a wrapper instead (a Tooltip around the disabled Button still shows on hover), or opt back in with your own rule after the preset import, e.g. .btn.btn-explain[aria-disabled="true"] { pointer-events: auto; }.