Button

The Button component allows a user to take actions or make choices with a single tap. It is used independently or as a form component within a Form Block.

Properties

Name	Type	Default	Description
text	string		Specifies the text to display on the component.
type	button reset submit	submit	Defines the type of the component.
disabled	bool	false	If true, the button is disabled.
href	string		A URL to link to when the component is clicked.

Style Attributes

Name	Type	Default	Description
variant	contained outlined text string	text	Defines the display type of the component.
color	primary secondary inherit info error success warning string	primary	Defines the color of the component.
size	small medium large string	medium	Defines the size of the component.
fullWidth	bool	false	If true, the button takes up the full width of its container.
disableElevation	bool	false	If true, no elevation is used.
disableFocusRipple	bool	false	If true, the keyboard focus ripple is disabled.
disableRipple	bool	false	If 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

Name	Type	Default	Description
color	inherit primary secondary action disabled error string	inherit	Defines the color of the icon.
size	inherit small medium large string	small	Defines the size of the icon.
viewBox	0 0 24 24		Defines the size of the view box that displays the icon.
fill	hex #ffffff rgb 5,5,5		The fill color of the icon.
stroke	hex #ffffff rgb 5,5,5		The stroke color of the icon.

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