Buttons

A button is a box area or text that communicates and triggers user actions when clicked.

Common buttons

Props
Type
Description
variantString: filled, tonal, outlined, elevated, textSet the variant of the button.
classNameStringRefine the styles if the default ones don't fit and need customization.
onClickFunctionControls the button's behaviour.
iconLeftNodeAdds icon before button label
iconRightNodeAdds icon after button label
iconNodeAdds single icon button
disabledBooleanSet the state of the button to disabled.
childrenNodeSet the displayed text on the button.
textStringSet the displayed text on the button.

Extended FAB

Props
Type
Description
variantString: surface, secondary, tertiarySet the variant of the button.
classNameStringRefine the styles if the default ones don't fit and need customization.
onClickFunctionControls the button's behaviour.
iconNodeAdds single icon button
disabledBooleanSet the state of the button to disabled.
childrenNodeSet the displayed text on the button.
textStringSet the displayed text on the button.

FAB

Props
Type
Description
variantString: surface, secondary, tertiarySet the variant of the button.
classNameStringRefine the styles if the default ones don't fit and need customization.
onClickFunctionControls the button's behaviour.
iconNodeAdds single icon button
disabledBooleanSet the state of the button to disabled.

Icon buttons

Name
Type
Description
variantString: filled, tonal, outlined, standart️Set the variant of the button.
classNameStringRefine the styles if the default ones don't fit and need customization.
onClickFunctionControls the button's behaviour.
iconNodeAdds single icon button
disabledBooleanSet the state of the button to disabled.
id️StringThe id attribute.

Segmented buttons

New-York, often called New York City or NYC, is the most populous city in the United States. With a 2020 population of 8,804,190 distributed over 300.46 ...

img