Skip to Content

Button

Below you can find a button component styled with tailwindcss.

Preview - Primary

HTML
<button class="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 text-white bg-brand-primary-500 hover:bg-brand-primary-600 focus-visible:bg-brand-primary-600 focus-visible:outline focus-visible:outline-1 focus-visible:outline-brand-primary-600 focus-visible:outline-offset-2 py-1 px-3 text-sm">
	<div class="flex items-center justify-center px-0.5 rounded w-100% text-center gap-1">Text</div>
</button>
React
<button className="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 text-white bg-brand-primary-500 hover:bg-brand-primary-600 focus-visible:bg-brand-primary-600 focus-visible:outline focus-visible:outline-1 focus-visible:outline-brand-primary-600 focus-visible:outline-offset-2 py-1 px-3 text-sm">
	<div className="flex items-center justify-center px-0.5 rounded w-100% text-center gap-1">Text</div>
</button>

Preview - Primary - Icon Start

HTML
<button class="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 text-white bg-brand-primary-500 hover:bg-brand-primary-600 focus-visible:bg-brand-primary-600 focus-visible:outline focus-visible:outline-1 focus-visible:outline-brand-primary-600 focus-visible:outline-offset-2 py-1 px-3 text-sm">
	<div class="flex items-center justify-center px-0.5 rounded w-100% text-center gap-1">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="24" height="24">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
		Text
	</div>
</button>
React
<button className="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 text-white bg-brand-primary-500 hover:bg-brand-primary-600 focus-visible:bg-brand-primary-600 focus-visible:outline focus-visible:outline-1 focus-visible:outline-brand-primary-600 focus-visible:outline-offset-2 py-1 px-3 text-sm">
	<div className="flex items-center justify-center px-0.5 rounded w-100% text-center gap-1">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="24" height="24">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
		Text
	</div>
</button>

Preview - Primary - Icon End

HTML
<button class="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 text-white bg-brand-primary-500 hover:bg-brand-primary-600 focus-visible:bg-brand-primary-600 focus-visible:outline focus-visible:outline-1 focus-visible:outline-brand-primary-600 focus-visible:outline-offset-2 py-1 px-3 text-sm">
	<div class="flex items-center justify-center px-0.5 rounded w-100% text-center gap-1">
		Text
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="24" height="24">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
	</div>
</button>
React
<button className="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 text-white bg-brand-primary-500 hover:bg-brand-primary-600 focus-visible:bg-brand-primary-600 focus-visible:outline focus-visible:outline-1 focus-visible:outline-brand-primary-600 focus-visible:outline-offset-2 py-1 px-3 text-sm">
	<div className="flex items-center justify-center px-0.5 rounded w-100% text-center gap-1">
		Text
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="24" height="24">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
	</div>
</button>

Preview - Primary - Icon Start/End

HTML
<button class="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 text-white bg-brand-primary-500 hover:bg-brand-primary-600 focus-visible:bg-brand-primary-600 focus-visible:outline focus-visible:outline-1 focus-visible:outline-brand-primary-600 focus-visible:outline-offset-2 py-1 px-3 text-sm">
	<div class="flex items-center justify-center px-0.5 rounded w-100% text-center gap-1">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="24" height="24">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
		Text
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="24" height="24">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
	</div>
</button>
React
<button className="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 text-white bg-brand-primary-500 hover:bg-brand-primary-600 focus-visible:bg-brand-primary-600 focus-visible:outline focus-visible:outline-1 focus-visible:outline-brand-primary-600 focus-visible:outline-offset-2 py-1 px-3 text-sm">
	<div className="flex items-center justify-center px-0.5 rounded w-100% text-center gap-1">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="24" height="24">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
		Text
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="24" height="24">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
	</div>
</button>

Preview - Primary Small

HTML
<button class="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 text-white bg-brand-primary-500 hover:bg-brand-primary-600 focus-visible:bg-brand-primary-600 focus-visible:outline focus-visible:outline-1 focus-visible:outline-brand-primary-600 focus-visible:outline-offset-2 py-1 px-2 text-xs">
	<div class="flex items-center justify-center px-0.5 rounded w-100% text-center gap-0.5">Text</div>
</button>
React
<button className="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 text-white bg-brand-primary-500 hover:bg-brand-primary-600 focus-visible:bg-brand-primary-600 focus-visible:outline focus-visible:outline-1 focus-visible:outline-brand-primary-600 focus-visible:outline-offset-2 py-1 px-2 text-xs">
	<div className="flex items-center justify-center px-0.5 rounded w-100% text-center gap-0.5">Text</div>
</button>

Preview - Primary Small - Icon Start

HTML
<button class="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 text-white bg-brand-primary-500 hover:bg-brand-primary-600 focus-visible:bg-brand-primary-600 focus-visible:outline focus-visible:outline-1 focus-visible:outline-brand-primary-600 focus-visible:outline-offset-2 py-1 px-2 text-xs">
	<div class="flex items-center justify-center px-0.5 rounded w-100% text-center gap-0.5">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="16" height="16">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
		Text
	</div>
