Skip to main content

Button

The Button component allows a user to take actions or make choices with a single tap.

The Button component is used independently or as a form component. To use it as a form component, place it within a Form Block.

Properties

NameTypeDefaultDescription
textstringSpecifies the text to display on the component.
typebutton
reset
submit
submitDefines the type of the component.
disabledboolfalseIf true, the button is disabled.
hrefstringA URL to link to when the component is clicked.

Style Attributes

NameTypeDefaultDescription
variantcontained
outlined
text
string
textDefines the display type of the component.
colorprimary
secondary
inherit
info
error
success
warning
string
primaryDefines the color of the component.
sizesmall
medium
large
string
mediumDefines the size of the component.
fullWidthboolfalseIf true, the button takes up the full width of its container.
disableElevationboolfalseIf true, no elevation is used.
disableFocusRippleboolfalseIf true, the keyboard focus ripple is disabled.
disableRippleboolfalseIf true, the ripple effect is disabled.

Subcomponents

The Button component has a subcomponent that allows the placement of an icon on the left or right side of the button face.

Icon

Left Icon - specifies an icon to use on the left side of the button face.

Right Icon - specifies an icon to use on the right side of the button face.

For further details, see the Icon component.

Properties

NameTypeDefaultDescription
colorinherit
primary
secondary
action
disabled
error
string
inheritDefines the color of the icon.
sizeinherit
small
medium
large
string
smallDefines the size of the icon.
viewBox0 0 24 24Defines the size of the view box that displays the icon.
fillhex #ffffff
rgb 5,5,5
The fill color of the icon.
strokehex #ffffff
rgb 5,5,5
The stroke color of the icon.

For more detail on the Button component, see the MUI developer docs.

on this page
Was this article useful?
89% of our users said this content was useful.