Button

Button Primary

X Small

button-primary-x-small.html

<button class="px-3 py-2 text-xs hover:bg-red-700 text-white rounded font-medium  bg-red-500"> X-Small </button>

Small

button-primary-small.html

<button class="px-3 py-2 text-md hover:bg-red-700 text-white rounded font-medium  bg-red-500"> Small </button>

Medium

button-primary-medium.html

<button class="px-3 py-3 text-base hover:bg-red-700 text-white rounded font-medium  bg-red-500"> Medium </button>

Large

button-primary-large.html

<button class="px-3 py-3 text-lg hover:bg-red-700 text-white rounded font-medium  bg-red-500"> Large </button>

Button Secondary

X Small

button-secondary-x-small.html

<button class="px-3 py-2 text-xs text-red-500 rounded font-medium border hover:bg-red-500 hover:text-white  border-red"> X-Small </button>

Small

button-secondary-small.html

<button class="px-3 py-2 text-md text-red-500 rounded font-medium  border hover:bg-red-500 hover:text-white border-red-500"> Small </button>

Medium

button-secondary-medium.html

<button class="px-3 py-3 text-base text-red-500 rounded font-medium  border hover:bg-red-500 hover:text-white border-red-500"> Medium </button>

Large

button-secondary-large.html

<button class="px-3 py-3 text-lg text-red-500 rounded font-medium  border hover:bg-red-500 hover:text-white border-red-500"> Large </button>

Button Disabled

X Small

button-disabled-x-small.html

<button class="px-3 py-2 text-xs cursor-not-allowed text-white rounded font-medium  bg-gray-400"> X-Small </button>

Small

button-disabled-small.html

<button class="px-3 py-2 text-md cursor-not-allowed text-white rounded font-medium  bg-gray-400"> Small </button>

Medium

button-disabled-medium.html

<button class="px-3 py-3 text-base cursor-not-allowed text-white rounded font-medium  bg-gray-400"> Medium </button>

Large

button-disabled-large.html

<button class="px-3 py-3 text-lg cursor-not-allowed text-white rounded font-medium  bg-gray-400"> Large </button>

Button Text

X Small

button-text-x-small.html

<button class="px-3 py-2 text-xs hover:bg-red-500 hover:text-white text-red-500 rounded font-medium"> X-Small </button>

Small

button-text-small.html

<button class="px-3 py-2 text-md hover:bg-red-500 hover:text-white text-red-500 rounded font-medium"> Small </button>

Medium

button-text-medium.html

<button class="px-3 py-3 text-base hover:bg-red-500 hover:text-white text-red-500 rounded font-medium"> Medium </button>

Large

button-text-large.html

<button class="px-3 py-3 text-lg hover:bg-red-500 hover:text-white text-red-500 rounded font-medium"> Large </button>