Icon Button

Below you can find an icon button component styled with tailwindcss.

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>