Button

<div
	class="space-y-12">

	{# Blue #}
	<div class="flex flex-wrap gap-4 items-center">
		<button type="button" class="rounded font-bold leading-none text-white px-5 py-3 bg-blue-60v hover:bg-blue-warm-70v active:bg-blue-warm-80v focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
		<button type="button" class="rounded font-bold leading-none text-white px-5 py-3 bg-blue-60v hover:bg-blue-warm-70v active:bg-blue-warm-80v focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v disabled:bg-gray-20 disabled:text-gray-70 disabled:cursor-not-allowed" disabled aria-disabled="true">Default</button>

		<button type="button" class="rounded font-bold leading-none text-white px-6 py-4 text-xl bg-blue-60v hover:bg-blue-warm-70v active:bg-blue-warm-80v focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
		<button type="button" class="rounded font-bold leading-none text-white px-6 py-4 text-xl bg-blue-60v hover:bg-blue-warm-70v active:bg-blue-warm-80v focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v disabled:bg-gray-20 disabled:text-gray-70 disabled:cursor-not-allowed" disabled aria-disabled="true">Default</button>
	</div>

	{# Red #}
	<div class="flex flex-wrap gap-4 items-center">
		<button type="button" class="rounded font-bold leading-none text-white px-5 py-3 bg-red-50 hover:bg-red-60v active:bg-red-70v focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
		<button type="button" class="rounded font-bold leading-none text-white px-5 py-3 bg-red-50 hover:bg-red-60v active:bg-red-70v focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v disabled:bg-gray-20 disabled:text-gray-70 disabled:cursor-not-allowed" disabled aria-disabled="true">Default</button>

		<button type="button" class="rounded font-bold leading-none text-white px-6 py-4 text-xl bg-red-50 hover:bg-red-60v active:bg-red-70v focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
		<button type="button" class="rounded font-bold leading-none text-white px-6 py-4 text-xl bg-red-50 hover:bg-red-60v active:bg-red-70v focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v disabled:bg-gray-20 disabled:text-gray-70 disabled:cursor-not-allowed" disabled aria-disabled="true">Default</button>
	</div>

	{# Cyan #}
	<div class="flex flex-wrap gap-4 items-center">
		<button type="button" class="rounded font-bold leading-none text-gray-90 px-5 py-3 bg-cyan-30v hover:bg-blue-cool-40v active:bg-blue-cool-60v active:text-white focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
		<button type="button" class="rounded font-bold leading-none text-gray-90 px-5 py-3 bg-cyan-30v hover:bg-blue-cool-40v active:bg-blue-cool-60v active:text-white focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v disabled:bg-gray-20 disabled:text-gray-70 disabled:cursor-not-allowed" disabled aria-disabled="true">Default</button>

		<button type="button" class="rounded font-bold leading-none text-gray-90 px-6 py-4 text-xl bg-cyan-30v hover:bg-blue-cool-40v active:bg-blue-cool-60v active:text-white focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
		<button type="button" class="rounded font-bold leading-none text-gray-90 px-6 py-4 text-xl bg-cyan-30v hover:bg-blue-cool-40v active:bg-blue-cool-60v active:text-white focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v disabled:bg-gray-20 disabled:text-gray-70 disabled:cursor-not-allowed" disabled aria-disabled="true">Default</button>
	</div>

	{# Orange #}
	<div class="flex flex-wrap gap-4 items-center">
		<button type="button" class="rounded font-bold leading-none text-gray-90 px-5 py-3 bg-orange-30v hover:bg-orange-50v hover:text-white active:bg-orange-60 active:text-white focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
		<button type="button" class="rounded font-bold leading-none text-gray-90 px-5 py-3 bg-orange-30v hover:bg-orange-50v hover:text-white active:bg-orange-60 active:text-white focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v disabled:bg-gray-20 disabled:text-gray-70 disabled:cursor-not-allowed" disabled aria-disabled="true">Default</button>

		<button type="button" class="rounded font-bold leading-none text-gray-90 px-6 py-4 text-xl bg-orange-30v hover:bg-orange-50v hover:text-white active:bg-orange-60 active:text-white focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
		<button type="button" class="rounded font-bold leading-none text-gray-90 px-6 py-4 text-xl bg-orange-30v hover:bg-orange-50v hover:text-white active:bg-orange-60 active:text-white focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v disabled:bg-gray-20 disabled:text-gray-70 disabled:cursor-not-allowed" disabled aria-disabled="true">Default</button>
	</div>

	{# Gray #}
	<div class="flex flex-wrap gap-4 items-center">
		<button type="button" class="rounded font-bold leading-none text-white px-5 py-3 bg-gray-50 hover:bg-gray-60 active:bg-gray-80 focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
		<button type="button" class="rounded font-bold leading-none text-white px-5 py-3 bg-gray-50 hover:bg-gray-60 active:bg-gray-80 focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v disabled:bg-gray-20 disabled:text-gray-70 disabled:cursor-not-allowed" disabled aria-disabled="true">Default</button>

		<button type="button" class="rounded font-bold leading-none text-white px-6 py-4 text-xl bg-gray-50 hover:bg-gray-60 active:bg-gray-80 focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
		<button type="button" class="rounded font-bold leading-none text-white px-6 py-4 text-xl bg-gray-50 hover:bg-gray-60 active:bg-gray-80 focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v disabled:bg-gray-20 disabled:text-gray-70 disabled:cursor-not-allowed" disabled aria-disabled="true">Default</button>
	</div>

	{# Blue Outline #}
	<div class="flex flex-wrap gap-4 items-center">
		<button type="button" class="rounded font-bold leading-none text-blue-60v px-5 py-3 bg-transparent ring-inset ring-2 ring-blue-60v hover:ring-blue-warm-70v hover:text-blue-warm-70v active:ring-blue-warm-80v active:text-blue-warm-80v focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
		<button type="button" class="rounded font-bold leading-none text-blue-60v px-5 py-3 bg-transparent ring-inset ring-2 ring-blue-60v hover:ring-blue-warm-70v hover:text-blue-warm-70v active:ring-blue-warm-80v active:text-blue-warm-80v focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v disabled:ring-gray-20 disabled:text-gray-50 disabled:cursor-not-allowed" disabled aria-disabled="true">Default</button>

		<button type="button" class="rounded font-bold leading-none text-blue-60v px-6 py-4 text-xl bg-transparent ring-inset ring-2 ring-blue-60v hover:ring-blue-warm-70v hover:text-blue-warm-70v active:ring-blue-warm-80v active:text-blue-warm-80v focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
		<button type="button" class="rounded font-bold leading-none text-blue-60v px-6 py-4 text-xl bg-transparent ring-inset ring-2 ring-blue-60v hover:ring-blue-warm-70v hover:text-blue-warm-70v active:ring-blue-warm-80v active:text-blue-warm-80v focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v disabled:ring-gray-20 disabled:text-gray-50 disabled:cursor-not-allowed" disabled aria-disabled="true">Default</button>
	</div>

	{# Outline Light #}
	<div class="flex flex-wrap gap-4 items-center bg-black py-4">
		<button type="button" class="rounded font-bold leading-none text-gray-10 px-5 py-3 bg-transparent ring-inset ring-2 ring-gray-10 hover:ring-gray-5 hover:text-gray-5 active:ring-white active:text-white focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
		<button type="button" class="rounded font-bold leading-none text-gray-10 px-5 py-3 bg-transparent ring-inset ring-2 ring-gray-10 hover:ring-gray-5 hover:text-gray-5 active:ring-white active:text-white focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v disabled:ring-gray-40 disabled:text-gray-40 disabled:cursor-not-allowed" disabled aria-disabled="true">Default</button>

		<button type="button" class="rounded font-bold leading-none text-gray-10 px-6 py-4 text-xl bg-transparent ring-inset ring-2 ring-gray-10 hover:ring-gray-5 hover:text-gray-5 active:ring-white active:text-white focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
		<button type="button" class="rounded font-bold leading-none text-gray-10 px-6 py-4 text-xl bg-transparent ring-inset ring-2 ring-gray-10 hover:ring-gray-5 hover:text-gray-5 active:ring-white active:text-white focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v disabled:ring-gray-40 disabled:text-gray-40 disabled:cursor-not-allowed" disabled aria-disabled="true">Default</button>
	</div>

	{# Unstyled #}
	<div class="flex flex-wrap gap-4 items-center">
		<button type="button" class="underline leading-none text-blue-60v bg-transparent hover:text-blue-warm-70v active:text-blue-warm-80v focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
		<button type="button" class="underline leading-none text-blue-60v bg-transparent hover:text-blue-warm-70v active:text-blue-warm-80v focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v disabled:ring-gray-40 disabled:text-gray-40 disabled:cursor-not-allowed" disabled aria-disabled="true">Default</button>

		<button type="button" class="underline leading-none text-xl text-blue-60v bg-transparent hover:text-blue-warm-70v active:text-blue-warm-80v focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
		<button type="button" class="underline leading-none text-xl text-blue-60v bg-transparent hover:text-blue-warm-70v active:text-blue-warm-80v focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v disabled:ring-gray-40 disabled:text-gray-40 disabled:cursor-not-allowed" disabled aria-disabled="true">Default</button>
	</div>

	{# Unstyled Light #}
	<div class="flex flex-wrap gap-4 items-center bg-black py-4">
		<button type="button" class="underline leading-none text-gray-10 bg-transparent hover:text-gray-5 active:text-white focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
		<button type="button" class="underline leading-none text-gray-10 hover:text-gray-5 active:text-white bg-transparent focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v disabled:ring-gray-40 disabled:text-gray-40 disabled:cursor-not-allowed" disabled aria-disabled="true">Default</button>

		<button type="button" class="underline leading-none text-xl text-gray-10 hover:text-gray-5 active:text-white bg-transparent focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Default</button>
		<button type="button" class="underline leading-none text-xl text-gray-10 hover:text-gray-5 active:text-white bg-transparent focus:outline focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v disabled:ring-gray-40 disabled:text-gray-40 disabled:cursor-not-allowed" disabled aria-disabled="true">Default</button>
	</div>

</div>