Buttons

Buttons in WeedorUI serve as interactive elements that allow users to trigger actions or navigate through your application. They are versatile components designed for various use cases, from submitting forms to performing specific tasks. Each button is customizable in terms of style, size, and behavior, ensuring seamless integration into your interface.

Basic Buttons

Preview

Default

Login

Download

Buy Now

Order

HTML

<button class="py-2 px-6 bg-blue-600 text-base rounded-md cursor-pointer hover:opacity-90">
  Default
</button>
<button class="py-2 px-6 bg-[#58c7f4] text-base rounded-md cursor-pointer hover:opacity-90">
  Login
</button>
<button class="py-2 px-6 bg-[#e779c0] text-base rounded-md cursor-pointer hover:opacity-90">
  Download
</button>
<button class="py-2 px-6 bg-[#008081] text-base rounded-md cursor-pointer hover:opacity-90">
  Buy Now
</button>
<button class="py-2 px-6 bg-[#ee4740] text-base rounded-md cursor-pointer hover:opacity-90">
  Order
</button>

JSX

<button className="py-2 px-6 bg-blue-600 text-base rounded-md cursor-pointer hover:opacity-90">
  Default
</button>
<button className="py-2 px-6 bg-[#58c7f4] text-base rounded-md cursor-pointer hover:opacity-90">
  Login
</button>
<button className="py-2 px-6 bg-[#e779c0] text-base rounded-md cursor-pointer hover:opacity-90">
  Download
</button>
<button className="py-2 px-6 bg-[#008081] text-base rounded-md cursor-pointer hover:opacity-90">
  Buy Now
</button>
<button className="py-2 px-6 bg-[#ee4740] text-base rounded-md cursor-pointer hover:opacity-90 ">
  Order
</button>

Button With Icon

Note

Please not that the icon will be placed on the right side by default and that and you change the SVG icon to any icon you want.

Preview

DefaultCopyDownloadShopOrder

HTML

<button class="py-2 px-6 bg-[#ffd201] text-base rounded-md cursor-pointer opacity-90 inline-flex items-center gap-2">
      <span>Default</span>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-6 w-6"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
        />
      </svg>
    </button>
    <button class="py-2 px-6 bg-[#58c7f4] text-base rounded-md cursor-pointer opacity-90 inline-flex items-center gap-2">
      <span>Copy</span>
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z" />
        </svg>
    </button>
    <button class="py-2 px-6 bg-[#e779c0] text-base rounded-md cursor-pointer hover:opacity-90 inline-flex items-center gap-1">
         <span>Download</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
              <path fill-rule="evenodd" d="M12 2.25a.75.75 0 0 1 .75.75v11.69l3.22-3.22a.75.75 0 1 1 1.06 1.06l-4.5 4.5a.75.75 0 0 1-1.06 0l-4.5-4.5a.75.75 0 1 1 1.06-1.06l3.22 3.22V3a.75.75 0 0 1 .75-.75Zm-9 13.5a.75.75 0 0 1 .75.75v2.25a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5V16.5a.75.75 0 0 1 1.5 0v2.25a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V16.5a.75.75 0 0 1 .75-.75Z" clip-rule="evenodd" />
            </svg>
    </button>
    <button class="py-2 px-6 bg-[#008081] text-base rounded-md cursor-pointer opacity-90 inline-flex items-center gap-2">
        <span>Shop</span>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
          <path d="M2.25 2.25a.75.75 0 0 0 0 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.752 3.752 0 0 0-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 0 0 0-1.5H5.378A2.25 2.25 0 0 1 7.5 15h11.218a.75.75 0 0 0 .674-.421 60.358 60.358 0 0 0 2.96-7.228.75.75 0 0 0-.525-.965A60.864 60.864 0 0 0 5.68 4.509l-.232-.867A1.875 1.875 0 0 0 3.636 2.25H2.25ZM3.75 20.25a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM16.5 20.25a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z" />
        </svg>
    </button>
    <button class="py-2 px-6 bg-[#ee4740] text-base rounded-md cursor-pointer hover:opacity-90  inline-flex items-center gap-2">
      <span>Order</span>
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
          <path fill-rule="evenodd" d="M3.74 3.749a.75.75 0 0 1 .75.75V15h13.938l-2.47-2.47a.75.75 0 0 1 1.061-1.06l3.75 3.75a.75.75 0 0 1 0 1.06l-3.75 3.75a.75.75 0 0 1-1.06-1.06l2.47-2.47H3.738a.75.75 0 0 1-.75-.75V4.5a.75.75 0 0 1 .75-.751Z" clip-rule="evenodd" />
        </svg>
    </button>

