Buttons are important elements of web design. Basically, buttons are styled links that grab the users’ attention. They help users navigate our websites or apps and drive them to a particular action like submitting a contact form or placing an order as easy as possible. Below we are presenting a dynamic example of the Button component that you can use in your Taco project.
<Button color="blue" ripple="light" > Button </Button>
The Button component comes with 4 different variants that you can change it using the variant prop.
<Button color="blue" ripple="light" variant="filled" > Filled </Button> <Button color="blue" ripple="light" variant="gradient" > Gradient </Button> <Button color="blue" ripple="dark" variant="outlined" > Outlined </Button> <Button color="blue" ripple="dark" variant="text" > Text </Button>
The Button component comes with 3 different sizes that you can change it using the size prop.
<Button color="blue" ripple="light" size="sm" > Small </Button> <Button color="blue" ripple="light" size="md" > Medium </Button> <Button color="blue" ripple="light" size="lg" > Large </Button>
The Button component comes with 19 different colors that you can change it using the color prop, below there are some examples of the colors but you can check all of the them here.
<Button color="green" ripple="light" > Color Green </Button> <Button color="blue" ripple="light" > Color Blue </Button> <Button color="red" ripple="light" > Color Red </Button> <Button color="amber" ripple="light" > Color Amber </Button>
A Button could be a block level component as well that get's all the available space in a row. You can render a Button as a block level element using the full-width prop.
<Button color="blue" ripple="light" full-width > Block Level Button </Button>
You can turn use the ripple effect for the Button component using the ripple prop.
<Button color="blue" > Without Ripple Effect </Button> <Button color="blue" ripple="light" > Ripple Effect Light </Button> <Button color="blue" ripple="dark" > Ripple Effect Dark </Button>
<Button color="blue" variant="filled" size="md" > Click me </Button>