Icon Button
Below you can find an icon button component styled with tailwindcss.
Primary Medium
- Preview
- HTML
- React
Copy
<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 fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.375" stroke="currentColor" d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009"></path>
</svg>
</button>
Copy
<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 fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.375" stroke="currentColor" d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009"></path>
</svg>
</button>Primary Medium - Disabled
- Preview
- HTML
- React
Copy
<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 fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.375" stroke="currentColor" d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009"></path>
</svg>
</button>
Copy
<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 fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.375" stroke="currentColor" d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009"></path>
</svg>
</button>Primary Small
- Preview
- HTML
- React
Copy
<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 fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.375" stroke="currentColor" d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009"></path>
</svg>
</button>
Copy
<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 fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.375" stroke="currentColor" d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009"></path>
</svg>
</button>Primary Small - Disabled
- Preview
- HTML
- React
Copy
<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 fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.375" stroke="currentColor" d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009"></path>
</svg>
</button>
Copy
<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 fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.375" stroke="currentColor" d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009"></path>
</svg>
</button>Primary Large
- Preview
- HTML
- React
Copy
<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 fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.375" stroke="currentColor" d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009"></path>
</svg>
</button>
Copy
<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 fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.375" stroke="currentColor" d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009"></path>
</svg>
</button>Primary Large - Disabled
- Preview
- HTML
- React
Copy
<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 fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.375" stroke="currentColor" d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009"></path>
</svg>
</button>
Copy
<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 fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.375" stroke="currentColor" d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009"></path>
</svg>
</button>Ghost Medium
- Preview
- HTML
- React
Copy
<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 fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.375" stroke="currentColor" d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009"></path>
</svg>
</button>
Copy
<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 fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.375" stroke="currentColor" d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009"></path>
</svg>
</button>Ghost Medium - Disabled
- Preview
- HTML
- React
Copy
<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 fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.375" stroke="currentColor" d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009"></path>
</svg>
</button>
Copy
<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 fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.375" stroke="currentColor" d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009"></path>
</svg>
</button>Ghost Small
- Preview
- HTML
- React
Copy
<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 fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.375" stroke="currentColor" d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009"></path>
</svg>
</button>
Copy
<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 fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.375" stroke="currentColor" d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009"></path>
</svg>
</button>Ghost Small - Disabled
- Preview
- HTML
- React
Copy
<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 fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.375" stroke="currentColor" d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009"></path>
</svg>
</button>
Copy
<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 fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.375" stroke="currentColor" d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009"></path>
</svg>
</button>Ghost Large
- Preview
- HTML
- React
Copy
<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 fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.375" stroke="currentColor" d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009"></path>
</svg>
</button>
Copy
<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 fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.375" stroke="currentColor" d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009"></path>
</svg>
</button>Ghost Large - Disabled
- Preview
- HTML
- React
Copy
<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 fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.375" stroke="currentColor" d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009"></path>
</svg>
</button>
Copy
<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 fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.375" stroke="currentColor" d="M20.0001 6.50085L9.00012 17.5009L4.00012 12.5009"></path>
</svg>
</button>