</button>
React
<button className="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 text-white bg-brand-primary-500 hover:bg-brand-primary-600 focus-visible:bg-brand-primary-600 focus-visible:outline focus-visible:outline-1 focus-visible:outline-brand-primary-600 focus-visible:outline-offset-2 py-1 px-2 text-xs">
	<div className="flex items-center justify-center px-0.5 rounded w-100% text-center gap-0.5">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="16" height="16">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
		Text
	</div>
</button>

Preview - Primary Small - Icon End

HTML
<button class="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 text-white bg-brand-primary-500 hover:bg-brand-primary-600 focus-visible:bg-brand-primary-600 focus-visible:outline focus-visible:outline-1 focus-visible:outline-brand-primary-600 focus-visible:outline-offset-2 py-1 px-2 text-xs">
	<div class="flex items-center justify-center px-0.5 rounded w-100% text-center gap-0.5">
		Text
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="16" height="16">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
	</div>
</button>
React
<button className="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 text-white bg-brand-primary-500 hover:bg-brand-primary-600 focus-visible:bg-brand-primary-600 focus-visible:outline focus-visible:outline-1 focus-visible:outline-brand-primary-600 focus-visible:outline-offset-2 py-1 px-2 text-xs">
	<div className="flex items-center justify-center px-0.5 rounded w-100% text-center gap-0.5">
		Text
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="16" height="16">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
	</div>
</button>

Preview - Primary Small - Icon Start/End

HTML
<button class="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 text-white bg-brand-primary-500 hover:bg-brand-primary-600 focus-visible:bg-brand-primary-600 focus-visible:outline focus-visible:outline-1 focus-visible:outline-brand-primary-600 focus-visible:outline-offset-2 py-1 px-2 text-xs">
	<div class="flex items-center justify-center px-0.5 rounded w-100% text-center gap-0.5">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="16" height="16">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
		Text
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="16" height="16">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
	</div>
</button>
React
<button className="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 text-white bg-brand-primary-500 hover:bg-brand-primary-600 focus-visible:bg-brand-primary-600 focus-visible:outline focus-visible:outline-1 focus-visible:outline-brand-primary-600 focus-visible:outline-offset-2 py-1 px-2 text-xs">
	<div className="flex items-center justify-center px-0.5 rounded w-100% text-center gap-0.5">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="16" height="16">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
		Text
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="16" height="16">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
	</div>
</button>

Preview - Primary Outlined

HTML
<button class="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 text-brand-primary-500 border border-solid border-brand-primary-500 hover:bg-brand-primary-100 focus-visible:bg-brand-primary-100 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-brand-primary-500 py-1 px-3 text-sm">
	<div class="flex items-center justify-center px-0.5 rounded w-100% text-center gap-1">Text</div>
</button>
React
<button className="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 text-brand-primary-500 border border-solid border-brand-primary-500 hover:bg-brand-primary-100 focus-visible:bg-brand-primary-100 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-brand-primary-500 py-1 px-3 text-sm">
	<div className="flex items-center justify-center px-0.5 rounded w-100% text-center gap-1">Text</div>
</button>

Preview - Primary Outlined - Icon Start

HTML
<button class="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 text-brand-primary-500 border border-solid border-brand-primary-500 hover:bg-brand-primary-100 focus-visible:bg-brand-primary-100 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-brand-primary-500 py-1 px-3 text-sm">
	<div class="flex items-center justify-center px-0.5 rounded w-100% text-center gap-1">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="24" height="24">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
		Text
	</div>
</button>
React
<button className="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 text-brand-primary-500 border border-solid border-brand-primary-500 hover:bg-brand-primary-100 focus-visible:bg-brand-primary-100 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-brand-primary-500 py-1 px-3 text-sm">
	<div className="flex items-center justify-center px-0.5 rounded w-100% text-center gap-1">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="24" height="24">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
		Text
	</div>
</button>

Preview - Primary Outlined - Icon End

HTML
<button class="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 text-brand-primary-500 border border-solid border-brand-primary-500 hover:bg-brand-primary-100 focus-visible:bg-brand-primary-100 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-brand-primary-500 py-1 px-3 text-sm">
	<div class="flex items-center justify-center px-0.5 rounded w-100% text-center gap-1">
		Text
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="24" height="24">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
	</div>
</button>
React
<button className="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 text-brand-primary-500 border border-solid border-brand-primary-500 hover:bg-brand-primary-100 focus-visible:bg-brand-primary-100 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-brand-primary-500 py-1 px-3 text-sm">
	<div className="flex items-center justify-center px-0.5 rounded w-100% text-center gap-1">
		Text
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="24" height="24">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
	</div>
</button>

Preview - Primary Outlined - Icon Start/End

HTML
<button class="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 text-brand-primary-500 border border-solid border-brand-primary-500 hover:bg-brand-primary-100 focus-visible:bg-brand-primary-100 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-brand-primary-500 py-1 px-3 text-sm">
	<div class="flex items-center justify-center px-0.5 rounded w-100% text-center gap-1">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="24" height="24">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
		Text
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="24" height="24">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
	</div>
