Button
Demonstration and configuration of the Radzen Blazor Button component.
Filled Buttons
link
These are the default Radzen Buttons.
Primary
Secondary
Base
Info
Success
Warning
Danger
Filled Shades
Primary
Base
Info
Success
Warning
Danger
Primary
Secondary
Base
Info
Success
Warning
Danger
Primary
Secondary
Base
Info
Success
Warning
Danger
Primary
Secondary
Base
Info
Success
Warning
Danger
Filled Light and Dark
Light and Dark button styles don't have Shades
Light
Dark
Flat Buttons
link
Use Variant="Variant.Flat"
for flat button variant.
Primary
Secondary
Base
Info
Success
Warning
Danger
Flat Shades
Primary
Secondary
Base
Info
Success
Warning
Danger
Primary
Secondary
Base
Info
Success
Warning
Danger
Primary
Secondary
Base
Info
Success
Warning
Danger
Primary
Secondary
Base
Info
Success
Warning
Danger
Flat Light and Dark
Light and Dark button styles don't have Shades
Light
Dark
Outlined Buttons
link
Use Variant="Variant.Outlined"
for outlined button variant.
Primary
Secondary
Base
Info
Success
Warning
Danger
Outlined Shades
Primary
Secondary
Base
Info
Success
Warning
Danger
Primary
Secondary
Base
Info
Success
Warning
Danger
Primary
Secondary
Base
Info
Success
Warning
Danger
Primary
Secondary
Base
Info
Success
Warning
Danger
Outlined Light and Dark
Light and Dark button styles don't have Shades
Light
Dark
Text Buttons
link
Use Variant="Variant.Text"
for text button variant.
Primary
Secondary
Base
Info
Success
Warning
Danger
Text Shades
Primary
Secondary
Base
Info
Success
Warning
Danger
Primary
Secondary
Base
Info
Success
Warning
Danger
Primary
Secondary
Base
Info
Success
Warning
Danger
Primary
Secondary
Base
Info
Success
Warning
Danger
Text Light and Dark
Light and Dark button styles don't have Shades
Light
Dark
Content in Buttons
link
Text, icons and images can be added to a button.
Icon only button
add_circle
add_circle
refresh
privacy_tip
check_circle
warning_amber
report
Icon and text button
add_circle Add New
add_circle Add New
refresh Refresh
privacy_tip Privacy tip
check_circle Publish
warning_amber Warning
report Report
Images
Button with content
Button Sizes
link
Use the Size
property to set button size. Available sizes are ExtraSmall, Small, Medium (default), and Large.
Icon
add
add
add
add
Text
Create
Create
Create
Create
Icon and Text
add Create
add Create
add Create
add Create
Floating action button.
Disabled Button
link
Use Disabled="true"
to disable a button.
Primary
Secondary
Base
Info
Success
Warning
Danger
Busy button
link
Use IsBusy="true"
to show the busy indicator.
Keyboard Navigation
link
The following keys or key combinations provide a way for users to navigate and interact with Radzen Blazor Button component.
Supercharge your Blazor development with Radzen Blazor Studio
Radzen Blazor Studio is a software development environment that empowers developers to design, build and deploy Blazor applications without the traditional hurdles. Write less code and get more done.
play_circle See in Action
open_in_new Learn More
Radzen Blazor Components, © 2018-2024 Radzen.
Source Code licensed under
MIT