Buttons

Use different button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Solid color variants

Predefined solid color button styles.

<button
		type="button"
		class="btn gap-x-2 bg-indigo-600 text-white border-indigo-600 disabled:opacity-50 disabled:pointer-events-none hover:bg-indigo-800 hover:border-indigo-800 active:bg-indigo-800 active:border-indigo-800 focus:outline-none focus:ring-4 focus:ring-indigo-300"
	>
		Button
	</button>
	<button
		type="button"
		class="btn gap-x-2 bg-gray-300 text-gray-700 border-gray-300 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-gray-700 hover:border-gray-700 active:bg-gray-700 active:border-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-300 me-1"
	>
		Button
	</button>
	<button
		type="button"
		class="btn gap-x-2 bg-teal-600 text-white border-teal-600 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-teal-700 hover:border-teal-700 active:bg-teal-700 active:border-teal-700 focus:outline-none focus:ring-4 focus:ring-teal-300"
	>
		Button
	</button>
	<button
		type="button"
		class="btn gap-x-2 bg-blue-700 text-white border-blue-700 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-blue-700 hover:border-blue-700 active:bg-blue-700 active:border-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-300"
	>
		Button
	</button>
	<button
		type="button"
		class="btn gap-x-2 bg-red-600 text-white border-red-600 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-red-700 hover:border-red-700 active:bg-red-700 active:border-red-700 focus:outline-none focus:ring-4 focus:ring-red-300"
	>
		Button
	</button>
	<button
		type="button"
		class="btn gap-x-2 bg-yellow-600 text-white border-yellow-600 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-yellow-700 hover:border-yellow-700 active:bg-yellow-700 active:border-yellow-700 focus:outline-none focus:ring-4 focus:ring-yellow-300"
	>
		Button
	</button>
	<button
		type="button"
		class="btn gap-x-2 bg-gray-800 text-white border-gray-800 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-gray-900 hover:border-gray-900 active:bg-gray-900 active:border-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300"
	>
		Button
	</button>
	<button
		type="button"
		class="btn gap-x-2 bg-gray-300 text-white border-gray-300 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-gray-700 hover:border-gray-700 active:bg-gray-700 active:border-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-300"
	>
		Button
	</button>
	<button
		type="button"
		class="btn gap-x-2 bg-white text-gray-800 border-white disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-gray-700 hover:border-gray-700 active:bg-gray-700 active:border-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-300"
	>
		Button
	</button>

Sizes

Buttons stacked small to large sizes.

<button
                            type="button"
                            class="btn btn-sm gap-x-2 bg-indigo-600 text-white border-indigo-600 disabled:opacity-50 disabled:pointer-events-none hover:bg-indigo-800 hover:border-indigo-800 active:bg-indigo-800 active:border-indigo-800 focus:outline-none focus:ring-4 focus:ring-indigo-300"
                            >
                         Small Button
                         </button>
                         <button
                            type="button"
                            class="btn gap-x-2 bg-indigo-600 text-white border-indigo-600 disabled:opacity-50 disabled:pointer-events-none hover:bg-indigo-800 hover:border-indigo-800 active:bg-indigo-800 active:border-indigo-800 focus:outline-none focus:ring-4 focus:ring-indigo-300"
                            >
                         Button
                         </button>
                         <button
                            type="button"
                            class="btn btn-lg gap-x-2 bg-indigo-600 text-white border-indigo-600 disabled:opacity-50 disabled:pointer-events-none hover:bg-indigo-800 hover:border-indigo-800 active:bg-indigo-800 active:border-indigo-800 focus:outline-none focus:ring-4 focus:ring-indigo-300"
                            >
                         Large Button
                         </button>