</button>
React
<button className="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 text-brand-primary-500 border border-solid border-brand-primary-500 hover:bg-brand-primary-100 focus-visible:bg-brand-primary-100 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-brand-primary-500 py-1 px-3 text-sm">
	<div className="flex items-center justify-center px-0.5 rounded w-100% text-center gap-1">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="24" height="24">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
		Text
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="24" height="24">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
	</div>
</button>

Preview - Primary Outlined Small

HTML
<button class="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 text-brand-primary-500 border border-solid border-brand-primary-500 hover:bg-brand-primary-100 focus-visible:bg-brand-primary-100 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-brand-primary-500 py-1 px-2 text-xs">
	<div class="flex items-center justify-center px-0.5 rounded w-100% text-center gap-0.5">Text</div>
</button>
React
<button className="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 text-brand-primary-500 border border-solid border-brand-primary-500 hover:bg-brand-primary-100 focus-visible:bg-brand-primary-100 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-brand-primary-500 py-1 px-2 text-xs">
	<div className="flex items-center justify-center px-0.5 rounded w-100% text-center gap-0.5">Text</div>
</button>

Preview - Primary Outlined Small - Icon Start

HTML
<button class="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 text-brand-primary-500 border border-solid border-brand-primary-500 hover:bg-brand-primary-100 focus-visible:bg-brand-primary-100 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-brand-primary-500 py-1 px-2 text-xs">
	<div class="flex items-center justify-center px-0.5 rounded w-100% text-center gap-0.5">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="16" height="16">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
		Text
	</div>
</button>
React
<button className="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 text-brand-primary-500 border border-solid border-brand-primary-500 hover:bg-brand-primary-100 focus-visible:bg-brand-primary-100 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-brand-primary-500 py-1 px-2 text-xs">
	<div className="flex items-center justify-center px-0.5 rounded w-100% text-center gap-0.5">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="16" height="16">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
		Text
	</div>
</button>

Preview - Primary Outlined Small - Icon End

HTML
<button class="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 text-brand-primary-500 border border-solid border-brand-primary-500 hover:bg-brand-primary-100 focus-visible:bg-brand-primary-100 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-brand-primary-500 py-1 px-2 text-xs">
	<div class="flex items-center justify-center px-0.5 rounded w-100% text-center gap-0.5">
		Text
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="16" height="16">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
	</div>
</button>
React
<button className="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 text-brand-primary-500 border border-solid border-brand-primary-500 hover:bg-brand-primary-100 focus-visible:bg-brand-primary-100 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-brand-primary-500 py-1 px-2 text-xs">
	<div className="flex items-center justify-center px-0.5 rounded w-100% text-center gap-0.5">
		Text
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="16" height="16">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
	</div>
</button>

Preview - Primary Outlined Small - Icon Start/End

HTML
<button class="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 text-brand-primary-500 border border-solid border-brand-primary-500 hover:bg-brand-primary-100 focus-visible:bg-brand-primary-100 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-brand-primary-500 py-1 px-2 text-xs">
	<div class="flex items-center justify-center px-0.5 rounded w-100% text-center gap-0.5">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="16" height="16">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
		Text
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="16" height="16">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
	</div>
</button>
React
<button className="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 text-brand-primary-500 border border-solid border-brand-primary-500 hover:bg-brand-primary-100 focus-visible:bg-brand-primary-100 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-brand-primary-500 py-1 px-2 text-xs">
	<div className="flex items-center justify-center px-0.5 rounded w-100% text-center gap-0.5">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="16" height="16">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
		Text
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="16" height="16">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
	</div>
</button>

Preview - Link

HTML
<button class="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 flex-col items-start text-neutral-500 dark:text-neutral-300 group hover:text-brand-primary-500 dark:hover:text-brand-primary-500 focus-visible:outline-0 after:w-[30%] after:h-[2px] after:bg-neutral-500 dark:after:bg-neutral-300 after:transition-all after:duration-300 after:rounded after:mt-[2px] hover:after:bg-brand-primary-500 dark:hover:after:bg-brand-primary-500 hover:after:w-full focus-visible:after:bg-brand-primary-500 focus-visible:after:w-full disabled:after:bg-brand-primary-400 py-1 px-3 text-sm">
	<div class="flex items-center justify-center px-0.5 rounded w-100% text-center group-focus-visible:bg-brand-primary-500 group-focus-visible:text-white gap-1">Text</div>
</button>
React
<button className="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 flex-col items-start text-neutral-500 dark:text-neutral-300 group hover:text-brand-primary-500 dark:hover:text-brand-primary-500 focus-visible:outline-0 after:w-[30%] after:h-[2px] after:bg-neutral-500 dark:after:bg-neutral-300 after:transition-all after:duration-300 after:rounded after:mt-[2px] hover:after:bg-brand-primary-500 dark:hover:after:bg-brand-primary-500 hover:after:w-full focus-visible:after:bg-brand-primary-500 focus-visible:after:w-full disabled:after:bg-brand-primary-400 py-1 px-3 text-sm">
	<div className="flex items-center justify-center px-0.5 rounded w-100% text-center group-focus-visible:bg-brand-primary-500 group-focus-visible:text-white gap-1">Text</div>
