Tailwind CSS Button - Taco Svelte

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>

Button Variants

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>

Button Sizes

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>

Button colors

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>

Block Level 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 fullWidth prop.

<Button 
color="blue" 
ripple="light"
fullWidth
>
   Block Level Button
</Button>

Button Ripple Effect

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>

Custom Button

<Button 
    color="blue" 
    variant="filled"
    size="md"
    fullWidth="{false}"
    
>
    Click me
</Button>