Buttons

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

Common buttons

Props	Type	Description
variant	String: filled, tonal, outlined, elevated, text	Set the variant of the button.
className	String	Refine the styles if the default ones don't fit and need customization.
onClick	Function	Controls the button's behaviour.
iconLeft	Node	Adds icon before button label
iconRight	Node	Adds icon after button label
icon	Node	Adds single icon button
disabled	Boolean	Set the state of the button to disabled.
children	Node	Set the displayed text on the button.
text	String	Set the displayed text on the button.

Extended FAB

Props	Type	Description
variant	String: surface, secondary, tertiary	Set the variant of the button.
className	String	Refine the styles if the default ones don't fit and need customization.
onClick	Function	Controls the button's behaviour.
icon	Node	Adds single icon button
disabled	Boolean	Set the state of the button to disabled.
children	Node	Set the displayed text on the button.
text	String	Set the displayed text on the button.

FAB

Props	Type	Description
variant	String: surface, secondary, tertiary	Set the variant of the button.
className	String	Refine the styles if the default ones don't fit and need customization.
onClick	Function	Controls the button's behaviour.
icon	Node	Adds single icon button
disabled	Boolean	Set the state of the button to disabled.

Icon buttons

Name	Type	Description
variant	String: filled, tonal, outlined, standart️	Set the variant of the button.
className	String	Refine the styles if the default ones don't fit and need customization.
onClick	Function	Controls the button's behaviour.
icon	Node	Adds single icon button
disabled	Boolean	Set the state of the button to disabled.
id️	String	The 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 ...