</button>

Preview - Link - Icon Start

HTML
<button class="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 flex-col items-start text-neutral-500 dark:text-neutral-300 group hover:text-brand-primary-500 dark:hover:text-brand-primary-500 focus-visible:outline-0 after:w-[30%] after:h-[2px] after:bg-neutral-500 dark:after:bg-neutral-300 after:transition-all after:duration-300 after:rounded after:mt-[2px] hover:after:bg-brand-primary-500 dark:hover:after:bg-brand-primary-500 hover:after:w-full focus-visible:after:bg-brand-primary-500 focus-visible:after:w-full disabled:after:bg-brand-primary-400 py-1 px-3 text-sm">
	<div class="flex items-center justify-center px-0.5 rounded w-100% text-center group-focus-visible:bg-brand-primary-500 group-focus-visible:text-white gap-1">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="24" height="24">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
		Text
	</div>
</button>
React
<button className="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 flex-col items-start text-neutral-500 dark:text-neutral-300 group hover:text-brand-primary-500 dark:hover:text-brand-primary-500 focus-visible:outline-0 after:w-[30%] after:h-[2px] after:bg-neutral-500 dark:after:bg-neutral-300 after:transition-all after:duration-300 after:rounded after:mt-[2px] hover:after:bg-brand-primary-500 dark:hover:after:bg-brand-primary-500 hover:after:w-full focus-visible:after:bg-brand-primary-500 focus-visible:after:w-full disabled:after:bg-brand-primary-400 py-1 px-3 text-sm">
	<div className="flex items-center justify-center px-0.5 rounded w-100% text-center group-focus-visible:bg-brand-primary-500 group-focus-visible:text-white gap-1">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="24" height="24">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
		Text
	</div>
</button>

Preview - Link - Icon End

HTML
<button class="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 flex-col items-start text-neutral-500 dark:text-neutral-300 group hover:text-brand-primary-500 dark:hover:text-brand-primary-500 focus-visible:outline-0 after:w-[30%] after:h-[2px] after:bg-neutral-500 dark:after:bg-neutral-300 after:transition-all after:duration-300 after:rounded after:mt-[2px] hover:after:bg-brand-primary-500 dark:hover:after:bg-brand-primary-500 hover:after:w-full focus-visible:after:bg-brand-primary-500 focus-visible:after:w-full disabled:after:bg-brand-primary-400 py-1 px-3 text-sm">
	<div class="flex items-center justify-center px-0.5 rounded w-100% text-center group-focus-visible:bg-brand-primary-500 group-focus-visible:text-white gap-1">
		Text
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="24" height="24">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
	</div>
</button>
React
<button className="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 flex-col items-start text-neutral-500 dark:text-neutral-300 group hover:text-brand-primary-500 dark:hover:text-brand-primary-500 focus-visible:outline-0 after:w-[30%] after:h-[2px] after:bg-neutral-500 dark:after:bg-neutral-300 after:transition-all after:duration-300 after:rounded after:mt-[2px] hover:after:bg-brand-primary-500 dark:hover:after:bg-brand-primary-500 hover:after:w-full focus-visible:after:bg-brand-primary-500 focus-visible:after:w-full disabled:after:bg-brand-primary-400 py-1 px-3 text-sm">
	<div className="flex items-center justify-center px-0.5 rounded w-100% text-center group-focus-visible:bg-brand-primary-500 group-focus-visible:text-white gap-1">
		Text
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="24" height="24">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
	</div>
</button>

Preview - Link - Icon Start/End

HTML
<button class="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 flex-col items-start text-neutral-500 dark:text-neutral-300 group hover:text-brand-primary-500 dark:hover:text-brand-primary-500 focus-visible:outline-0 after:w-[30%] after:h-[2px] after:bg-neutral-500 dark:after:bg-neutral-300 after:transition-all after:duration-300 after:rounded after:mt-[2px] hover:after:bg-brand-primary-500 dark:hover:after:bg-brand-primary-500 hover:after:w-full focus-visible:after:bg-brand-primary-500 focus-visible:after:w-full disabled:after:bg-brand-primary-400 py-1 px-3 text-sm">
	<div class="flex items-center justify-center px-0.5 rounded w-100% text-center group-focus-visible:bg-brand-primary-500 group-focus-visible:text-white gap-1">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="24" height="24">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
		Text
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="24" height="24">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
	</div>
</button>
React
<button className="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 flex-col items-start text-neutral-500 dark:text-neutral-300 group hover:text-brand-primary-500 dark:hover:text-brand-primary-500 focus-visible:outline-0 after:w-[30%] after:h-[2px] after:bg-neutral-500 dark:after:bg-neutral-300 after:transition-all after:duration-300 after:rounded after:mt-[2px] hover:after:bg-brand-primary-500 dark:hover:after:bg-brand-primary-500 hover:after:w-full focus-visible:after:bg-brand-primary-500 focus-visible:after:w-full disabled:after:bg-brand-primary-400 py-1 px-3 text-sm">
	<div className="flex items-center justify-center px-0.5 rounded w-100% text-center group-focus-visible:bg-brand-primary-500 group-focus-visible:text-white gap-1">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="24" height="24">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
		Text
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="24" height="24">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
	</div>
