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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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>