Blazor Button
The Radzen Blazor Button comes in filled, flat, outlined, and text variants, with sizes, icons, shades, busy and disabled states, and click handling.
Filled Buttons linkLink to this section
These are the default Radzen Buttons.
Filled Shades
Filled Light and Dark
Light and Dark button styles don't have Shades
Flat Buttons linkLink to this section
Use Variant="Variant.Flat" for flat button variant.
Flat Shades
Flat Light and Dark
Light and Dark button styles don't have Shades
Outlined Buttons linkLink to this section
Use Variant="Variant.Outlined" for outlined button variant.
Outlined Shades
Outlined Light and Dark
Light and Dark button styles don't have Shades
Text Buttons linkLink to this section
Use Variant="Variant.Text" for text button variant.
Text Shades
Text Light and Dark
Light and Dark button styles don't have Shades
Content in Buttons linkLink to this section
Text, icons and images can be added to a button.
Icon only button
Icon and text button
Images
Button Sizes linkLink to this section
Use the Size property to set button size. Available sizes are ExtraSmall, Small, Medium (default), and
Large.
Icon
Text
Icon and Text
FAB-like button linkLink to this section
See how you can achieve Floating action button look and feel. See also the standalone RadzenFab and RadzenFabMenu components.
Disabled Button linkLink to this section
Use Disabled="true" to disable a button.
Busy button linkLink to this section
Use IsBusy="true" to show the busy indicator.
Keyboard Navigation linkLink to this section
The following keys or key combinations provide a way for users to navigate and interact with Radzen Blazor Button component.
| Press this key | To do this |
|---|---|
| Tab | Navigate to a button. |
| Enter | Click the focused button. |
| Space | Click the focused button. |
Frequently asked questions
What button styles does the Radzen Blazor Button support?
It supports filled, flat, outlined, and text variants, each with shades, sizes, and icon support, so you can match primary, secondary, and subtle actions.
How do I add an icon to a Blazor Button?
Set the Icon property to a Material icon name; you can combine it with Text or use an icon-only button.
How do I show a busy or disabled Button?
Set IsBusy to true to show a spinner and block clicks during an operation, and set Disabled to true to disable the button.
Related
Radzen Blazor Components, © 2018-2026 Radzen.
Source Code licensed under
MIT