</button>

Preview - Link Small

HTML
<button class="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 flex-col items-start text-neutral-500 dark:text-neutral-300 group hover:text-brand-primary-500 dark:hover:text-brand-primary-500 focus-visible:outline-0 after:w-[30%] after:h-[2px] after:bg-neutral-500 dark:after:bg-neutral-300 after:transition-all after:duration-300 after:rounded after:mt-[2px] hover:after:bg-brand-primary-500 dark:hover:after:bg-brand-primary-500 hover:after:w-full focus-visible:after:bg-brand-primary-500 focus-visible:after:w-full disabled:after:bg-brand-primary-400 py-1 px-2 text-xs">
	<div class="flex items-center justify-center px-0.5 rounded w-100% text-center group-focus-visible:bg-brand-primary-500 group-focus-visible:text-white gap-0.5">Text</div>
</button>
React
<button className="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 flex-col items-start text-neutral-500 dark:text-neutral-300 group hover:text-brand-primary-500 dark:hover:text-brand-primary-500 focus-visible:outline-0 after:w-[30%] after:h-[2px] after:bg-neutral-500 dark:after:bg-neutral-300 after:transition-all after:duration-300 after:rounded after:mt-[2px] hover:after:bg-brand-primary-500 dark:hover:after:bg-brand-primary-500 hover:after:w-full focus-visible:after:bg-brand-primary-500 focus-visible:after:w-full disabled:after:bg-brand-primary-400 py-1 px-2 text-xs">
	<div className="flex items-center justify-center px-0.5 rounded w-100% text-center group-focus-visible:bg-brand-primary-500 group-focus-visible:text-white gap-0.5">Text</div>
</button>

Preview - Link Small - Icon Start

HTML
<button class="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 flex-col items-start text-neutral-500 dark:text-neutral-300 group hover:text-brand-primary-500 dark:hover:text-brand-primary-500 focus-visible:outline-0 after:w-[30%] after:h-[2px] after:bg-neutral-500 dark:after:bg-neutral-300 after:transition-all after:duration-300 after:rounded after:mt-[2px] hover:after:bg-brand-primary-500 dark:hover:after:bg-brand-primary-500 hover:after:w-full focus-visible:after:bg-brand-primary-500 focus-visible:after:w-full disabled:after:bg-brand-primary-400 py-1 px-2 text-xs">
	<div class="flex items-center justify-center px-0.5 rounded w-100% text-center group-focus-visible:bg-brand-primary-500 group-focus-visible:text-white gap-0.5">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="16" height="16">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
		Text
	</div>
</button>
React
<button className="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 flex-col items-start text-neutral-500 dark:text-neutral-300 group hover:text-brand-primary-500 dark:hover:text-brand-primary-500 focus-visible:outline-0 after:w-[30%] after:h-[2px] after:bg-neutral-500 dark:after:bg-neutral-300 after:transition-all after:duration-300 after:rounded after:mt-[2px] hover:after:bg-brand-primary-500 dark:hover:after:bg-brand-primary-500 hover:after:w-full focus-visible:after:bg-brand-primary-500 focus-visible:after:w-full disabled:after:bg-brand-primary-400 py-1 px-2 text-xs">
	<div className="flex items-center justify-center px-0.5 rounded w-100% text-center group-focus-visible:bg-brand-primary-500 group-focus-visible:text-white gap-0.5">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="16" height="16">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
		Text
	</div>
</button>

Preview - Link Small - Icon End

HTML
<button class="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 flex-col items-start text-neutral-500 dark:text-neutral-300 group hover:text-brand-primary-500 dark:hover:text-brand-primary-500 focus-visible:outline-0 after:w-[30%] after:h-[2px] after:bg-neutral-500 dark:after:bg-neutral-300 after:transition-all after:duration-300 after:rounded after:mt-[2px] hover:after:bg-brand-primary-500 dark:hover:after:bg-brand-primary-500 hover:after:w-full focus-visible:after:bg-brand-primary-500 focus-visible:after:w-full disabled:after:bg-brand-primary-400 py-1 px-2 text-xs">
	<div class="flex items-center justify-center px-0.5 rounded w-100% text-center group-focus-visible:bg-brand-primary-500 group-focus-visible:text-white gap-0.5">
		Text
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="16" height="16">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
	</div>
</button>
React
<button className="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 flex-col items-start text-neutral-500 dark:text-neutral-300 group hover:text-brand-primary-500 dark:hover:text-brand-primary-500 focus-visible:outline-0 after:w-[30%] after:h-[2px] after:bg-neutral-500 dark:after:bg-neutral-300 after:transition-all after:duration-300 after:rounded after:mt-[2px] hover:after:bg-brand-primary-500 dark:hover:after:bg-brand-primary-500 hover:after:w-full focus-visible:after:bg-brand-primary-500 focus-visible:after:w-full disabled:after:bg-brand-primary-400 py-1 px-2 text-xs">
	<div className="flex items-center justify-center px-0.5 rounded w-100% text-center group-focus-visible:bg-brand-primary-500 group-focus-visible:text-white gap-0.5">
		Text
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="16" height="16">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
	</div>
