Button
Demonstration and configuration of the Radzen Blazor Button component.
Filled Buttons
link
These are the default Radzen Buttons.
Primary
Secondary
Info
Success
Warning
Danger
Filled Shades
Primary
Secondary
Info
Success
Warning
Danger
Primary
Secondary
Info
Success
Warning
Danger
Primary
Secondary
Info
Success
Warning
Danger
Primary
Secondary
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
Info
Success
Warning
Danger
Flat Shades
Primary
Secondary
Info
Success
Warning
Danger
Primary
Secondary
Info
Success
Warning
Danger
Primary
Secondary
Info
Success
Warning
Danger
Primary
Secondary
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
Info
Success
Warning
Danger
Outlined Shades
Primary
Secondary
Info
Success
Warning
Danger
Primary
Secondary
Info
Success
Warning
Danger
Primary
Secondary
Info
Success
Warning
Danger
Primary
Secondary
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
Info
Success
Warning
Danger
Text Shades
Primary
Secondary
Info
Success
Warning
Danger
Primary
Secondary
Info
Success
Warning
Danger
Primary
Secondary
Info
Success
Warning
Danger
Primary
Secondary
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_outline
add_circle_outline
refresh
refresh
privacy_tip
check_circle
warning_amber
report
Icon and text button
add_circle_outline
Add New
add_circle_outline
Add New
refresh
Refresh
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
Light
Info
Success
Warning
Danger
Busy button
link
Use IsBusy="true"
to show the busy indicator.
Introducing Radzen Blazor Studio
Radzen Blazor Studio is a desktop tool that empowers developers to create beautiful business Blazor apps. Develop your Blazor Server and WebAssembly applications visually with familiar WYSIWYG interface.
Radzen Blazor Components, © 2018-2023 Radzen.
Source Code licensed under
MIT
New
Radzen Blazor Studio
Radzen Blazor Studio is a desktop tool that empowers developers to create beautiful Blazor apps.
Develop your Blazor Server and WebAssembly applications visually with familiar WYSIWYG interface.