Button Components: Taco Component Library

Button - Outlined

<!-- BLACK  -->
<button class="text-black/80 dark:text-white border-black/80 dark:border-white hover:bg-gray-200 dark:hover:bg-gray-200/10 dark:hover:text-white hover:text-black focus-visible:outline-black/50 dark:focus-visible:outline-white/40 px-[0.9rem] py-[0.35rem] rounded border-[1.5px] transition-colors focus-visible:outline text-base active:scale-[0.98]">
    Button
</button>

<!-- BLUE  -->
<button class="text-blue-500 hover:bg-blue-100 dark:hover:bg-blue-300/20 hover:text-blue-700 dark:hover:text-blue-600 focus-visible:outline-blue-500/50 border-blue-500 px-[0.9rem] py-[0.35rem] rounded border-[1.5px] transition-colors focus-visible:outline text-base active:scale-[0.98]">
    Button
</button>

<!-- GREEN  -->
<button class="text-emerald-500 hover:bg-emerald-100 dark:hover:bg-emerald-300/20 hover:text-emerald-700 dark:hover:text-emerald-600 focus-visible:outline-emerald-500/50 border-emerald-500 px-[0.9rem] py-[0.35rem] rounded border-[1.5px] transition-colors focus-visible:outline text-base active:scale-[0.98]">
    Button
</button>

<!-- YELLOW  -->
<button class="text-amber-400 hover:bg-amber-100/70 dark:hover:bg-amber-300/20 hover:text-amber-500 dark:hover:text-amber-400 focus-visible:outline-amber-400/40 border-amber-400 px-[0.9rem] py-[0.35rem] rounded border-[1.5px] transition-colors focus-visible:outline text-base active:scale-[0.98]">
    Button
</button>

<!-- NAVY  -->
<button class="text-slate-700 dark:text-slate-300 hover:bg-slate-200/70 dark:hover:bg-slate-400/30 hover:text-slate-900 dark:hover:text-slate-300 focus-visible:outline-slate-800/50 dark:focus-visible:outline-slate-400/50 border-slate-700 dark:border-slate-300 px-[0.9rem] py-[0.35rem] rounded border-[1.5px] transition-colors focus-visible:outline text-base active:scale-[0.98]">
    Button
</button>

Button - Shadow

<button class="bg-white dark:bg-black text-black border-black dark:border-white dark:text-white shadow-[3px_4px_0px_0px_#111] dark:shadow-[3px_4px_0px_0px_#f2f2f2] active:dark:shadow-[1px_1px_0px_0px_#f2f2f2] active:shadow-[1px_1px_0px_0px_#111] focus-visible:outline-black/50 px-5 py-2.5 border-2 duration-100 focus-visible:outline group">
    Shadow
</button>

Button - Loading

<button class="bg-black dark:bg-white dark:hover:bg-black dark:hover:text-white dark:text-black flex text-white hover:border-black dark:hover:border-zinc-400 hover:bg-white hover:text-black focus-visible:outline-black/50 px-5 py-2 rounded border-[1.5px] border-transparent transition-colors duration-100 focus-visible:outline group">
    <svg width="18" height="18" class="animate-spin my-auto mr-2" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M37.287 19C37.287 22.6168 36.2145 26.1524 34.2051 29.1597C32.1957 32.167 29.3396 34.5109 25.9981 35.895C22.6566 37.2791 18.9797 37.6412 15.4324 36.9356C11.885 36.23 8.62661 34.4884 6.06913 31.9309C3.51165 29.3734 1.76998 26.115 1.06437 22.5676C0.358762 19.0203 0.720905 15.3434 2.10501 12.0019C3.4891 8.66037 5.83299 5.80433 8.84028 3.79493C11.8476 1.78553 15.3832 0.713013 19 0.713013C19.3978 0.713013 19.7793 0.871048 20.0607 1.15235C20.342 1.43366 20.5 1.81519 20.5 2.21301C20.5 2.61084 20.342 2.99237 20.0607 3.27367C19.7793 3.55498 19.3978 3.71301 19 3.71301C15.9765 3.71301 13.0209 4.60958 10.507 6.28934C7.99305 7.96909 6.03368 10.3566 4.87664 13.1499C3.71961 15.9433 3.41687 19.017 4.00673 21.9824C4.59658 24.9477 6.05252 27.6716 8.19045 29.8096C10.3284 31.9475 13.0523 33.4034 16.0176 33.9933C18.983 34.5831 22.0567 34.2804 24.8501 33.1234C27.6434 31.9663 30.0309 30.0069 31.7107 27.493C33.3904 24.9791 34.287 22.0235 34.287 19C34.287 18.6022 34.445 18.2207 34.7263 17.9394C35.0076 17.658 35.3892 17.5 35.787 17.5C36.1848 17.5 36.5663 17.658 36.8476 17.9394C37.129 18.2207 37.287 18.6022 37.287 19Z" fill="currentColor" /> </svg>
    Loading
</button>

Button with icon

<button class="bg-black dark:bg-white dark:text-black text-white focus-visible:outline-black/40 px-5 py-2.5 rounded focus-visible:outline flex items-center group">
  Button
  <span class="ml-1 translate-y-[0.15rem] group-hover:translate-x-1 transition-transform w-5 h-5"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="5" y1="12" x2="19" y2="12"></line> <polyline points="12 5 19 12 12 19"></polyline> </svg> </span>