</button>

Preview - Link Small - Icon Start/End

HTML
<button class="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 flex-col items-start text-neutral-500 dark:text-neutral-300 group hover:text-brand-primary-500 dark:hover:text-brand-primary-500 focus-visible:outline-0 after:w-[30%] after:h-[2px] after:bg-neutral-500 dark:after:bg-neutral-300 after:transition-all after:duration-300 after:rounded after:mt-[2px] hover:after:bg-brand-primary-500 dark:hover:after:bg-brand-primary-500 hover:after:w-full focus-visible:after:bg-brand-primary-500 focus-visible:after:w-full disabled:after:bg-brand-primary-400 py-1 px-2 text-xs">
	<div class="flex items-center justify-center px-0.5 rounded w-100% text-center group-focus-visible:bg-brand-primary-500 group-focus-visible:text-white gap-0.5">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="16" height="16">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
		Text
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="16" height="16">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
	</div>
</button>
React
<button className="flex transition-colors duration-300 font-bold rounded disabled:opacity-30 flex-col items-start text-neutral-500 dark:text-neutral-300 group hover:text-brand-primary-500 dark:hover:text-brand-primary-500 focus-visible:outline-0 after:w-[30%] after:h-[2px] after:bg-neutral-500 dark:after:bg-neutral-300 after:transition-all after:duration-300 after:rounded after:mt-[2px] hover:after:bg-brand-primary-500 dark:hover:after:bg-brand-primary-500 hover:after:w-full focus-visible:after:bg-brand-primary-500 focus-visible:after:w-full disabled:after:bg-brand-primary-400 py-1 px-2 text-xs">
	<div className="flex items-center justify-center px-0.5 rounded w-100% text-center group-focus-visible:bg-brand-primary-500 group-focus-visible:text-white gap-0.5">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="16" height="16">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
		Text
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="none" width="16" height="16">
			<path d="M12.5 8V16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
			<path d="M16.5 12H8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
		</svg>
	</div>
</button>

Preview - Primary Medium

HTML
<button class="rounded box-content transition-all duration-300 w-3 h-3 p-0.5 text-white bg-brand-primary-500 hover:bg-brand-primary-600 focus-visible:bg-brand-primary-600 disabled:bg-brand-primary-600 disabled:opacity-30 outline-0">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
		<path d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009" stroke="currentColor" stroke-width="1.375" stroke-linecap="round" stroke-linejoin="round"></path>
	</svg>
</button>
React
<button className="rounded box-content transition-all duration-300 w-3 h-3 p-0.5 text-white bg-brand-primary-500 hover:bg-brand-primary-600 focus-visible:bg-brand-primary-600 disabled:bg-brand-primary-600 disabled:opacity-30 outline-0">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
		<path d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009" stroke="currentColor" stroke-width="1.375" stroke-linecap="round" stroke-linejoin="round"></path>
	</svg>
</button>

Preview - Primary Medium - Disabled

HTML
<button disabled class="rounded box-content transition-all duration-300 w-3 h-3 p-0.5 text-white bg-brand-primary-500 hover:bg-brand-primary-600 focus-visible:bg-brand-primary-600 disabled:bg-brand-primary-600 disabled:opacity-30 outline-0">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
		<path d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009" stroke="currentColor" stroke-width="1.375" stroke-linecap="round" stroke-linejoin="round"></path>
	</svg>
</button>
React
<button disabled className="rounded box-content transition-all duration-300 w-3 h-3 p-0.5 text-white bg-brand-primary-500 hover:bg-brand-primary-600 focus-visible:bg-brand-primary-600 disabled:bg-brand-primary-600 disabled:opacity-30 outline-0">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
		<path d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009" stroke="currentColor" stroke-width="1.375" stroke-linecap="round" stroke-linejoin="round"></path>
	</svg>
</button>

Preview - Primary Small

HTML
<button class="rounded box-content transition-all duration-300 w-2 h-2 p-0.5 text-white bg-brand-primary-500 hover:bg-brand-primary-600 focus-visible:bg-brand-primary-600 disabled:bg-brand-primary-600 disabled:opacity-30 outline-0">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
		<path d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009" stroke="currentColor" stroke-width="1.375" stroke-linecap="round" stroke-linejoin="round"></path>
	</svg>
</button>
React
<button className="rounded box-content transition-all duration-300 w-2 h-2 p-0.5 text-white bg-brand-primary-500 hover:bg-brand-primary-600 focus-visible:bg-brand-primary-600 disabled:bg-brand-primary-600 disabled:opacity-30 outline-0">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
		<path d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009" stroke="currentColor" stroke-width="1.375" stroke-linecap="round" stroke-linejoin="round"></path>
	</svg>
