Button
Learn about the button component and it's usage in Toolpad.
Demo
Buttons allow users to take actions, make choices with a single tap.
Usage
Button component becomes usable through an onClick event handler property. It is used to instruct what action to happen in the event of a click. It supports two tabs:
JS Expression
You can write any valid JS that you want to execute on the click of button. It can change component state or call backend code. Below video shows how on a button click, the user input can be shown on a page in a text field component:
Navigation
From this tab, you can configure to move from one page to the other in a Toolpad app.
![Navigating to a page on button click](/static/toolpad/docs/components/button/onclick-navigation.png)
Navigating to a page on button click
Appearance
The Button component has multiple variations supported in Toolpad. Let's look at each of these below.
variant
The variant property supports three different options: contained (default), outlined and text. Contained is a high-emphasis button suited for a primary action. Outlined is for low-emphasis, secondary action. Text is used for less-pronounced actions that ensure user remains focused on the main content.
color
The color property has two options: primary (default) and secondary. These take input from the global theme that you set in Toolpad from the theme tab.
State
Button supports states like loading and disabled to share the state of the component so that user can wait/act accoridngly.