BladeTail UI

home
v2 Docs
Livewire Data-table

Button

Blade component for button

The button with basic style and three different sizes! You can also use default HTML attributes for the button in this component!

Basic

No styles and colors!

<x-btn> Button </x-btn>

Result


Sizes

Three sizes: sm, md, xl

<x-btn sm gray> Button </x-btn>
<x-btn md gray> Button </x-btn>
<x-btn xl gray> Button </x-btn>

Result


Colors

Two colors: gray, light-gray

<x-btn md gray> Button </x-btn>
<x-btn md dark-gray> Button </x-btn>

Result

Custom Styles

Normal tailwind css classes

<x-btn md class="bg-green-400 hover:bg-green-700 hover:shadow-sm transition"> Button </x-btn>
<x-btn md class="bg-gradient-to-tr from-pink-800 to-red-500 text-white transition"> Button </x-btn>

Result

Home
Livewire DataTable
blog

© 2021, BladeTail-UI.

Made with by Deva

Build with Laravel, TailwindCSS, Livewire and AlpineJS