</button>

Preview - Primary Small - Disabled

HTML
<button disabled class="rounded box-content transition-all duration-300 w-2 h-2 p-0.5 text-white bg-brand-primary-500 hover:bg-brand-primary-600 focus-visible:bg-brand-primary-600 disabled:bg-brand-primary-600 disabled:opacity-30 outline-0">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
		<path d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009" stroke="currentColor" stroke-width="1.375" stroke-linecap="round" stroke-linejoin="round"></path>
	</svg>
</button>
React
<button disabled className="rounded box-content transition-all duration-300 w-2 h-2 p-0.5 text-white bg-brand-primary-500 hover:bg-brand-primary-600 focus-visible:bg-brand-primary-600 disabled:bg-brand-primary-600 disabled:opacity-30 outline-0">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
		<path d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009" stroke="currentColor" stroke-width="1.375" stroke-linecap="round" stroke-linejoin="round"></path>
	</svg>
</button>

Preview - Primary Large

HTML
<button class="rounded box-content transition-all duration-300 w-3 h-3 p-1 text-white bg-brand-primary-500 hover:bg-brand-primary-600 focus-visible:bg-brand-primary-600 disabled:bg-brand-primary-600 disabled:opacity-30 outline-0">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
		<path d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009" stroke="currentColor" stroke-width="1.375" stroke-linecap="round" stroke-linejoin="round"></path>
	</svg>
</button>
React
<button className="rounded box-content transition-all duration-300 w-3 h-3 p-1 text-white bg-brand-primary-500 hover:bg-brand-primary-600 focus-visible:bg-brand-primary-600 disabled:bg-brand-primary-600 disabled:opacity-30 outline-0">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
		<path d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009" stroke="currentColor" stroke-width="1.375" stroke-linecap="round" stroke-linejoin="round"></path>
	</svg>
</button>

Preview - Primary Large - Disabled

HTML
<button disabled class="rounded box-content transition-all duration-300 w-3 h-3 p-1 text-white bg-brand-primary-500 hover:bg-brand-primary-600 focus-visible:bg-brand-primary-600 disabled:bg-brand-primary-600 disabled:opacity-30 outline-0">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
		<path d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009" stroke="currentColor" stroke-width="1.375" stroke-linecap="round" stroke-linejoin="round"></path>
	</svg>
</button>
React
<button disabled className="rounded box-content transition-all duration-300 w-3 h-3 p-1 text-white bg-brand-primary-500 hover:bg-brand-primary-600 focus-visible:bg-brand-primary-600 disabled:bg-brand-primary-600 disabled:opacity-30 outline-0">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
		<path d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009" stroke="currentColor" stroke-width="1.375" stroke-linecap="round" stroke-linejoin="round"></path>
	</svg>
</button>

Preview - Ghost Medium

HTML
<button class="rounded box-content transition-all duration-300 w-3 h-3 p-0.5 text-neutral-600 dark:text-neutral-200 dark:hover:text-brand-primary-500 hover:text-brand-primary-500 focus-visible:text-brand-primary-500 focus-visible:outline focus-visible:outline-1 focus-visible:outline-brand-primary-500 disabled:opacity-30 disabled:text-neutral-600 dark:disabled:text-neutral-200">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
		<path d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009" stroke="currentColor" stroke-width="1.375" stroke-linecap="round" stroke-linejoin="round"></path>
	</svg>
</button>
React
<button className="rounded box-content transition-all duration-300 w-3 h-3 p-0.5 text-neutral-600 dark:text-neutral-200 dark:hover:text-brand-primary-500 hover:text-brand-primary-500 focus-visible:text-brand-primary-500 focus-visible:outline focus-visible:outline-1 focus-visible:outline-brand-primary-500 disabled:opacity-30 disabled:text-neutral-600 dark:disabled:text-neutral-200">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
		<path d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009" stroke="currentColor" stroke-width="1.375" stroke-linecap="round" stroke-linejoin="round"></path>
	</svg>
</button>

Preview - Ghost Medium - Disabled

HTML
<button disabled class="rounded box-content transition-all duration-300 w-3 h-3 p-0.5 text-neutral-600 dark:text-neutral-200 dark:hover:text-brand-primary-500 hover:text-brand-primary-500 focus-visible:text-brand-primary-500 focus-visible:outline focus-visible:outline-1 focus-visible:outline-brand-primary-500 disabled:opacity-30 disabled:text-neutral-600 dark:disabled:text-neutral-200">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
		<path d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009" stroke="currentColor" stroke-width="1.375" stroke-linecap="round" stroke-linejoin="round"></path>
	</svg>
</button>
React
<button disabled className="rounded box-content transition-all duration-300 w-3 h-3 p-0.5 text-neutral-600 dark:text-neutral-200 dark:hover:text-brand-primary-500 hover:text-brand-primary-500 focus-visible:text-brand-primary-500 focus-visible:outline focus-visible:outline-1 focus-visible:outline-brand-primary-500 disabled:opacity-30 disabled:text-neutral-600 dark:disabled:text-neutral-200">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
		<path d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009" stroke="currentColor" stroke-width="1.375" stroke-linecap="round" stroke-linejoin="round"></path>
	</svg>
