ComponentsActions
Button
Buttons start an action. Choose the variant by emphasis: one filled button per view, outlined for secondary actions, text for the rest.
Variants
Emphasis comes from the variant, not the color. A filled button marks the primary action of a view.
Every variant and color
All 36 combinations of Variant and Color, rendered from the enums. Inherit and Transparent take their color from the surroundings.
| Variant ↓ · Color → | Default | Primary | Secondary | Tertiary | Info | Success | Warning | Error | Dark | Transparent | Inherit | Surface |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Text | ||||||||||||
| Filled | ||||||||||||
| Outlined |
Sizes and icons
Icons lead (start) or trail (end) the label. Keep the label: an icon alone needs an IconButton with an accessible name.
Small
Medium
Large
States, links and busy work
Disabled, full width, without shadow or ripple, rendered as a link, and a button that stays busy while asynchronous work runs.
Playground
Change any parameter; the markup below updates with only the values that differ from the defaults.
Filled
Primary
Medium
<MudButton
Variant="Variant.Filled"
Color="Color.Primary"
StartIcon="@Icons.Material.Outlined.Favorite">Buy tickets</MudButton>