</button>

Button - Rounded

<!-- BLACK  -->
<button class="bg-black text-white dark:border dark:border-zinc-800 hover:opacity-80 focus-visible:outline-black/50 px-6 py-[0.4rem] rounded-full transition-colors active:scale-[0.98] focus-visible:outline">
    Button
</button>

<!-- BLUE  -->
<button class="bg-blue-500 text-white hover:opacity-80 focus-visible:outline-blue-500/50 px-6 py-[0.4rem] rounded-full transition-colors active:scale-[0.98] focus-visible:outline">
    Button
</button>

<!-- GREEN  -->
<button class="bg-emerald-500 text-white hover:opacity-80 focus-visible:outline-emerald-500/50 px-6 py-[0.4rem] rounded-full transition-colors active:scale-[0.98] focus-visible:outline">
    Button
</button>

<!-- YELLOW  -->
<button class="bg-amber-400 text-white hover:opacity-80 focus-visible:outline-amber-400/40 px-6 py-[0.4rem] rounded-full transition-colors active:scale-[0.98] focus-visible:outline">
    Button
</button>

<!-- SLATE  -->
<button class="bg-slate-800 text-white hover:opacity-80 focus-visible:outline-slate-800/50 px-6 py-[0.4rem] rounded-full transition-colors active:scale-[0.98] focus-visible:outline">
    Button
</button>

Buttons

<!-- BLACK  -->
<button class="bg-black dark:bg-white dark:text-black dark:hover:bg-black dark:hover:text-white hover:text-black hover:bg-white text-white hover:border-black dark:hover:border-white focus-visible:outline-black/50 dark:focus-visible:outline-white/50 px-5 py-2 rounded border-[1.5px] border-transparent transition-colors active:scale-[0.98] focus-visible:outline">
    Button
</button>
<!-- BLUE  -->
<button class="bg-blue-500 hover:text-blue-500 hover:bg-white dark:hover:bg-black text-white hover:border-blue-500 focus-visible:outline-blue-500/50 px-5 py-2 rounded border-[1.5px] border-transparent transition-colors active:scale-[0.98] focus-visible:outline">
    Button
</button>

<!-- GREEN  -->
<button class="bg-emerald-500 hover:text-emerald-500 hover:bg-white dark:hover:bg-black text-white hover:border-emerald-500 focus-visible:outline-emerald-500/50 px-5 py-2 rounded border-[1.5px] border-transparent transition-colors active:scale-[0.98] focus-visible:outline">
    Button
</button>

<!-- YELLOW  -->
<button class="bg-amber-400 hover:text-amber-400 hover:bg-white dark:hover:bg-black text-white hover:border-amber-400 focus-visible:outline-amber-400/40 px-5 py-2 rounded border-[1.5px] border-transparent transition-colors active:scale-[0.98] focus-visible:outline">
    Button
</button>

<!-- SLATE  -->
<button class="bg-slate-800 hover:text-slate-800 hover:bg-white dark:hover:bg-black text-white hover:border-slate-800 dark:hover:border-slate-200 dark:hover:text-slate-200 focus-visible:outline-slate-800/50 dark:focus-visible:outline-slate-300/50 px-5 py-2 rounded border-[1.5px] border-transparent transition-colors active:scale-[0.98] focus-visible:outline">
    Button
</button>

Buttons - Ghost

<!-- BLACK  -->
<button class="text-black/80 dark:text-white focus-visible:outline-black/50 dark:focus-visible:outline-white/40 px-[0.9rem] py-[0.35rem] active:scale-95 rounded transition-colors focus-visible:outline text-base h-fit hover:bg-gray-200 dark:hover:bg-gray-200/10 dark:hover:text-white hover:text-black ">
    Button
</button>

<!-- BLUE  -->
<button class="text-blue-500 hover:bg-blue-100 dark:hover:bg-blue-300/20 hover:text-blue-700 dark:hover:text-blue-600 focus-visible:outline-blue-500/50 px-[0.9rem] py-[0.35rem] active:scale-95 rounded transition-colors focus-visible:outline text-base h-fit">
    Button
</button>

<!-- GREEN  -->
<button class="text-emerald-500 hover:bg-emerald-100 dark:hover:bg-emerald-300/20 hover:text-emerald-700 dark:hover:text-emerald-600 focus-visible:outline-emerald-500/50 px-[0.9rem] py-[0.35rem] active:scale-95 rounded transition-colors focus-visible:outline text-base h-fit">
    Button
</button>

<!-- YELLOW  -->
<button class="text-amber-400 hover:bg-amber-100/70 dark:hover:bg-amber-300/20 hover:text-amber-500 dark:hover:text-amber-400 focus-visible:outline-amber-400/40 px-[0.9rem] py-[0.35rem] active:scale-95 rounded transition-colors focus-visible:outline text-base h-fit">
    Button
</button>

<!-- NAVY  -->
<button class="text-slate-700 dark:text-slate-300 hover:bg-slate-200/70 dark:hover:bg-slate-400/30 hover:text-slate-900 dark:hover:text-slate-300 focus-visible:outline-slate-800/50 dark:focus-visible:outline-slate-400/50 px-[0.9rem] py-[0.35rem] active:scale-95 rounded transition-colors focus-visible:outline text-base h-fit">
    Button
</button>