</button>

Preview - Ghost Small

HTML
<button class="rounded box-content transition-all duration-300 w-2 h-2 p-0.5 text-neutral-600 dark:text-neutral-200 dark:hover:text-brand-primary-500 hover:text-brand-primary-500 focus-visible:text-brand-primary-500 focus-visible:outline focus-visible:outline-1 focus-visible:outline-brand-primary-500 disabled:opacity-30 disabled:text-neutral-600 dark:disabled:text-neutral-200">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
		<path d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009" stroke="currentColor" stroke-width="1.375" stroke-linecap="round" stroke-linejoin="round"></path>
	</svg>
</button>
React
<button className="rounded box-content transition-all duration-300 w-2 h-2 p-0.5 text-neutral-600 dark:text-neutral-200 dark:hover:text-brand-primary-500 hover:text-brand-primary-500 focus-visible:text-brand-primary-500 focus-visible:outline focus-visible:outline-1 focus-visible:outline-brand-primary-500 disabled:opacity-30 disabled:text-neutral-600 dark:disabled:text-neutral-200">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
		<path d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009" stroke="currentColor" stroke-width="1.375" stroke-linecap="round" stroke-linejoin="round"></path>
	</svg>
</button>

Preview - Ghost Small - Disabled

HTML
<button disabled class="rounded box-content transition-all duration-300 w-2 h-2 p-0.5 text-neutral-600 dark:text-neutral-200 dark:hover:text-brand-primary-500 hover:text-brand-primary-500 focus-visible:text-brand-primary-500 focus-visible:outline focus-visible:outline-1 focus-visible:outline-brand-primary-500 disabled:opacity-30 disabled:text-neutral-600 dark:disabled:text-neutral-200">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
		<path d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009" stroke="currentColor" stroke-width="1.375" stroke-linecap="round" stroke-linejoin="round"></path>
	</svg>
</button>
React
<button disabled className="rounded box-content transition-all duration-300 w-2 h-2 p-0.5 text-neutral-600 dark:text-neutral-200 dark:hover:text-brand-primary-500 hover:text-brand-primary-500 focus-visible:text-brand-primary-500 focus-visible:outline focus-visible:outline-1 focus-visible:outline-brand-primary-500 disabled:opacity-30 disabled:text-neutral-600 dark:disabled:text-neutral-200">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
		<path d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009" stroke="currentColor" stroke-width="1.375" stroke-linecap="round" stroke-linejoin="round"></path>
	</svg>
</button>

Preview - Ghost Large

HTML
<button class="rounded box-content transition-all duration-300 w-3 h-3 p-1 text-neutral-600 dark:text-neutral-200 dark:hover:text-brand-primary-500 hover:text-brand-primary-500 focus-visible:text-brand-primary-500 focus-visible:outline focus-visible:outline-1 focus-visible:outline-brand-primary-500 disabled:opacity-30 disabled:text-neutral-600 dark:disabled:text-neutral-200">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
		<path d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009" stroke="currentColor" stroke-width="1.375" stroke-linecap="round" stroke-linejoin="round"></path>
	</svg>
</button>
React
<button className="rounded box-content transition-all duration-300 w-3 h-3 p-1 text-neutral-600 dark:text-neutral-200 dark:hover:text-brand-primary-500 hover:text-brand-primary-500 focus-visible:text-brand-primary-500 focus-visible:outline focus-visible:outline-1 focus-visible:outline-brand-primary-500 disabled:opacity-30 disabled:text-neutral-600 dark:disabled:text-neutral-200">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
		<path d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009" stroke="currentColor" stroke-width="1.375" stroke-linecap="round" stroke-linejoin="round"></path>
	</svg>
</button>

Preview - Ghost Large - Disabled

HTML
<button disabled class="rounded box-content transition-all duration-300 w-3 h-3 p-1 text-neutral-600 dark:text-neutral-200 dark:hover:text-brand-primary-500 hover:text-brand-primary-500 focus-visible:text-brand-primary-500 focus-visible:outline focus-visible:outline-1 focus-visible:outline-brand-primary-500 disabled:opacity-30 disabled:text-neutral-600 dark:disabled:text-neutral-200">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
		<path d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009" stroke="currentColor" stroke-width="1.375" stroke-linecap="round" stroke-linejoin="round"></path>
	</svg>
</button>
React
<button disabled className="rounded box-content transition-all duration-300 w-3 h-3 p-1 text-neutral-600 dark:text-neutral-200 dark:hover:text-brand-primary-500 hover:text-brand-primary-500 focus-visible:text-brand-primary-500 focus-visible:outline focus-visible:outline-1 focus-visible:outline-brand-primary-500 disabled:opacity-30 disabled:text-neutral-600 dark:disabled:text-neutral-200">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
		<path d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009" stroke="currentColor" stroke-width="1.375" stroke-linecap="round" stroke-linejoin="round"></path>
	</svg>
</button>