Button
Below you can find a button component styled with tailwindcss.
Primary
- Preview
- HTML
- React
Copy
<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>
Copy
<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>Primary - Icon Start
- Preview
- HTML
- React
Copy
<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 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.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
Text
</div>
</button>
Copy
<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 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.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
Text
</div>
</button>Primary - Icon End
- Preview
- HTML
- React
Copy
<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 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.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
</div>
</button>
Copy
<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 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.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
</div>
</button>Primary - Icon Start/End
- Preview
- HTML
- React
Copy
<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 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.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
<p>Text</p>
<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.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
</div>
</button>
Copy
<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 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.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
<p>Text</p>
<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.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
</div>
</button>Primary Small
- Preview
- HTML
- React
Copy
<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>
Copy
<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>Primary Small - Icon Start
- Preview
- HTML
- React
Copy
<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 fill="none" viewbox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
<p>Text</p>
</div>
</button>
Copy
<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 fill="none" viewbox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
<p>Text</p>
</div>
</button>Primary Small - Icon End
- Preview
- HTML
- React
Copy
<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">
<p>Text</p>
<svg fill="none" viewbox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
</div>
</button>
Copy
<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">
<p>Text</p>
<svg fill="none" viewbox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
</div>
</button>Primary Small - Icon Start/End
- Preview
- HTML
- React
Copy
<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 fill="none" viewbox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
<p>Text</p>
<svg fill="none" viewbox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
</div>
</button>
Copy
<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 fill="none" viewbox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
<p>Text</p>
<svg fill="none" viewbox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
</div>
</button>Primary Outlined
- Preview
- HTML
- React
Copy
<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>
Copy
<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>Primary Outlined - Icon Start
- Preview
- HTML
- React
Copy
<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 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.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
<p>Text</p>
</div>
</button>
Copy
<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 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.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
<p>Text</p>
</div>
</button>Primary Outlined - Icon End
- Preview
- HTML
- React
Copy
<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">
<p>Text</p>
<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.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
</div>
</button>
Copy
<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">
<p>Text</p>
<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.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
</div>
</button>Primary Outlined - Icon Start/End
- Preview
- HTML
- React
Copy
<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 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.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
<p>Text</p>
<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.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
</div>
</button>
Copy
<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 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.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
<p>Text</p>
<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.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
</div>
</button>Primary Outlined Small
- Preview
- HTML
- React
Copy
<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">
<p>Text</p>
</div>
</button>
Copy
<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">
<p>Text</p>
</div>
</button>Primary Outlined Small - Icon Start
- Preview
- HTML
- React
Copy
<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 fill="none" viewbox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
<p>Text</p>
</div>
</button>
Copy
<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 fill="none" viewbox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
<p>Text</p>
</div>
</button>Primary Outlined Small - Icon End
- Preview
- HTML
- React
Copy
<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">
<p>Text</p>
<svg fill="none" viewbox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
</div>
</button>
Copy
<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">
<p>Text</p>
<svg fill="none" viewbox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
</div>
</button>Primary Outlined Small - Icon Start/End
- Preview
- HTML
- React
Copy
<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 fill="none" viewbox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
<p>Text</p>
<svg fill="none" viewbox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
</div>
</button>
Copy
<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 fill="none" viewbox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
<p>Text</p>
<svg fill="none" viewbox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
</div>
</button>Link
- Preview
- HTML
- React
Copy
<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>
Copy
<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>Link - Icon Start
- Preview
- HTML
- React
Copy
<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 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.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
<p>Text</p>
</div>
</button>
Copy
<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 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.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
<p>Text</p>
</div>
</button>Link - Icon End
- Preview
- HTML
- React
Copy
<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">
<p>Text</p>
<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.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
</div>
</button>
Copy
<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">
<p>Text</p>
<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.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
</div>
</button>Link - Icon Start/End
- Preview
- HTML
- React
Copy
<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 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.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
<p>Text</p>
<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.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
</div>
</button>
Copy
<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 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.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
<p>Text</p>
<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.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
</div>
</button>Link Small
- Preview
- HTML
- React
Copy
<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">
<p>Text</p>
</div>
</button>
Copy
<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">
<p>Text</p>
</div>
</button>Link Small - Icon Start
- Preview
- HTML
- React
Copy
<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 fill="none" viewbox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
<p>Text</p>
</div>
</button>
Copy
<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 fill="none" viewbox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
<p>Text</p>
</div>
</button>Link Small - Icon End
- Preview
- HTML
- React
Copy
<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">
<p>Text</p>
<svg fill="none" viewbox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
</div>
</button>
Copy
<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">
<p>Text</p>
<svg fill="none" viewbox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
</div>
</button>Link Small - Icon Start/End
- Preview
- HTML
- React
Copy
<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 fill="none" viewbox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
<p>Text</p>
<svg fill="none" viewbox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
</div>
</button>
Copy
<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 fill="none" viewbox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
<p>Text</p>
<svg fill="none" viewbox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M12.5 8V16"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" stroke="currentColor" d="M16.5 12H8.5"></path>
</svg>
</div>
</button>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>
Below you can find a button component styled with tailwindcss. Created with Figma design for Dark Mode only - Light Mode improvements awating on designs.
Upload Area - default state
- Preview
- HTML
- React
Attach file
Copy
<div class="relative">
<div class="border-2 leading-175 rounded p-1 text-center transition-all duration-300 cursor-pointer relative border-dashed border-neutral-400 text-neutral-400 hover:border-neutral-500 hover:text-neutral-500 dark:hover:border-neutral-300 dark:hover:text-neutral-300">Attach file</div>
</div>
Copy
<div className="relative">
<div className="border-2 leading-175 rounded p-1 text-center transition-all duration-300 cursor-pointer relative border-dashed border-neutral-400 text-neutral-400 hover:border-neutral-500 hover:text-neutral-500 dark:hover:border-neutral-300 dark:hover:text-neutral-300">Attach file</div>
</div>Upload Area - filled state
- Preview
- HTML
- React
Filename.jpg
Copy
<div class="relative">
<div class="border-2 leading-175 rounded p-1 text-center transition-all duration-300 cursor-pointer relative border-solid border-black dark:border-white dark:text-white">Filename.jpg</div>
<button class="w-3 h-3 flex items-center justify-center rounded-full border-2 border-black dark:border-white block absolute -right-[12px] -top-[12px] bg-white dark:bg-theme-dark text-brand-primary-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" height="24" width="24">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.2" stroke="#FF6D2A" d="M15 8.99998L9 15"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.2" stroke="#FF6D2A" d="M15 15L9 8.99998"></path>
</svg>
</button>
</div>
Copy
<div className="relative">
<div className="border-2 leading-175 rounded p-1 text-center transition-all duration-300 cursor-pointer relative border-solid border-black dark:border-white dark:text-white">Filename.jpg</div>
<button className="w-3 h-3 flex items-center justify-center rounded-full border-2 border-black dark:border-white block absolute -right-[12px] -top-[12px] bg-white dark:bg-theme-dark text-brand-primary-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" height="24" width="24">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.2" stroke="#FF6D2A" d="M15 8.99998L9 15"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.2" stroke="#FF6D2A" d="M15 15L9 8.99998"></path>
</svg>
</button>
</div>Upload Area - error state
- Preview
- HTML
- React
File weighs too much!
Copy
<div class="relative">
<div class="border-2 leading-175 rounded p-1 text-center transition-all duration-300 cursor-pointer relative border-dashed border-neutral-400 text-danger">File weighs too much!</div>
</div>
Copy
<div className="relative">
<div className="border-2 leading-175 rounded p-1 text-center transition-all duration-300 cursor-pointer relative border-dashed border-neutral-400 text-danger">File weighs too much!</div>
</div>