JSX

 <button className="py-2 px-6 bg-[#ffd201] text-base rounded-md cursor-pointer opacity-90 inline-flex items-center gap-2">
      <span>Default</span>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className="h-6 w-6"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
        />
      </svg>
    </button>
    <button className="py-2 px-6 bg-[#58c7f4] text-base rounded-md cursor-pointer opacity-90 inline-flex items-center gap-2">
      <span>Copy</span>
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className="size-5">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z" />
        </svg>
    </button>
    <button className="py-2 px-6 bg-[#e779c0] text-base rounded-md cursor-pointer hover:opacity-90 inline-flex items-center gap-1">
        <span>Download</span>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="size-5">
          <path fill-rule="evenodd" d="M12 2.25a.75.75 0 0 1 .75.75v11.69l3.22-3.22a.75.75 0 1 1 1.06 1.06l-4.5 4.5a.75.75 0 0 1-1.06 0l-4.5-4.5a.75.75 0 1 1 1.06-1.06l3.22 3.22V3a.75.75 0 0 1 .75-.75Zm-9 13.5a.75.75 0 0 1 .75.75v2.25a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5V16.5a.75.75 0 0 1 1.5 0v2.25a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V16.5a.75.75 0 0 1 .75-.75Z" clip-rule="evenodd" />
        </svg>
    </button>
    <button className="py-2 px-6 bg-[#008081] text-base rounded-md cursor-pointer opacity-90 inline-flex items-center gap-2">
        <span>Shop</span>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="size-5">
          <path d="M2.25 2.25a.75.75 0 0 0 0 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.752 3.752 0 0 0-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 0 0 0-1.5H5.378A2.25 2.25 0 0 1 7.5 15h11.218a.75.75 0 0 0 .674-.421 60.358 60.358 0 0 0 2.96-7.228.75.75 0 0 0-.525-.965A60.864 60.864 0 0 0 5.68 4.509l-.232-.867A1.875 1.875 0 0 0 3.636 2.25H2.25ZM3.75 20.25a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM16.5 20.25a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z" />
        </svg>
    </button>
    <button className="py-2 px-6 bg-[#ee4740] text-base rounded-md cursor-pointer hover:opacity-90  inline-flex items-center gap-2">
      <span>Order</span>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="size-6">
          <path d="M3.478 2.404a.75.75 0 0 0-.926.941l2.432 7.905H13.5a.75.75 0 0 1 0 1.5H4.984l-2.432 7.905a.75.75 0 0 0 .926.94 60.519 60.519 0 0 0 18.445-8.986.75.75 0 0 0 0-1.218A60.517 60.517 0 0 0 3.478 2.404Z" />
        </svg>
    </button>

Outlined Buttons

Preview

Default

Copy

Default

Default

Default

HTML

    <button class="py-2 px-6 bg-transparent border border-green-500 hover:bg-green-500 hover:border-transparent hover:text-black text-base rounded-md cursor-pointer">
      Default
    </button>
    <button class="py-2 px-6 bg-transparent border border-[#58c7f4] hover:bg-[#58c7f4] hover:border-transparent text-base rounded-md cursor-pointer">
      Copy
    </button>
    <button class="py-2 px-6 bg-transparent border border-[#ee4740] hover:bg-[#ee4740] hover:border-transparent text-base rounded-md cursor-pointer">
      Default
    </button>
    <button class="py-2 px-6 bg-transparent border border-[#154468] hover:bg-[#154468] hover:border-transparent hover:text-white text-base rounded-md cursor-pointer">
      Default
    </button>
    <button class="py-2 px-6 bg-transparent border border-pink-500 hover:bg-pink-500 hover:border-transparent hover:text-white text-base rounded-md cursor-pointer">
      Default
    </button>

JSX

 <button className="py-2 px-6 bg-transparent border border-green-500 hover:bg-green-500 hover:border-transparent hover:text-black text-base rounded-md cursor-pointer">
      Default
    </button>
    <button className="py-2 px-6 bg-transparent border border-[#58c7f4] hover:bg-[#58c7f4] hover:border-transparent text-base rounded-md cursor-pointer">
      Copy
    </button>
    <button className="py-2 px-6 bg-transparent border border-[#ee4740] hover:bg-[#ee4740] hover:border-transparent text-base rounded-md cursor-pointer">
      Default
    </button>
    <button className="py-2 px-6 bg-transparent border border-[#154468] hover:bg-[#154468] hover:border-transparent hover:text-white text-base rounded-md cursor-pointer">
      Default
    </button>
    <button className="py-2 px-6 bg-transparent border border-pink-500 hover:bg-pink-500 hover:border-transparent hover:text-white text-base rounded-md cursor-pointer">
      Default
    </button>

Rounded Corner Buttons

Preview

Default

Copy

Default

Default

Default

HTML

    <button class="py-2 px-6 bg-transparent border border-green-500 hover:bg-green-500 hover:border-transparent hover:text-black text-base rounded-full  cursor-pointer">
      Default
    </button>
    <button class="py-2 px-6 bg-transparent border border-[#58c7f4] hover:bg-[#58c7f4] hover:border-transparent text-base rounded-full  cursor-pointer">
      Copy
    </button>
    <button class="py-2 px-6 bg-transparent border border-[#ee4740] hover:bg-[#ee4740] hover:border-transparent text-base rounded-full  cursor-pointer">
      Default
    </button>
    <button class="py-2 px-6 bg-transparent border border-[#154468] hover:bg-[#154468] hover:border-transparent hover:text-white text-base rounded-full  cursor-pointer">
      Default
    </button>
    <button class="py-2 px-6 bg-transparent border border-pink-500 hover:bg-pink-500 hover:border-transparent hover:text-white text-base rounded-full  cursor-pointer">
      Default
    </button>

JSX

 <button className="py-2 px-6 bg-transparent border border-green-500 hover:bg-green-500 hover:border-transparent hover:text-black text-base rounded-full  cursor-pointer">
      Default
    </button>
    <button className="py-2 px-6 bg-transparent border border-[#58c7f4] hover:bg-[#58c7f4] hover:border-transparent text-base rounded-full  cursor-pointer">
      Copy
    </button>
    <button className="py-2 px-6 bg-transparent border border-[#ee4740] hover:bg-[#ee4740] hover:border-transparent text-base rounded-full  cursor-pointer">
      Default
    </button>
    <button className="py-2 px-6 bg-transparent border border-[#154468] hover:bg-[#154468] hover:border-transparent hover:text-white text-base rounded-full  cursor-pointer">
      Default
    </button>
    <button className="py-2 px-6 bg-transparent border border-pink-500 hover:bg-pink-500 hover:border-transparent hover:text-white text-base rounded-full  cursor-pointer">
      Default
    </button>