Tailwind CSS Button - Taco Tall Stack

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. 


<x-button data-ripple-light="true">Button</x-button>

Button Variants

See our button examples below. They come in different styles and color. 


<x-button class="mr-3" data-ripple-light="true">Default</x-button>
<x-button color="bg-gradient-to-tr from-blue-600 to-blue-400" class="mr-3" data-ripple-light="true">Gradient</x-button>
<x-button 
    color="bg-transparent" 
    textColor="text-blue-500" 
    shadow="shadow-none hover:shadow-none" 
    border="border border-blue-500"
    ring="ring ring-blue-200"
    class="mr-3 hover:opacity-75" 
    data-ripple-dark="true"
>
    Outlined
</x-button>
<x-button 
    color="bg-transparent hover:bg-blue-500/10 active:bg-blue-500/30"
    textColor="text-blue-500"
    shadow="shadow-none"
    class="mr-3"
    data-ripple-dark="true"
>
    Text
</x-button>

Buttons Sizes

Use this example to create buttons in different sizes. 


<x-button 
    size="py-2 px-4" class="mr-3" 
    data-ripple-light="true"
>
    Small
</x-button>

<x-button 
    size="py-3 px-6" class="mr-3" 
    data-ripple-light="true"
>
    Medium
</x-button>

<x-button 
    size="py-3.5 px-7" class="mr-3" 
    data-ripple-light="true"
>
    Large
</x-button>

Button Colors

Use this example to create a simple button element for your Tailwind CSS project. 


<x-button 
    color="bg-blue-500" shadow="shadow-blue-500/20" class="mr-3" 
    data-ripple-light="true"
>
    Blue
</x-button>

<x-button 
    color="bg-red-500" shadow="shadow-red-500/20" class="mr-3" 
    data-ripple-light="true"
>
    Red
</x-button>

<x-button 
    color="bg-green-500" shadow="shadow-green-500/20" class="mr-3" 
    data-ripple-light="true"
>
    Green
</x-button>

<x-button 
    color="bg-orange-500" shadow="shadow-orange-500/20" class="mr-3" 
    data-ripple-light="true"
>
    Orange
</x-button>

Button with Icon

You can use any type of icons inside the button, in the below example we've used the @fontawesome icon library. 


<x-button class="mr-3" data-ripple-light="true">
    <i class="mr-2 fas fa-bookmark"></i>
    Add to bookmark
</x-button>

<x-button 
    color="!bg-gradient-to-tr from-blue-600 to-blue-400" class="mr-3" 
    data-ripple-light="true"
>
    <i class="mr-2 fas fa-cloud-arrow-up"></i>Upload files
</x-button>

<x-button 
    color="bg-transparent" 
    textColor="text-blue-500" 
    shadow="shadow-none hover:shadow-none" 
    border="border border-blue-500"
    ring="ring ring-blue-200"
    class="mr-3 hover:opacity-75" 
    data-ripple-dark="true"
>
    Refresh<i class="ml-2 fas fa-arrows-rotate"></i>
</x-button>

<x-button 
    color="bg-transparent hover:bg-blue-500/10 active:bg-blue-500/30"
    textColor="text-blue-500"
    shadow="shadow-none"
    class="mr-3"
    data-ripple-dark="true"
>
    Read more<i class="fas fa-arrow-right-long"></i>
</x-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 w-full class. 


<x-button class="w-full" data-ripple-light="true">
    Button
</x-button>

Button Ripple Effect

You can turn on/off the ripple effect for the button component by changing data-ripple-light or data-ripple-dark data attributes to true or false respectively.

breadcrumbs

card