Components
Tailwind CSS Button Group
At times it is necessary to show group of buttons together in user interface. It comes with two options either placing them in a single line horizontally or putting them in a vertical column.
The choice of selecting one out of these two purely depends on your objective of the page. Irrespective of the layout it is important to maintain visual consistency in terms of size, style and color.
At pagedone your requirements of designing perfect button groups end.
1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More
Default Button Group
This is how you can show multiple buttons together. Following are example of tailwind button group.
<div class="flex justify-center ">
<button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white text-gray-900 align-middle hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-2 focus:ring-indigo-600 transition-all text-sm "> Cut </button>
<button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white text-gray-900 align-middle hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-2 focus:ring-indigo-600 transition-all text-sm "> Copy </button>
<button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white text-gray-900 align-middle hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-2 focus:ring-indigo-600 transition-all text-sm "> Paste </button>
</div>Button Group Size
By using utility classes from tailwind css you can effortlessly change the size of the group buttons.
<div class="flex justify-center">
<button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white text-gray-900 align-middle hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-2 focus:ring-indigo-600 transition-all text-sm ">
Small
</button>
<button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white text-gray-900 align-middle hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-2 focus:ring-indigo-600 transition-all text-sm ">
Small
</button>
<button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white text-gray-900 align-middle hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-2 focus:ring-indigo-600 transition-all text-sm ">
Small
</button>
</div>
<div class="flex justify-center">
<button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white text-gray-900 align-middle hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-2 focus:ring-indigo-600 transition-all text-sm sm:p-4">
Default
</button>
<button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white text-gray-900 align-middle hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-2 focus:ring-indigo-600 transition-all text-sm sm:p-4">
Default
</button>
<button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white text-gray-900 align-middle hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-2 focus:ring-indigo-600 transition-all text-sm sm:p-4">
Default
</button>
</div>
<div class="flex justify-center">
<button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white text-gray-900 align-middle hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-2 focus:ring-indigo-600 transition-all text-sm sm:p-[1.3125rem]">
Large
</button>
<button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white text-gray-900 align-middle hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-2 focus:ring-indigo-600 transition-all text-sm sm:p-[1.3125rem]">
Large
</button>
<button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white text-gray-900 align-middle hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-2 focus:ring-indigo-600 transition-all text-sm sm:p-[1.3125rem]">
Large
</button>
</div>Button group links
Button group components can also be used as links.
<div class="flex justify-center ">
<a href="#" class="py-3 px-4 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white text-gray-900 align-middle hover:bg-gray-900 hover:text-white focus:z-10 focus:outline-none transition-all text-sm "> Cut </a>
<a href="#" class="py-3 px-4 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white text-gray-900 align-middle hover:bg-gray-900 hover:text-white focus:z-10 focus:outline-none transition-all text-sm "> Copy </a>
<a href="#" class="py-3 px-4 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white text-gray-900 align-middle hover:bg-gray-900 hover:text-white focus:z-10 focus:outline-none transition-all text-sm "> Paste </a>
</div>Button group with icon
SVG icons can be used to make it look more attractive and easy to explain the usage of the button group in tailwind.
<div class="flex justify-center ">
<button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white text-gray-900 align-middle hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-2 focus:ring-indigo-600 transition-all text-sm ">
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.52464 15.8155C9.58965 17.0908 9.4241 18.9922 8.15487 20.0624C6.88565 21.1325 4.99338 20.9661 3.92838 19.6908C2.86337 18.4155 3.02892 16.5141 4.29815 15.4439C5.56737 14.3738 7.45964 14.5401 8.52464 15.8155ZM8.52464 15.8155L19.2493 6.77307" stroke="#111827" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
<path d="M8.71703 8.18449C7.65202 9.45984 5.75975 9.62619 4.49053 8.55605C3.22131 7.48591 3.05575 5.58452 4.12076 4.30917C5.18576 3.03383 7.07803 2.86748 8.34726 3.93762C9.61648 5.00776 9.78203 6.90915 8.71703 8.18449ZM8.71703 8.18449L19.4416 17.2269" stroke="#111827" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
<path d="M17 12H19M21 12H22" stroke="#111827" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
</svg> Cut </button>
<button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white text-gray-900 align-middle hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-2 focus:ring-indigo-600 transition-all text-sm ">
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.66667 15.3333V19.3333C8.66667 20.8061 9.86057 22 11.3333 22H19.3333C20.8061 22 22 20.8061 22 19.3333V11.3333C22 9.86057 20.8061 8.66667 19.3333 8.66667H15.3333M4.66667 15.3333H12.6667C14.1394 15.3333 15.3333 14.1394 15.3333 12.6667V4.66667C15.3333 3.19391 14.1394 2 12.6667 2H4.66667C3.19391 2 2 3.19391 2 4.66667V12.6667C2 14.1394 3.19391 15.3333 4.66667 15.3333Z" stroke="#111827" stroke-width="1.6" stroke-linecap="round" class="my-path"></path>
</svg> Copy </button>
<button type="button" class="py-3 px-4 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white text-gray-900 align-middle hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-2 focus:ring-indigo-600 transition-all text-sm ">
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 8.25V18C20 21 18.21 22 16 22H8C5.79 22 4 21 4 18V8.25C4 5 5.79 4.25 8 4.25C8 4.87 8.24997 5.43 8.65997 5.84C9.06997 6.25 9.63 6.5 10.25 6.5H13.75C14.99 6.5 16 5.49 16 4.25C18.21 4.25 20 5 20 8.25Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M16 4.25C16 5.49 14.99 6.5 13.75 6.5H10.25C9.63 6.5 9.06997 6.25 8.65997 5.84C8.24997 5.43 8 4.87 8 4.25C8 3.01 9.01 2 10.25 2H13.75C14.37 2 14.93 2.25 15.34 2.66C15.75 3.07 16 3.63 16 4.25Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M8 13H12" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M8 17H16" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg> Paste </button>
</div>
Examples
Tailwind CSS Button Group Examples
At times it is necessary to show group of buttons together in user interface. It comes with two options either placing them in a single line horizontally or putting them in a vertical column.
Button group with Social Action Examples
A group that includes Like, Comment, and Share buttons.
<!-- Social Action -->
<div class="flex flex-col gap-4">
<div class="flex justify-center">
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border border-gray-300 font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4">
<path d="M4.12695 13.218L12.026 21L20.2707 12.8774" stroke="#000000" stroke-width="2"
stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
<path
d="M12.0039 4.68819C14.2887 2.43727 18.0014 2.43727 20.2862 4.68819C22.571 6.94652 22.571 10.5969 20.2937 12.8552"
stroke="#000000" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"
stroke-linejoin="round" class="my-path"></path>
<path
d="M11.9959 4.68819C9.71112 2.43727 5.99836 2.43727 3.71358 4.68819C1.42881 6.93912 1.42881 10.5969 3.71358 12.8478M3.71358 12.8478L3.73297 12.8668M3.71358 12.8478L4.11943 13.2106"
stroke="#000000" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"
stroke-linejoin="round" class="my-path"></path>
</svg> Like </button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border border-gray-300 font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
class="w-4 h-4" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-message-circle" aria-hidden="true">
<path
d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719">
</path>
</svg> Comment </button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border border-gray-300 font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
class="w-4 h-4" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-share2 lucide-share-2" aria-hidden="true">
<circle cx="18" cy="5" r="3"></circle>
<circle cx="6" cy="12" r="3"></circle>
<circle cx="18" cy="19" r="3"></circle>
<line x1="8.59" x2="15.42" y1="13.51" y2="17.49"></line>
<line x1="15.41" x2="8.59" y1="6.51" y2="10.49"></line>
</svg> Share </button>
</div>
<div class="flex justify-center items-center">
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border border-gray-300 font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4">
<path d="M4.12695 13.218L12.026 21L20.2707 12.8774" stroke="#000000" stroke-width="2"
stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
<path
d="M12.0039 4.68819C14.2887 2.43727 18.0014 2.43727 20.2862 4.68819C22.571 6.94652 22.571 10.5969 20.2937 12.8552"
stroke="#000000" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"
stroke-linejoin="round" class="my-path"></path>
<path
d="M11.9959 4.68819C9.71112 2.43727 5.99836 2.43727 3.71358 4.68819C1.42881 6.93912 1.42881 10.5969 3.71358 12.8478M3.71358 12.8478L3.73297 12.8668M3.71358 12.8478L4.11943 13.2106"
stroke="#000000" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"
stroke-linejoin="round" class="my-path"></path>
</svg></button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border border-gray-300 font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
class="w-4 h-4" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-message-circle" aria-hidden="true">
<path
d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719">
</path>
</svg></button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border border-gray-300 font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
class="w-4 h-4" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-share2 lucide-share-2" aria-hidden="true">
<circle cx="18" cy="5" r="3"></circle>
<circle cx="6" cy="12" r="3"></circle>
<circle cx="18" cy="19" r="3"></circle>
<line x1="8.59" x2="15.42" y1="13.51" y2="17.49"></line>
<line x1="15.41" x2="8.59" y1="6.51" y2="10.49"></line>
</svg></button>
</div>
</div>Button group with File Operations Examples
A button group that provides quick access to common file operations such as upload, download, edit, and delete.
<!-- File Operations -->
<div class="flex flex-col gap-4">
<div class="flex justify-center">
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border border-gray-300 font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4">
<path
d="M18.5 9C19.8807 9 21 10.1193 21 11.5V15C21 17.8284 21 19.2426 20.1213 20.1213C19.2426 21 17.8284 21 15 21H9C6.17157 21 4.75736 21 3.87868 20.1213C3 19.2426 3 17.8284 3 15V11.5C3 10.1193 4.11929 9 5.5 9"
stroke="#000000" stroke-width="2" stroke-linecap="round" class="my-path"></path>
<path d="M12 16L7.80408 11.804M12 16L16.196 11.804M12 16V3" stroke="#000000" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
</svg> Download </button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border border-gray-300 font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
class="w-4 h-4" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-share2 lucide-share-2" aria-hidden="true">
<circle cx="18" cy="5" r="3"></circle>
<circle cx="6" cy="12" r="3"></circle>
<circle cx="18" cy="19" r="3"></circle>
<line x1="8.59" x2="15.42" y1="13.51" y2="17.49"></line>
<line x1="15.41" x2="8.59" y1="6.51" y2="10.49"></line>
</svg> Share </button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border border-gray-300 font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4">
<path
d="M15.2995 4.42255L6.34327 13.4872C6.11694 13.7162 6.00377 13.8308 5.9332 13.9717C5.86262 14.1127 5.83924 14.271 5.79248 14.5875L5.55022 16.2271C5.36753 17.4635 5.27619 18.0817 5.64364 18.435C6.01109 18.7883 6.63525 18.6823 7.88356 18.4704L9.53897 18.1894C9.85851 18.1352 10.0183 18.1081 10.1593 18.0349C10.3004 17.9617 10.4136 17.8471 10.6399 17.618L19.5962 8.55344C20.2588 7.88278 20.5901 7.54745 20.5848 7.13611C20.5796 6.72476 20.2397 6.39805 19.5601 5.74462L18.147 4.38599C17.4673 3.73256 17.1275 3.40584 16.7105 3.4112C16.2935 3.41655 15.9622 3.75188 15.2995 4.42255Z"
stroke="#000000" stroke-width="2" class="my-path"></path>
<path d="M18 10L14 6" stroke="#000000" stroke-width="2" class="my-path"></path>
</svg>Edit</button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border border-gray-300 font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4">
<path
d="M3 6.60001H21M4.8 6.60001H19.2V15C19.2 17.8284 19.2 19.2426 18.3213 20.1213C17.4426 21 16.0284 21 13.2 21H10.8C7.97157 21 6.55736 21 5.67868 20.1213C4.8 19.2426 4.8 17.8284 4.8 15V6.60001Z"
stroke="#000000" stroke-width="2" stroke-linecap="round" class="my-path"></path>
<path
d="M7.49994 6.59994V4.99994C7.49994 3.89537 8.39537 2.99994 9.49994 2.99994H14.4999C15.6045 2.99994 16.4999 3.89537 16.4999 4.99994V6.59994M16.4999 6.59994H2.99994M16.4999 6.59994H21"
stroke="#000000" stroke-width="2" stroke-linecap="round" class="my-path"></path>
<path d="M10.2 11.1L10.2 16.5" stroke="#000000" stroke-width="2" stroke-linecap="round"
class="my-path"></path>
<path d="M13.8 11.1L13.8 16.5" stroke="#000000" stroke-width="2" stroke-linecap="round"
class="my-path"></path>
</svg>Delete</button>
</div>
<div class="flex justify-center items-center">
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border border-gray-300 font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4">
<path
d="M18.5 9C19.8807 9 21 10.1193 21 11.5V15C21 17.8284 21 19.2426 20.1213 20.1213C19.2426 21 17.8284 21 15 21H9C6.17157 21 4.75736 21 3.87868 20.1213C3 19.2426 3 17.8284 3 15V11.5C3 10.1193 4.11929 9 5.5 9"
stroke="#000000" stroke-width="2" stroke-linecap="round" class="my-path"></path>
<path d="M12 16L7.80408 11.804M12 16L16.196 11.804M12 16V3" stroke="#000000" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
</svg></button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border border-gray-300 font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
class="w-4 h-4" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-share2 lucide-share-2" aria-hidden="true">
<circle cx="18" cy="5" r="3"></circle>
<circle cx="6" cy="12" r="3"></circle>
<circle cx="18" cy="19" r="3"></circle>
<line x1="8.59" x2="15.42" y1="13.51" y2="17.49"></line>
<line x1="15.41" x2="8.59" y1="6.51" y2="10.49"></line>
</svg></button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border border-gray-300 font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4">
<path
d="M15.2995 4.42255L6.34327 13.4872C6.11694 13.7162 6.00377 13.8308 5.9332 13.9717C5.86262 14.1127 5.83924 14.271 5.79248 14.5875L5.55022 16.2271C5.36753 17.4635 5.27619 18.0817 5.64364 18.435C6.01109 18.7883 6.63525 18.6823 7.88356 18.4704L9.53897 18.1894C9.85851 18.1352 10.0183 18.1081 10.1593 18.0349C10.3004 17.9617 10.4136 17.8471 10.6399 17.618L19.5962 8.55344C20.2588 7.88278 20.5901 7.54745 20.5848 7.13611C20.5796 6.72476 20.2397 6.39805 19.5601 5.74462L18.147 4.38599C17.4673 3.73256 17.1275 3.40584 16.7105 3.4112C16.2935 3.41655 15.9622 3.75188 15.2995 4.42255Z"
stroke="#000000" stroke-width="2" class="my-path"></path>
<path d="M18 10L14 6" stroke="#000000" stroke-width="2" class="my-path"></path>
</svg></button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border border-gray-300 font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4">
<path
d="M3 6.60001H21M4.8 6.60001H19.2V15C19.2 17.8284 19.2 19.2426 18.3213 20.1213C17.4426 21 16.0284 21 13.2 21H10.8C7.97157 21 6.55736 21 5.67868 20.1213C4.8 19.2426 4.8 17.8284 4.8 15V6.60001Z"
stroke="#000000" stroke-width="2" stroke-linecap="round" class="my-path"></path>
<path
d="M7.49994 6.59994V4.99994C7.49994 3.89537 8.39537 2.99994 9.49994 2.99994H14.4999C15.6045 2.99994 16.4999 3.89537 16.4999 4.99994V6.59994M16.4999 6.59994H2.99994M16.4999 6.59994H21"
stroke="#000000" stroke-width="2" stroke-linecap="round" class="my-path"></path>
<path d="M10.2 11.1L10.2 16.5" stroke="#000000" stroke-width="2" stroke-linecap="round"
class="my-path"></path>
<path d="M13.8 11.1L13.8 16.5" stroke="#000000" stroke-width="2" stroke-linecap="round"
class="my-path"></path>
</svg></button>
</div>
</div>Bulk Action Button Group Examples
A button group designed to perform multiple bulk actions like select, delete, or move items efficiently.
<!-- Bulk Actions -->
<div class="flex flex-col gap-4">
<div class="flex justify-center">
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border border-gray-300 font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
class="w-4 h-4" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-square-check-big" aria-hidden="true">
<path d="M21 10.656V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h12.344"></path>
<path d="m9 11 3 3L22 4"></path>
</svg> Select All </button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border border-gray-300 font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4">
<path
d="M3 6.60001H21M4.8 6.60001H19.2V15C19.2 17.8284 19.2 19.2426 18.3213 20.1213C17.4426 21 16.0284 21 13.2 21H10.8C7.97157 21 6.55736 21 5.67868 20.1213C4.8 19.2426 4.8 17.8284 4.8 15V6.60001Z"
stroke="#000000" stroke-width="2" stroke-linecap="round" class="my-path"></path>
<path
d="M7.49994 6.59994V4.99994C7.49994 3.89537 8.39537 2.99994 9.49994 2.99994H14.4999C15.6045 2.99994 16.4999 3.89537 16.4999 4.99994V6.59994M16.4999 6.59994H2.99994M16.4999 6.59994H21"
stroke="#000000" stroke-width="2" stroke-linecap="round" class="my-path"></path>
<path d="M10.2 11.1L10.2 16.5" stroke="#000000" stroke-width="2" stroke-linecap="round"
class="my-path"></path>
<path d="M13.8 11.1L13.8 16.5" stroke="#000000" stroke-width="2" stroke-linecap="round"
class="my-path"></path>
</svg> Delete </button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border border-gray-300 font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
class="w-4 h-4" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-archive" aria-hidden="true">
<rect width="20" height="5" x="2" y="3" rx="1"></rect>
<path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"></path>
<path d="M10 12h4"></path>
</svg>Archive</button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border border-gray-300 font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4">
<path
d="M9 21H15C17.8284 21 19.2426 21 20.1213 20.1213C21 19.2426 21 17.8284 21 15V10C21 8.11438 21 7.17157 20.4142 6.58579C19.8284 6 18.8856 6 17 6H14.8028C14.0882 6 13.7309 6 13.4105 5.888C13.2148 5.81961 13.0309 5.72121 12.8655 5.59633C12.5946 5.39184 12.3964 5.09456 12 4.5C11.6036 3.90544 11.4054 3.60816 11.1345 3.40367C10.9691 3.27879 10.7852 3.18039 10.5895 3.112C10.2691 3 9.91179 3 9.19722 3H8.89627C6.16864 3 4.80482 3 3.93706 3.82186C3.89763 3.85921 3.85921 3.89763 3.82186 3.93706C3 4.80482 3 6.16864 3 8.89627V15C3 17.8284 3 19.2426 3.87868 20.1213C4.75736 21 6.17157 21 9 21Z"
stroke="#000000" stroke-width="2" class="my-path"></path>
</svg>Move</button>
</div>
<div class="flex justify-center items-center">
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border border-gray-300 font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
Select All (12)</button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border border-gray-300 font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
Delete (3)</button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border border-gray-300 font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
Archive (3)</button>
</div>
</div>Comment Action Group Examples
A compact set of buttons enabling users to interact with comments through quick actions such as replying, editing, or removing.
<!-- Comment Actions -->
<div class="flex flex-col gap-4">
<div class="flex justify-center">
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px rounded-md font-medium shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-reply" aria-hidden="true">
<path d="M20 18v-2a4 4 0 0 0-4-4H4"></path>
<path d="m9 17-5-5 5-5"></path>
</svg> Reply </button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px rounded-md font-medium shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4">
<path
d="M15.2995 4.42255L6.34327 13.4872C6.11694 13.7162 6.00377 13.8308 5.9332 13.9717C5.86262 14.1127 5.83924 14.271 5.79248 14.5875L5.55022 16.2271C5.36753 17.4635 5.27619 18.0817 5.64364 18.435C6.01109 18.7883 6.63525 18.6823 7.88356 18.4704L9.53897 18.1894C9.85851 18.1352 10.0183 18.1081 10.1593 18.0349C10.3004 17.9617 10.4136 17.8471 10.6399 17.618L19.5962 8.55344C20.2588 7.88278 20.5901 7.54745 20.5848 7.13611C20.5796 6.72476 20.2397 6.39805 19.5601 5.74462L18.147 4.38599C17.4673 3.73256 17.1275 3.40584 16.7105 3.4112C16.2935 3.41655 15.9622 3.75188 15.2995 4.42255Z"
stroke="#000000" stroke-width="2" class="my-path"></path>
<path d="M18 10L14 6" stroke="#000000" stroke-width="2" class="my-path"></path>
</svg>Edit</button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px rounded-md font-medium shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4">
<path
d="M3 6.60001H21M4.8 6.60001H19.2V15C19.2 17.8284 19.2 19.2426 18.3213 20.1213C17.4426 21 16.0284 21 13.2 21H10.8C7.97157 21 6.55736 21 5.67868 20.1213C4.8 19.2426 4.8 17.8284 4.8 15V6.60001Z"
stroke="#000000" stroke-width="2" stroke-linecap="round" class="my-path"></path>
<path
d="M7.49994 6.59994V4.99994C7.49994 3.89537 8.39537 2.99994 9.49994 2.99994H14.4999C15.6045 2.99994 16.4999 3.89537 16.4999 4.99994V6.59994M16.4999 6.59994H2.99994M16.4999 6.59994H21"
stroke="#000000" stroke-width="2" stroke-linecap="round" class="my-path"></path>
<path d="M10.2 11.1L10.2 16.5" stroke="#000000" stroke-width="2" stroke-linecap="round"
class="my-path"></path>
<path d="M13.8 11.1L13.8 16.5" stroke="#000000" stroke-width="2" stroke-linecap="round"
class="my-path"></path>
</svg> Delete </button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px rounded-md font-medium shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-flag" aria-hidden="true">
<path
d="M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528">
</path>
</svg>Report</button>
</div>
<div class="flex justify-center items-center">
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border border-gray-300 font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-reply" aria-hidden="true">
<path d="M20 18v-2a4 4 0 0 0-4-4H4"></path>
<path d="m9 17-5-5 5-5"></path>
</svg></button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border border-gray-300 font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4">
<path
d="M15.2995 4.42255L6.34327 13.4872C6.11694 13.7162 6.00377 13.8308 5.9332 13.9717C5.86262 14.1127 5.83924 14.271 5.79248 14.5875L5.55022 16.2271C5.36753 17.4635 5.27619 18.0817 5.64364 18.435C6.01109 18.7883 6.63525 18.6823 7.88356 18.4704L9.53897 18.1894C9.85851 18.1352 10.0183 18.1081 10.1593 18.0349C10.3004 17.9617 10.4136 17.8471 10.6399 17.618L19.5962 8.55344C20.2588 7.88278 20.5901 7.54745 20.5848 7.13611C20.5796 6.72476 20.2397 6.39805 19.5601 5.74462L18.147 4.38599C17.4673 3.73256 17.1275 3.40584 16.7105 3.4112C16.2935 3.41655 15.9622 3.75188 15.2995 4.42255Z"
stroke="#000000" stroke-width="2" class="my-path"></path>
<path d="M18 10L14 6" stroke="#000000" stroke-width="2" class="my-path"></path>
</svg></button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border border-gray-300 font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4">
<path
d="M3 6.60001H21M4.8 6.60001H19.2V15C19.2 17.8284 19.2 19.2426 18.3213 20.1213C17.4426 21 16.0284 21 13.2 21H10.8C7.97157 21 6.55736 21 5.67868 20.1213C4.8 19.2426 4.8 17.8284 4.8 15V6.60001Z"
stroke="#000000" stroke-width="2" stroke-linecap="round" class="my-path"></path>
<path
d="M7.49994 6.59994V4.99994C7.49994 3.89537 8.39537 2.99994 9.49994 2.99994H14.4999C15.6045 2.99994 16.4999 3.89537 16.4999 4.99994V6.59994M16.4999 6.59994H2.99994M16.4999 6.59994H21"
stroke="#000000" stroke-width="2" stroke-linecap="round" class="my-path"></path>
<path d="M10.2 11.1L10.2 16.5" stroke="#000000" stroke-width="2" stroke-linecap="round"
class="my-path"></path>
<path d="M13.8 11.1L13.8 16.5" stroke="#000000" stroke-width="2" stroke-linecap="round"
class="my-path"></path>
</svg></button>
</div>
</div>Split Button group with Dropdown Example
A split button group combining a primary action button with a dropdown menu for quick access to related secondary options.
<div class="flex flex-col gap-4">
<div class="flex justify-center">
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-git-fork" aria-hidden="true">
<circle cx="12" cy="18" r="3"></circle>
<circle cx="6" cy="6" r="3"></circle>
<circle cx="18" cy="6" r="3"></circle>
<path d="M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9"></path>
<path d="M12 12v3"></path>
</svg> Fork</button>
<div data-target="dropdown-with-icon"
class="dropdown relative dropdown-toggle flex py-1 px-3 relative gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm">
<button type="button" class="w-full">
<svg class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M18.0004 8.99963L12.0001 14.9999L5.99634 8.99609" stroke="#000000" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
</svg>
</button>
<div id="dropdown-with-icon"
class="dropdown-menu hidden rounded-xl shadow-lg bg-white absolute left-[-5.625rem] top-full left-0 w-40 mt-1"
aria-labelledby="dropdown-with-icon">
<ul class="py-2">
<li>
<a class="flex items-center gap-3 px-3 py-2 hover:bg-gray-100 text-gray-900 font-medium"
href="javascript:;">
Create a fork</a>
</li>
<li>
<a class="flex items-center gap-3 px-3 py-2 hover:bg-gray-100 text-gray-900 font-medium"
href="javascript:;">
View existing forks </a>
</li>
</ul>
</div>
</div>
</div>
</div>Button Group with Select Examples
A button group paired with a select menu to combine quick actions and option selection in a single interface.
<!-- Button Group with Select -->
<div class="flex flex-col gap-4">
<div class="flex justify-center">
<button type="button"
class="flex py-1 px-3 relative gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm">
<select id="countries" class="block w-full pr-4 focus:outline-none appearance-none w-full">
<option selected>🇺🇸 US</option>
<option value="GB Uk">🇬🇧 UK</option>
<option value="EU EU">🇪🇺 EU</option>
</select>
<svg xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4 absolute right-2 top-1/2 -translate-y-1/2 opacity-50 pointer-events-none" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
aria-hidden="true" viewBox="0 0 24 24">
<path d="m6 9 6 6 6-6"></path>
</svg>
</button>
<button type="button"
class="py-1 px-4 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-neutral-100 shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
+1 (555) 123-4567</button>
</div>
<div class="flex flex-col gap-4">
<div class="flex justify-center">
<button type="button"
class="flex py-1 px-3 relative gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm">
<select id="countries" class="block w-full pr-4 focus:outline-none appearance-none w-full">
<option selected>https://</option>
<option value="GB Uk">http://</option>
</select>
<svg xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4 absolute right-2 top-1/2 -translate-y-1/2 opacity-50 pointer-events-none"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" aria-hidden="true" viewBox="0 0 24 24">
<path d="m6 9 6 6 6-6"></path>
</svg>
</button>
<button type="button"
class="py-1 px-4 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-neutral-100 shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
example.com</button>
</div>
</div>
</div>Stepper Button Group Example
Button group used to increase or decrease values step by step, ideal for quantity or numeric inputs.
<!-- Stepper Button Group -->
<div class="flex justify-center">
<button type="button" id="decrement"
class="py-2 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all duration-500 text-sm">
<svg class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M18.0004 8.99963L12.0001 14.9999L5.99634 8.99609" stroke="black" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
<input id="numberInput" type="number" value="1" min="0" max="200" step="1"
class="w-20 py-1 text-center px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle outline-none transition-all duration-500 text-sm" />
<button type="button" id="increment"
class="py-2 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all duration-500 text-sm">
<svg class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M5.99622 14.9963L11.9965 8.99609L18.0002 14.9999" stroke="black" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
</div>Rich Text Toolbar Group Examples
A button group that provides text formatting options like bold, italic, underline, and alignment controls.
<!-- Rich Text Toolbar -->
<div class="flex flex-col gap-4">
<div class="flex justify-center">
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all duration-500 text-sm group focus:bg-blue-500 ">
<svg xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4 transition-all duration-500 group-focus:text-white" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-bold" aria-hidden="true">
<path d="M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8"></path>
</svg> </button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all duration-500 text-sm group focus:bg-blue-500 text-sm ">
<svg xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4 transition-all duration-500 group-focus:text-white" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-italic" aria-hidden="true">
<line x1="19" x2="10" y1="4" y2="4"></line>
<line x1="14" x2="5" y1="20" y2="20"></line>
<line x1="15" x2="9" y1="4" y2="20"></line>
</svg> </button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all duration-500 text-sm group focus:bg-blue-500 text-sm ">
<svg xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4 transition-all duration-500 group-focus:text-white" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-underline" aria-hidden="true">
<path d="M6 4v6a6 6 0 0 0 12 0V4"></path>
<line x1="4" x2="20" y1="20" y2="20"></line>
</svg> </button>
</div>
<div class="flex justify-center">
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all duration-500 text-sm">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-text-align-start" aria-hidden="true">
<path d="M21 5H3"></path>
<path d="M15 12H3"></path>
<path d="M17 19H3"></path>
</svg> </button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all duration-500 text-sm text-sm ">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-text-align-center" aria-hidden="true">
<path d="M21 5H3"></path>
<path d="M17 12H7"></path>
<path d="M19 19H5"></path>
</svg> </button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all duration-500 text-sm text-sm ">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-text-align-end" aria-hidden="true">
<path d="M21 5H3"></path>
<path d="M21 12H9"></path>
<path d="M21 19H7"></path>
</svg> </button>
</div>
<div class="flex justify-center">
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all duration-500 text-sm">
<svg xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4 transition-all duration-500 group-focus:text-white" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-bold" aria-hidden="true">
<path d="M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8"></path>
</svg> </button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all duration-500 text-sm text-sm ">
<svg xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4 transition-all duration-500 group-focus:text-white" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-italic" aria-hidden="true">
<line x1="19" x2="10" y1="4" y2="4"></line>
<line x1="14" x2="5" y1="20" y2="20"></line>
<line x1="15" x2="9" y1="4" y2="20"></line>
</svg> </button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all duration-500 text-sm text-sm ">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-list" aria-hidden="true">
<path d="M3 5h.01"></path>
<path d="M3 12h.01"></path>
<path d="M3 19h.01"></path>
<path d="M8 5h13"></path>
<path d="M8 12h13"></path>
<path d="M8 19h13"></path>
</svg> </button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all duration-500 text-sm text-sm ">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-list-ordered" aria-hidden="true">
<path d="M11 5h10"></path>
<path d="M11 12h10"></path>
<path d="M11 19h10"></path>
<path d="M4 4h1v5"></path>
<path d="M4 9h2"></path>
<path d="M6.5 20H3.4c0-1 2.6-1.925 2.6-3.5a1.5 1.5 0 0 0-2.6-1.02"></path>
</svg> </button>
</div>
</div>Notifications Button Group Examples
This example can be show Notifications in button.
<!-- Notifications Button -->
<div class="flex flex-col gap-4">
<div class="flex justify-center">
<button type="button"
class=" relative px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 18C15 19.6569 13.6569 21 12 21C10.3431 21 9 19.6569 9 18" stroke="#000000"
stroke-width="2" class="my-path"></path>
<path
d="M17.7271 9L18.3933 12.2569C18.6247 13.3885 19.2163 14.4147 20.0796 15.1821L20.1787 15.2701C20.658 15.6961 20.7756 16.3986 20.4612 16.9575C20.099 17.6015 19.4176 18 18.6788 18H5.32088C4.58204 18 3.90065 17.6015 3.53843 16.9575C3.22404 16.3986 3.34165 15.6961 3.82094 15.2701L3.92 15.1821C4.78328 14.4147 5.3749 13.3885 5.60636 12.2569L6.59803 7.40872C7.12291 4.84266 9.38062 3 11.9998 3"
stroke="#000000" stroke-width="2" stroke-linecap="round" class="my-path"></path>
<path
d="M18 5C18 6.10457 17.1046 7 16 7C14.8954 7 14 6.10457 14 5C14 3.89543 14.8954 3 16 3C17.1046 3 18 3.89543 18 5Z"
stroke="#000000" stroke-width="2" class="my-path"></path>
</svg> <span data-slot="badge"
class="py-0.5 font-medium w-fit whitespace-nowrap bg-blue-500 text-white -top-2 right-0 absolute z-10 h-5 min-w-5 rounded-full px-1.5 text-xs">12</span>
</button>
<button type="button"
class="relative py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 18C15 19.6569 13.6569 21 12 21C10.3431 21 9 19.6569 9 18" stroke="#000000"
stroke-width="2" class="my-path"></path>
<path
d="M17.7271 9L18.3933 12.2569C18.6247 13.3885 19.2163 14.4147 20.0796 15.1821L20.1787 15.2701C20.658 15.6961 20.7756 16.3986 20.4612 16.9575C20.099 17.6015 19.4176 18 18.6788 18H5.32088C4.58204 18 3.90065 17.6015 3.53843 16.9575C3.22404 16.3986 3.34165 15.6961 3.82094 15.2701L3.92 15.1821C4.78328 14.4147 5.3749 13.3885 5.60636 12.2569L6.59803 7.40872C7.12291 4.84266 9.38062 3 11.9998 3"
stroke="#000000" stroke-width="2" stroke-linecap="round" class="my-path"></path>
<path
d="M18 5C18 6.10457 17.1046 7 16 7C14.8954 7 14 6.10457 14 5C14 3.89543 14.8954 3 16 3C17.1046 3 18 3.89543 18 5Z"
stroke="#000000" stroke-width="2" class="my-path"></path>
</svg> <span data-slot="badge"
class="py-0.5 font-medium w-fit whitespace-nowrap bg-red-600 text-white -top-2 right-0 absolute z-10 h-5 min-w-5 rounded-full px-1.5 text-xs">12+</span>
</button>
</div>
</div>Button Group with Count Examples
A button group featuring with counts to display like total.
<!-- Like with Count -->
<div class="flex flex-col gap-4">
<div class="flex justify-center">
<button type="button"
class="px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
<svg class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M4.12695 13.218L12.026 21L20.2707 12.8774" stroke="#000000" stroke-width="2"
stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
<path
d="M12.0039 4.68819C14.2887 2.43727 18.0014 2.43727 20.2862 4.68819C22.571 6.94652 22.571 10.5969 20.2937 12.8552"
stroke="#000000" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"
stroke-linejoin="round" class="my-path"></path>
<path
d="M11.9959 4.68819C9.71112 2.43727 5.99836 2.43727 3.71358 4.68819C1.42881 6.93912 1.42881 10.5969 3.71358 12.8478M3.71358 12.8478L3.73297 12.8668M3.71358 12.8478L4.11943 13.2106"
stroke="#000000" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"
stroke-linejoin="round" class="my-path"></path>
</svg> Like
</button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-neutral-100 shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
1.2k
</button>
</div>
<div class="flex justify-center">
<button type="button"
class="px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
<svg class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M4.12695 13.218L12.026 21L20.2707 12.8774" stroke="#000000" stroke-width="2"
stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
<path
d="M12.0039 4.68819C14.2887 2.43727 18.0014 2.43727 20.2862 4.68819C22.571 6.94652 22.571 10.5969 20.2937 12.8552"
stroke="#000000" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"
stroke-linejoin="round" class="my-path"></path>
<path
d="M11.9959 4.68819C9.71112 2.43727 5.99836 2.43727 3.71358 4.68819C1.42881 6.93912 1.42881 10.5969 3.71358 12.8478M3.71358 12.8478L3.73297 12.8668M3.71358 12.8478L4.11943 13.2106"
stroke="#000000" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"
stroke-linejoin="round" class="my-path"></path>
</svg>
</button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-neutral-100 shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
342
</button>
</div>
<div class="flex justify-center">
<button type="button"
class="px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg font-medium bg-blue-500 shadow-xs text-white align-middle hover:bg-blue-600 outline-none transition-all text-sm ">
<svg class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3.15135 4.1185C5.56782 1.73784 9.38479 1.57302 11.9952 3.62405C14.6065 1.57302 18.4304 1.73784 20.8469 4.1185L20.8478 4.11942C23.4493 6.69074 23.4493 10.852 20.8563 13.4234L20.8534 13.4263L12.5555 21.5711C12.244 21.8769 11.745 21.8765 11.4339 21.5703L3.15135 13.4179C0.548507 10.8536 0.548507 6.68278 3.15135 4.1185Z"
fill="#ffffff" class="my-path"></path>
</svg> Liked
</button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-neutral-100 shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
1.2k
</button>
</div>
</div>Cart Button Group Examples
Button group that provides quick cart-related details.
<!-- Like with Count -->
<div class="flex flex-col gap-4">
<div class="flex justify-center">
<button type="button"
class="px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
<svg class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M4.12695 13.218L12.026 21L20.2707 12.8774" stroke="#000000" stroke-width="2"
stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
<path
d="M12.0039 4.68819C14.2887 2.43727 18.0014 2.43727 20.2862 4.68819C22.571 6.94652 22.571 10.5969 20.2937 12.8552"
stroke="#000000" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"
stroke-linejoin="round" class="my-path"></path>
<path
d="M11.9959 4.68819C9.71112 2.43727 5.99836 2.43727 3.71358 4.68819C1.42881 6.93912 1.42881 10.5969 3.71358 12.8478M3.71358 12.8478L3.73297 12.8668M3.71358 12.8478L4.11943 13.2106"
stroke="#000000" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"
stroke-linejoin="round" class="my-path"></path>
</svg> Like
</button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-neutral-100 shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
1.2k
</button>
</div>
<div class="flex justify-center">
<button type="button"
class="px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
<svg class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M4.12695 13.218L12.026 21L20.2707 12.8774" stroke="#000000" stroke-width="2"
stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
<path
d="M12.0039 4.68819C14.2887 2.43727 18.0014 2.43727 20.2862 4.68819C22.571 6.94652 22.571 10.5969 20.2937 12.8552"
stroke="#000000" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"
stroke-linejoin="round" class="my-path"></path>
<path
d="M11.9959 4.68819C9.71112 2.43727 5.99836 2.43727 3.71358 4.68819C1.42881 6.93912 1.42881 10.5969 3.71358 12.8478M3.71358 12.8478L3.73297 12.8668M3.71358 12.8478L4.11943 13.2106"
stroke="#000000" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"
stroke-linejoin="round" class="my-path"></path>
</svg>
</button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-neutral-100 shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
342
</button>
</div>
<div class="flex justify-center">
<button type="button"
class="px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg font-medium bg-blue-500 shadow-xs text-white align-middle hover:bg-blue-600 outline-none transition-all text-sm ">
<svg class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3.15135 4.1185C5.56782 1.73784 9.38479 1.57302 11.9952 3.62405C14.6065 1.57302 18.4304 1.73784 20.8469 4.1185L20.8478 4.11942C23.4493 6.69074 23.4493 10.852 20.8563 13.4234L20.8534 13.4263L12.5555 21.5711C12.244 21.8769 11.745 21.8765 11.4339 21.5703L3.15135 13.4179C0.548507 10.8536 0.548507 6.68278 3.15135 4.1185Z"
fill="#ffffff" class="my-path"></path>
</svg> Liked
</button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-neutral-100 shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
1.2k
</button>
</div>
</div>Button Group-Messages and Followers Examples
Communication buttons with badges and follower counts for social and messaging interfaces.
<!-- Messages and Followers -->
<div class="flex flex-col gap-4">
<div class="flex justify-center">
<button type="button"
class="px-3 py-2 relative inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
<svg class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3 12C3 8.22876 3 6.34315 4.17157 5.17157C5.34315 4 7.22876 4 11 4H13C16.7712 4 18.6569 4 19.8284 5.17157C21 6.34315 21 8.22876 21 12C21 15.7712 21 17.6569 19.8284 18.8284C18.6569 20 16.7712 20 13 20H11C7.22876 20 5.34315 20 4.17157 18.8284C3 17.6569 3 15.7712 3 12Z"
stroke="#000000" stroke-width="2" class="my-path"></path>
<path
d="M3.54883 6.73307L7.76733 9.36198C9.82587 10.6448 10.8551 11.2863 11.9998 11.2861C13.1445 11.2859 14.1736 10.6441 16.2317 9.36063L20.461 6.72314"
stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="my-path"></path>
</svg> Messages <span data-slot="badge"
class="py-0.5 font-medium w-fit whitespace-nowrap bg-red-600 text-white -top-1 -right-1 absolute z-10 h-5 min-w-5 rounded-full px-1 text-xs">8</span>
</button>
</div>
<div class="flex justify-center">
<button type="button"
class="px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-user-plus" aria-hidden="true">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<line x1="19" x2="19" y1="8" y2="14"></line>
<line x1="22" x2="16" y1="11" y2="11"></line>
</svg> Follow
</button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-neutral-100 shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
2.4k followers
</button>
</div>
<div class="flex justify-center">
<button type="button"
class="px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg font-medium bg-blue-500 shadow-xs text-white align-middle hover:bg-blue-600 outline-none transition-all text-sm ">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-user-plus" aria-hidden="true">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<line x1="19" x2="19" y1="8" y2="14"></line>
<line x1="22" x2="16" y1="11" y2="11"></line>
</svg> Following
</button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-neutral-100 shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
2.4k
</button>
</div>
</div>Chart Controls Button Group Examples
A button group that offers interactive controls to adjust chart.
<!-- Chart Controls -->
<div class="flex flex-col gap-4">
<div class="flex justify-center">
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle focus:bg-blue-500 focus:text-white outline-none transition-all text-sm ">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-chart-line" aria-hidden="true">
<path d="M3 3v16a2 2 0 0 0 2 2h16"></path>
<path d="m19 9-5 5-4-4-3 3"></path>
</svg> Line </button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle outline-none transition-all text-sm focus:bg-blue-500 focus:text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-chart-column" aria-hidden="true">
<path d="M3 3v16a2 2 0 0 0 2 2h16"></path>
<path d="M18 17V9"></path>
<path d="M13 17V5"></path>
<path d="M8 17v-3"></path>
</svg>Bar</button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle outline-none transition-all text-sm focus:bg-blue-500 focus:text-white">
<svg class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M18.9993 9.45056C19.9731 9.45056 20.46 9.45056 20.7596 9.04C21.0592 8.62944 20.9367 8.24711 20.6917 7.48244C20.6375 7.31347 20.5764 7.14654 20.5083 6.98208C20.1841 6.19948 19.709 5.48839 19.11 4.88941C18.511 4.29043 17.7999 3.81529 17.0173 3.49113C16.8529 3.42301 16.6859 3.36184 16.5169 3.3077C15.7523 3.06271 15.3699 2.94021 14.9594 3.23979C14.5488 3.53936 14.5488 4.02628 14.5488 5.00012L14.5488 7.45056C14.5488 8.39337 14.5488 8.86477 14.8417 9.15767C15.1346 9.45056 15.606 9.45056 16.5488 9.45056H18.9993Z"
stroke="currentColor" stroke-width="2" class="my-path"></path>
<path
d="M20.9995 11.9998C20.9995 16.9702 16.9702 20.9995 11.9998 20.9995C7.02933 20.9995 3 16.9702 3 11.9998C3 7.02933 7.02933 3 11.9998 3"
stroke="currentColor" stroke-width="2" stroke-linecap="round" class="my-path"></path>
</svg> Pie </button>
</div>
<div class="flex justify-center items-center">
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle outline-none transition-all text-sm focus:bg-blue-500 focus:text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-chart-line" aria-hidden="true">
<path d="M3 3v16a2 2 0 0 0 2 2h16"></path>
<path d="m19 9-5 5-4-4-3 3"></path>
</svg></button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle outline-none transition-all text-sm focus:bg-blue-500 focus:text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-chart-column" aria-hidden="true">
<path d="M3 3v16a2 2 0 0 0 2 2h16"></path>
<path d="M18 17V9"></path>
<path d="M13 17V5"></path>
<path d="M8 17v-3"></path>
</svg></button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle outline-none transition-all text-sm focus:bg-blue-500 focus:text-white">
<svg class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M18.9993 9.45056C19.9731 9.45056 20.46 9.45056 20.7596 9.04C21.0592 8.62944 20.9367 8.24711 20.6917 7.48244C20.6375 7.31347 20.5764 7.14654 20.5083 6.98208C20.1841 6.19948 19.709 5.48839 19.11 4.88941C18.511 4.29043 17.7999 3.81529 17.0173 3.49113C16.8529 3.42301 16.6859 3.36184 16.5169 3.3077C15.7523 3.06271 15.3699 2.94021 14.9594 3.23979C14.5488 3.53936 14.5488 4.02628 14.5488 5.00012L14.5488 7.45056C14.5488 8.39337 14.5488 8.86477 14.8417 9.15767C15.1346 9.45056 15.606 9.45056 16.5488 9.45056H18.9993Z"
stroke="currentColor" stroke-width="2" class="my-path"></path>
<path
d="M20.9995 11.9998C20.9995 16.9702 16.9702 20.9995 11.9998 20.9995C7.02933 20.9995 3 16.9702 3 11.9998C3 7.02933 7.02933 3 11.9998 3"
stroke="currentColor" stroke-width="2" stroke-linecap="round" class="my-path"></path>
</svg></button>
</div>
</div>Map Controls Group Examples
A button group that provides map control options like location for easy navigation.
<!-- Map Controls -->
<div class="flex flex-col gap-4">
<div class="flex justify-center group">
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium shadow-xs text-gray-900 align-middle outline-none transition-all text-sm bg-blue-500 text-white group-focus-within:bg-white group-focus-within:text-gray-900 focus:bg-blue-500 focus:text-white">
Satellite
</button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px border first:rounded-l-lg first:ml-0 last:rounded-r-lg font-medium bg-white shadow-xs text-gray-900 align-middle outline-none transition-all text-sm focus:bg-blue-500 focus:text-white">
Road
</button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle outline-none transition-all text-sm focus:bg-blue-500 focus:text-white">
Terrain
</button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle outline-none transition-all text-sm focus:bg-blue-500 focus:text-white">
Hybrid
</button>
</div>
<div class="flex justify-center items-center">
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle outline-none transition-all text-sm focus:bg-blue-500 focus:text-white">
<svg class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3 7.88304C3 6.49159 3 5.79587 3.37752 5.2721C3.75503 4.74832 4.41505 4.52832 5.73509 4.0883L9 3V19L8.26491 19.245C5.86241 20.0459 4.66116 20.4463 3.83058 19.8476C3 19.249 3 17.9828 3 15.4503V7.88304Z"
stroke="currentColor" stroke-width="null" stroke-linejoin="round" class="my-path"></path>
<path d="M9 3L15 5V21L9 19V3Z" stroke="currentColor" stroke-width="null" stroke-linejoin="round"
class="my-path"></path>
<path
d="M15 5.00018L15.7351 4.75515C18.1376 3.95431 19.3388 3.5539 20.1694 4.15255C21 4.75119 21 6.01742 21 8.54988V16.1171C21 17.5086 21 18.2043 20.6225 18.7281C20.245 19.2519 19.5849 19.4719 18.2649 19.9119L15 21.0002V5.00018Z"
stroke="currentColor" stroke-width="null" stroke-linejoin="round" class="my-path"></path>
</svg> Map</button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle outline-none transition-all text-sm focus:bg-blue-500 focus:text-white">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
class="w-4 h-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-navigation2 lucide-navigation-2" aria-hidden="true">
<polygon points="12 2 19 21 12 17 5 21 12 2"></polygon>
</svg>Street</button>
</div>
</div>Timeline Controls Button Group Examples
Timeline period selector button group for filtering data by time ranges in analytics and monitoring interfaces.
<!-- Messages and Followers -->
<div class="flex flex-col gap-4">
<div class="flex justify-center">
<button type="button"
class="px-3 py-2 relative inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
<svg class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3 12C3 8.22876 3 6.34315 4.17157 5.17157C5.34315 4 7.22876 4 11 4H13C16.7712 4 18.6569 4 19.8284 5.17157C21 6.34315 21 8.22876 21 12C21 15.7712 21 17.6569 19.8284 18.8284C18.6569 20 16.7712 20 13 20H11C7.22876 20 5.34315 20 4.17157 18.8284C3 17.6569 3 15.7712 3 12Z"
stroke="#000000" stroke-width="2" class="my-path"></path>
<path
d="M3.54883 6.73307L7.76733 9.36198C9.82587 10.6448 10.8551 11.2863 11.9998 11.2861C13.1445 11.2859 14.1736 10.6441 16.2317 9.36063L20.461 6.72314"
stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="my-path"></path>
</svg> Messages <span data-slot="badge"
class="py-0.5 font-medium w-fit whitespace-nowrap bg-red-600 text-white -top-1 -right-1 absolute z-10 h-5 min-w-5 rounded-full px-1 text-xs">8</span>
</button>
</div>
<div class="flex justify-center">
<button type="button"
class="px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-user-plus" aria-hidden="true">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<line x1="19" x2="19" y1="8" y2="14"></line>
<line x1="22" x2="16" y1="11" y2="11"></line>
</svg> Follow
</button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-neutral-100 shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
2.4k followers
</button>
</div>
<div class="flex justify-center">
<button type="button"
class="px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg font-medium bg-blue-500 shadow-xs text-white align-middle hover:bg-blue-600 outline-none transition-all text-sm ">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-user-plus" aria-hidden="true">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<line x1="19" x2="19" y1="8" y2="14"></line>
<line x1="22" x2="16" y1="11" y2="11"></line>
</svg> Following
</button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-neutral-100 shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all text-sm ">
2.4k
</button>
</div>
</div>Density Button Group Examples
Display density selector button group for adjusting content spacing and information density in data tables and lists.
<!-- Density Controls -->
<div class="flex flex-col gap-4">
<div class="flex justify-center group">
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium shadow-xs text-gray-900 align-middle outline-none transition-all text-sm bg-white focus:bg-blue-500 focus:text-white">
Compact
</button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px border first:rounded-l-lg first:ml-0 last:rounded-r-lg font-medium bg-white shadow-xs text-gray-900 align-middle outline-none transition-all text-sm focus:bg-blue-500 focus:text-white">
Comfortable
</button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle outline-none transition-all text-sm focus:bg-blue-500 focus:text-white">
Spacious
</button>
</div>
<div class="flex justify-center items-center">
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle outline-none transition-all text-sm focus:bg-blue-500 focus:text-white">
XS</button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle outline-none transition-all text-sm focus:bg-blue-500 focus:text-white">
S</button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle outline-none transition-all text-sm focus:bg-blue-500 focus:text-white">
M</button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle outline-none transition-all text-sm focus:bg-blue-500 focus:text-white">
L</button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle outline-none transition-all text-sm focus:bg-blue-500 focus:text-white">
XL</button>
</div>
</div>Date Selector Button Group Examples
Date range selector button group with preset periods and custom option for form filtering.
<div class="flex flex-col gap-4">
<div class="flex justify-center group">
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium shadow-xs text-gray-900 align-middle outline-none transition-all text-sm bg-white focus:bg-blue-500 focus:text-white">
Today
</button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px border first:rounded-l-lg first:ml-0 last:rounded-r-lg font-medium bg-white shadow-xs text-gray-900 align-middle outline-none transition-all text-sm focus:bg-blue-500 focus:text-white">
Yesterday
</button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle outline-none transition-all text-sm focus:bg-blue-500 focus:text-white">
Last 7 Days
</button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle outline-none transition-all text-sm focus:bg-blue-500 focus:text-white">
Last 30 Days
</button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle outline-none transition-all text-sm focus:bg-blue-500 focus:text-white">
Custom
</button>
</div>
<div class="flex justify-center items-center">
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle outline-none transition-all text-sm focus:bg-blue-500 focus:text-white">
This Week</button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle outline-none transition-all text-sm focus:bg-blue-500 focus:text-white">
This Month</button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle outline-none transition-all text-sm focus:bg-blue-500 focus:text-white">
This Year</button>
</div>
</div>Quantity Picker Button Group Example
Quantity picker button group with increment/decrement controls for product selection and item counting.
<!-- Quantity Picker -->
<div class="flex justify-center">
<button type="button" id="decrement2"
class="py-2 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all duration-500 text-sm">
<svg class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M18.9985 12H5.00146" stroke="black" stroke-width="2" stroke-linecap="round"
class="my-path">
</path>
</svg>
</button>
<button type="button" id="decrement2"
class="py-2 px-3 inline-flex justify-center gap-2 items-center text-center -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-neutral-100 shadow-xs text-gray-900 align-middle outline-none transition-all duration-500 text-sm">
Qty: <input id="numberInput2" type="number" value="5" min="0" max="30" step="1"
class="w-8 text-center inline-flex justify-center items-center gap-2 bg-neutral-100" />
</button>
<button type="button" id="increment2"
class="py-2 px-2 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle hover:bg-gray-50 outline-none transition-all duration-500 text-sm">
<svg class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M12 5V19M19 12H5" stroke="black" stroke-width="2" stroke-linecap="round"
class="my-path">
</path>
</svg>
</button>
</div>Button Group Pagination Example
Pagination button group with previous/next controls and numbered page buttons for multi-page navigation
<div class="flex flex-col justify-center items-center gap-4 font-medium">
<div class="flex">
<button id="prevIcon"
class="px-2.5 py-1.5 text-sm flex items-center gap-2 border bg-white -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
<svg class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M15.0001 17.9996L8.99988 11.9994L15.0037 5.99561" stroke="black"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="my-path">
</path>
</svg>Previous
</button>
<button
class="step-btn px-3 py-1.5 text-sm border -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg bg-white hover:bg-gray-50"
data-step="1">
1
</button>
<button
class="step-btn px-3 py-1.5 text-sm border -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg bg-white"
data-step="2">
2
</button>
<button
class="step-btn px-3 py-1.5 text-sm border -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg bg-white hover:bg-gray-50"
data-step="3">
3
</button>
<button
class="step-btn px-3 py-1.5 text-sm border -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg bg-white hover:bg-gray-50"
data-step="4">
4
</button>
<button id="nextIcon"
class="px-2.5 py-1.5 text-sm flex items-center gap-2 border -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
Next
<svg class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M9.00378 5.99561L15.004 11.9959L9.00024 17.9996" stroke="black"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="my-path">
</path>
</svg>
</button>
</div>
<div class="flex">
<button id="prevStep"
class="flex items-center gap-1 px-2.5 py-1.5 text-sm bg-white border -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
<svg class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M15.0001 17.9996L8.99988 11.9994L15.0037 5.99561" stroke="black"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="my-path">
</path>
</svg>
</button>
<button id="stepIndicator"
class="px-2.5 py-1.5 text-sm border -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg bg-white">
1 / 4
</button>
<button id="nextStep"
class="flex items-center gap-1 px-2.5 py-1.5 text-sm bg-white border -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
<svg class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M9.00378 5.99561L15.004 11.9959L9.00024 17.9996" stroke="black"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="my-path">
</path>
</svg>
</button>
</div>
</div>Player Controls Button Group Example
Media player control buttons with play icon and skip functionality for audio and video interfaces
<div class="flex flex-col gap-4">
<div class="flex justify-center group">
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium shadow-xs text-gray-900 align-middle outline-none transition-all text-sm bg-white">
<svg class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M11.58 8.6093C8.68495 10.1941 7.23742 10.9865 7.25058 12.1865C7.26373 13.3865 8.72828 14.147 11.6574 15.6679L14.1569 16.9658C16.7703 18.3229 18.0771 19.0014 19.0386 18.4172C20.0002 17.833 20.0002 16.3606 20.0002 13.4159V10.7497C20.0002 7.74009 20.0002 6.23527 19.0198 5.65429C18.0395 5.07331 16.7195 5.79589 14.0795 7.24105L11.58 8.6093Z"
stroke="black" stroke-width="2" class="my-path"></path>
<path d="M3 6V18" stroke="black" stroke-width="2" stroke-linecap="round" class="my-path"></path>
</svg>
</button>
<button id="iconButton" type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 border font-medium bg-white text-gray-900 align-middle outline-none transition-all text-sm -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg hover:bg-gray-50">
<!-- Play Icon -->
<svg class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M14.031 6.80725C18.0186 9.11585 20.0124 10.2702 20.0124 11.9998C20.0124 13.7295 18.0186 14.8838 14.031 17.1924L13.0062 17.7857C9.00415 20.1027 7.00311 21.2612 5.50155 20.3954C4 19.5297 4 17.2175 4 12.5931L4 11.4065C4 6.7821 4 4.46991 5.50156 3.60418C7.00311 2.73846 9.00415 3.89695 13.0062 6.21394L14.031 6.80725Z"
stroke="black" stroke-width="2"></path>
</svg>
</button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle outline-none transition-all text-sm">
<svg class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M11.4202 8.6093C14.3152 10.1941 15.7628 10.9865 15.7496 12.1865C15.7365 13.3865 14.2719 14.147 11.3428 15.6679L8.84332 16.9658C6.22987 18.3229 4.92314 19.0014 3.96157 18.4172C3 17.833 3 16.3606 3 13.4159L3 10.7497C3 7.74009 3 6.23527 3.98037 5.65429C4.96074 5.07331 6.28073 5.79589 8.9207 7.24105L11.4202 8.6093Z"
stroke="black" stroke-width="2" class="my-path"></path>
<path d="M20 6V18" stroke="black" stroke-width="2" stroke-linecap="round" class="my-path"></path>
</svg>
</button>
</div>
<div class="flex justify-center items-center">
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium shadow-xs text-gray-900 align-middle outline-none transition-all text-sm bg-white">
<svg class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M11.58 8.6093C8.68495 10.1941 7.23742 10.9865 7.25058 12.1865C7.26373 13.3865 8.72828 14.147 11.6574 15.6679L14.1569 16.9658C16.7703 18.3229 18.0771 19.0014 19.0386 18.4172C20.0002 17.833 20.0002 16.3606 20.0002 13.4159V10.7497C20.0002 7.74009 20.0002 6.23527 19.0198 5.65429C18.0395 5.07331 16.7195 5.79589 14.0795 7.24105L11.58 8.6093Z"
stroke="black" stroke-width="2" class="my-path"></path>
<path d="M3 6V18" stroke="black" stroke-width="2" stroke-linecap="round" class="my-path"></path>
</svg>Previous
</button>
<button id="textButton" type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 border font-medium bg-white text-gray-900 align-middle outline-none transition-all text-sm -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg hover:bg-gray-50">
<svg class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M14.031 6.80725C18.0186 9.11585 20.0124 10.2702 20.0124 11.9998C20.0124 13.7295 18.0186 14.8838 14.031 17.1924L13.0062 17.7857C9.00415 20.1027 7.00311 21.2612 5.50155 20.3954C4 19.5297 4 17.2175 4 12.5931L4 11.4065C4 6.7821 4 4.46991 5.50156 3.60418C7.00311 2.73846 9.00415 3.89695 13.0062 6.21394L14.031 6.80725Z"
stroke="black" stroke-width="2"></path>
</svg>
<span>Play</span>
</button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle outline-none transition-all text-sm">
<svg class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M11.4202 8.6093C14.3152 10.1941 15.7628 10.9865 15.7496 12.1865C15.7365 13.3865 14.2719 14.147 11.3428 15.6679L8.84332 16.9658C6.22987 18.3229 4.92314 19.0014 3.96157 18.4172C3 17.833 3 16.3606 3 13.4159L3 10.7497C3 7.74009 3 6.23527 3.98037 5.65429C4.96074 5.07331 6.28073 5.79589 8.9207 7.24105L11.4202 8.6093Z"
stroke="black" stroke-width="2" class="my-path"></path>
<path d="M20 6V18" stroke="black" stroke-width="2" stroke-linecap="round" class="my-path"></path>
</svg>Next
</button>
</div>
</div>Volume Controls Button Group Example
Volume control button group with mute and increment/decrement for audio level management
<div class="flex flex-col items-center justify-center gap-6">
<div class="inline-flex rounded-lg border bg-white shadow-sm overflow-hidden">
<button id="muteButton" type="button"
class="px-3 py-2 text-gray-700 hover:bg-gray-50 border-r transition-colors">
<svg id="muteIcon" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M11 5L6 9H3v6h3l5 4V5z" />
</svg>
</button>
<button id="decreaseButton" type="button"
class="px-3 py-2 text-gray-700 hover:bg-gray-50 border-r transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M11 5L6 9H3v6h3l5 4V5zM15 10a3 3 0 010 4" />
</svg>
</button>
<button id="increaseButton" type="button"
class="px-3 py-2 text-gray-700 hover:bg-gray-50 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M11 5L6 9H3v6h3l5 4V5zM15 9a5 5 0 010 6" />
</svg>
</button>
</div>
<div class="inline-flex rounded-lg border bg-white shadow-sm overflow-hidden">
<button id="minusButton" type="button"
class="px-3 py-2 text-gray-700 hover:bg-gray-50 border-r transition-colors">
-
</button>
<button id="statusButton" type="button" class="px-4 py-2 text-gray-700 bg-gray-50 cursor-default">
50%
</button>
<button id="plusButton" type="button" class="px-3 py-2 text-gray-700 hover:bg-gray-50 transition-colors">
+
</button>
</div>
</div>Button Group with Overflow Menu Example
Overflow menu button group combining primary actions with a dropdown for secondary options
<!-- overflow-menu -->
<div class="flex flex-col items-center justify-center gap-4">
<div class="flex justify-center group">
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium shadow-xs text-gray-900 align-middle outline-none transition-all text-sm bg-white hover:bg-gray-50">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4">
<path
d="M3 9C3 6.17157 3 4.75736 3.87868 3.87868C4.75736 3 6.17157 3 9 3C11.8284 3 13.2426 3 14.1213 3.87868C15 4.75736 15 6.17157 15 9C15 11.8284 15 13.2426 14.1213 14.1213C13.2426 15 11.8284 15 9 15C6.17157 15 4.75736 15 3.87868 14.1213C3 13.2426 3 11.8284 3 9Z"
stroke="currentColor" stroke-width="2" class="my-path"></path>
<path
d="M9 15C9 17.8284 9 19.2426 9.87868 20.1213C10.7574 21 12.1716 21 15 21C17.8284 21 19.2426 21 20.1213 20.1213C21 19.2426 21 17.8284 21 15C21 12.1716 21 10.7574 20.1213 9.87868C19.2426 9 17.8284 9 15 9"
stroke="currentColor" stroke-width="2" class="my-path"></path>
</svg> Copy
</button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle outline-none transition-all text-sm hover:bg-gray-50">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4">
<path
d="M15.2995 4.42255L6.34327 13.4872C6.11694 13.7162 6.00377 13.8308 5.9332 13.9717C5.86262 14.1127 5.83924 14.271 5.79248 14.5875L5.55022 16.2271C5.36753 17.4635 5.27619 18.0817 5.64364 18.435C6.01109 18.7883 6.63525 18.6823 7.88356 18.4704L9.53897 18.1894C9.85851 18.1352 10.0183 18.1081 10.1593 18.0349C10.3004 17.9617 10.4136 17.8471 10.6399 17.618L19.5962 8.55344C20.2588 7.88278 20.5901 7.54745 20.5848 7.13611C20.5796 6.72476 20.2397 6.39805 19.5601 5.74462L18.147 4.38599C17.4673 3.73256 17.1275 3.40584 16.7105 3.4112C16.2935 3.41655 15.9622 3.75188 15.2995 4.42255Z"
stroke="currentColor" stroke-width="2" class="my-path"></path>
<path d="M18 10L14 6" stroke="currentColor" stroke-width="2" class="my-path"></path>
</svg> Edit
</button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px border first:rounded-l-lg first:ml-0 last:rounded-r-lg font-medium bg-white shadow-xs text-gray-900 align-middle outline-none transition-all text-sm hover:bg-gray-50">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4">
<path
d="M3 6.60001H21M4.8 6.60001H19.2V15C19.2 17.8284 19.2 19.2426 18.3213 20.1213C17.4426 21 16.0284 21 13.2 21H10.8C7.97157 21 6.55736 21 5.67868 20.1213C4.8 19.2426 4.8 17.8284 4.8 15V6.60001Z"
stroke="currentColor" stroke-width="2" stroke-linecap="round" class="my-path"></path>
<path
d="M7.49994 6.59994V4.99994C7.49994 3.89537 8.39537 2.99994 9.49994 2.99994H14.4999C15.6045 2.99994 16.4999 3.89537 16.4999 4.99994V6.59994M16.4999 6.59994H2.99994M16.4999 6.59994H21"
stroke="currentColor" stroke-width="2" stroke-linecap="round" class="my-path"></path>
<path d="M10.2 11.1L10.2 16.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"
class="my-path"></path>
<path d="M13.8 11.1L13.8 16.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"
class="my-path"></path>
</svg> Delete
</button>
<div
class="dropdown relative flex border first:rounded-l-lg first:ml-0 last:rounded-r-lg font-medium bg-white shadow-xs text-gray-900 align-middle outline-none transition-all text-sm hover:bg-gray-50">
<button type="button" data-target="dropdown-with-icon"
class="dropdown-toggle py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px ">
More<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4">
<path d="M7.02736 12.001L6.97736 12.001" stroke="currentColor" stroke-width="2"
stroke-linecap="round" class="my-path"></path>
<path d="M12.041 12.001L11.991 12.001" stroke="currentColor" stroke-width="2"
stroke-linecap="round" class="my-path"></path>
<path d="M17.0547 12.001L17.0047 12.001" stroke="currentColor" stroke-width="2"
stroke-linecap="round" class="my-path"></path>
</svg>
</button>
<div id="dropdown-with-icon"
class="dropdown-menu rounded-xl shadow-lg bg-white absolute top-full w-auto mt-2 open hidden"
aria-labelledby="dropdown-with-icon">
<ul class="py-2">
<li>
<a class="flex items-center gap-3 px-3 py-2 hover:bg-gray-100 text-gray-900 font-medium"
href="javascript:;">
Duplicate </a>
</li>
<li>
<a class="flex items-center gap-3 px-3 py-2 hover:bg-gray-100 text-gray-900 font-medium"
href="javascript:;">
Archive </a>
</li>
<li>
<a class="flex items-center gap-3 px-3 py-2 hover:bg-gray-100 text-gray-900 font-medium"
href="javascript:;">
Export</a>
</li>
</ul>
</div>
</div>
</div>
</div>Contextual Toolbar Button Group Example
Contextual toolbar button group appearing on text selection for formatting actions
Select this text to see the formatting toolbar appear.
<!-- Contextual Toolbar -->
<div class="flex flex-col items-center justify-between gap-4">
<div class="rounded-md border bg-white w-fit mx-auto p-4">
<p class="text-black">Select this text to see the formatting toolbar appear.</p>
</div>
<div class="flex justify-center group">
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium shadow-xs text-gray-900 align-middle outline-none transition-all text-sm bg-white hover:bg-gray-50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-bold w-4 h-4" aria-hidden="true">
<path d="M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8"></path>
</svg> Bold
</button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle outline-none transition-all text-sm hover:bg-gray-50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-italic w-4 h-4" aria-hidden="true">
<line x1="19" x2="10" y1="4" y2="4"></line>
<line x1="14" x2="5" y1="20" y2="20"></line>
<line x1="15" x2="9" y1="4" y2="20"></line>
</svg> Italic
</button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px border first:rounded-l-lg first:ml-0 last:rounded-r-lg font-medium bg-white shadow-xs text-gray-900 align-middle outline-none transition-all text-sm hover:bg-gray-50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-underline w-4 h-4" aria-hidden="true">
<path d="M6 4v6a6 6 0 0 0 12 0V4"></path>
<line x1="4" x2="20" y1="20" y2="20"></line>
</svg> Underline
</button>
</div>
</div>Keyboard Shortcuts Button Group Examples
Button group with keyboard shortcuts displayed using Kbd component for shortcut visibility
<!-- Keyboard Shortcuts -->
<div class="flex flex-col gap-4">
<div class="flex justify-center group">
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium shadow-xs text-gray-900 align-middle outline-none transition-all text-sm bg-white hover:bg-gray-50">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4">
<path
d="M3 9C3 6.17157 3 4.75736 3.87868 3.87868C4.75736 3 6.17157 3 9 3C11.8284 3 13.2426 3 14.1213 3.87868C15 4.75736 15 6.17157 15 9C15 11.8284 15 13.2426 14.1213 14.1213C13.2426 15 11.8284 15 9 15C6.17157 15 4.75736 15 3.87868 14.1213C3 13.2426 3 11.8284 3 9Z"
stroke="currentColor" stroke-width="2" class="my-path"></path>
<path
d="M9 15C9 17.8284 9 19.2426 9.87868 20.1213C10.7574 21 12.1716 21 15 21C17.8284 21 19.2426 21 20.1213 20.1213C21 19.2426 21 17.8284 21 15C21 12.1716 21 10.7574 20.1213 9.87868C19.2426 9 17.8284 9 15 9"
stroke="currentColor" stroke-width="2" class="my-path"></path>
</svg> Copy <kbd class="text-neutral-500 text-xs px-1 rounded-sm bg-neutral-50">⌘C</kbd>
</button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle outline-none transition-all text-sm hover:bg-gray-50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-save w-4 h-4" aria-hidden="true">
<path
d="M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z">
</path>
<path d="M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7"></path>
<path d="M7 3v4a1 1 0 0 0 1 1h7"></path>
</svg> Save <kbd class="text-neutral-500 text-xs px-1 rounded-sm bg-neutral-50">⌘C</kbd>
</button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px border first:rounded-l-lg first:ml-0 last:rounded-r-lg font-medium bg-white shadow-xs text-gray-900 align-middle outline-none transition-all text-sm hover:bg-gray-50">
<svg class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M18.5 9C19.8807 9 21 10.1193 21 11.5V15C21 17.8284 21 19.2426 20.1213 20.1213C19.2426 21 17.8284 21 15 21H9C6.17157 21 4.75736 21 3.87868 20.1213C3 19.2426 3 17.8284 3 15V11.5C3 10.1193 4.11929 9 5.5 9"
stroke="currentColor" stroke-width="2" stroke-linecap="round" class="my-path"></path>
<path d="M12 16L7.80408 11.804M12 16L16.196 11.804M12 16V3" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
</svg> Export
<kbd class="text-neutral-500 text-xs px-1 rounded-sm bg-neutral-50">⌘C</kbd>
</button>
</div>
<div class="flex flex-col w-fit mx-auto group">
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-t-lg first:ml-0 last:rounded-r-lg border font-medium shadow-xs text-gray-900 align-middle outline-none transition-all text-sm bg-white hover:bg-gray-50">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4">
<path
d="M3 9C3 6.17157 3 4.75736 3.87868 3.87868C4.75736 3 6.17157 3 9 3C11.8284 3 13.2426 3 14.1213 3.87868C15 4.75736 15 6.17157 15 9C15 11.8284 15 13.2426 14.1213 14.1213C13.2426 15 11.8284 15 9 15C6.17157 15 4.75736 15 3.87868 14.1213C3 13.2426 3 11.8284 3 9Z"
stroke="currentColor" stroke-width="2" class="my-path"></path>
<path
d="M9 15C9 17.8284 9 19.2426 9.87868 20.1213C10.7574 21 12.1716 21 15 21C17.8284 21 19.2426 21 20.1213 20.1213C21 19.2426 21 17.8284 21 15C21 12.1716 21 10.7574 20.1213 9.87868C19.2426 9 17.8284 9 15 9"
stroke="currentColor" stroke-width="2" class="my-path"></path>
</svg> Copy <kbd class="text-neutral-500 text-xs px-1 rounded-sm bg-neutral-50">⌘C</kbd>
</button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg border font-medium bg-white shadow-xs text-gray-900 align-middle outline-none transition-all text-sm hover:bg-gray-50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-save w-4 h-4" aria-hidden="true">
<path
d="M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z">
</path>
<path d="M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7"></path>
<path d="M7 3v4a1 1 0 0 0 1 1h7"></path>
</svg> Save <kbd class="text-neutral-500 text-xs px-1 rounded-sm bg-neutral-50">⌘S</kbd>
</button>
<button type="button"
class="py-1 px-3 inline-flex justify-center items-center gap-2 -ml-px border first:rounded-b-lg first:ml-0 last:rounded-b-lg font-medium bg-white shadow-xs text-gray-900 align-middle outline-none transition-all text-sm hover:bg-gray-50">
<svg class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M18.5 9C19.8807 9 21 10.1193 21 11.5V15C21 17.8284 21 19.2426 20.1213 20.1213C19.2426 21 17.8284 21 15 21H9C6.17157 21 4.75736 21 3.87868 20.1213C3 19.2426 3 17.8284 3 15V11.5C3 10.1193 4.11929 9 5.5 9"
stroke="currentColor" stroke-width="2" stroke-linecap="round" class="my-path"></path>
<path d="M12 16L7.80408 11.804M12 16L16.196 11.804M12 16V3" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="my-path"></path>
</svg> Export
<kbd class="text-neutral-500 text-xs px-1 rounded-sm bg-neutral-50">⌘E
</kbd>
</button>
</div>
</div>Zoom Controls Button Group Example
Zoom control button group with increase/decrease and reset button for image and document scaling
<div class="flex flex-col items-center justify-center gap-4 font-medium">
<div class="inline-flex overflow-hidden ">
<button id="zoomOut1" type="button"
class="px-3 py-2 text-gray-900 hover:bg-gray-50 border -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg bg-white transition-colors">
<svg class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M14 11H8" stroke="black" stroke-width="2" stroke-linecap="round" class="my-path"></path>
<path d="M17 17L21 21" stroke="black" stroke-width="2" stroke-linecap="round" class="my-path">
</path>
<path
d="M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z"
stroke="black" stroke-width="2" class="my-path"></path>
</svg>
</button>
<button id="resetButton" type="button"
class="px-3 py-2 text-gray-900 hover:bg-gray-50 border -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg bg-white flex items-center gap-1 transition-colors">
<svg class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3.49219 3.504L3.49219 7.50399M3.49219 7.50399H7.49219M3.49219 7.50399L4.17076 6.72455L4.84934 5.94511C7.0437 3.53663 10.4737 2.40745 13.8379 3.3089C18.6391 4.59538 21.4884 9.53041 20.2019 14.3316C18.9154 19.1328 13.9804 21.982 9.17917 20.6956C7.44799 20.2317 5.97059 19.2935 4.84934 18.0582"
stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="my-path">
</path>
</svg>
Reset
</button>
<button id="zoomIn1" type="button"
class="px-3 py-2 text-gray-900 hover:bg-gray-50 border -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg bg-white transition-colors">
<svg class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M14 11H8" stroke="black" stroke-width="2" stroke-linecap="round" class="my-path"></path>
<path d="M11 14L11 8" stroke="black" stroke-width="2" stroke-linecap="round" class="my-path"></path>
<path d="M17 17L21 21" stroke="black" stroke-width="2" stroke-linecap="round" class="my-path">
</path>
<path
d="M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z"
stroke="black" stroke-width="2" class="my-path"></path>
</svg>
</button>
<button id="fitButton" type="button"
class="px-3 py-2 text-gray-900 hover:bg-gray-50 flex items-center gap-1 border -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg bg-white transition-colors">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M8 3H5a2 2 0 00-2 2v3m0 8v3a2 2 0 002 2h3m8 0h3a2 2 0 002-2v-3m0-8V5a2 2 0 00-2-2h-3" />
</svg>
Fit
</button>
</div>
<div class="inline-flex overflow-hidden">
<button id="zoomOut2" type="button"
class="px-3 py-2 text-gray-900 hover:bg-gray-50 border -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg bg-white transition-colors">
<svg class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M14 11H8" stroke="black" stroke-width="2" stroke-linecap="round" class="my-path"></path>
<path d="M17 17L21 21" stroke="black" stroke-width="2" stroke-linecap="round" class="my-path">
</path>
<path
d="M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z"
stroke="black" stroke-width="2" class="my-path"></path>
</svg>
</button>
<button id="zoomDisplay" type="button"
class="px-4 py-2 text-gray-900 bg-gray-50 border -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg bg-white cursor-default">
100%
</button>
<button id="zoomIn2" type="button"
class="px-3 py-2 text-gray-900 hover:bg-gray-50 border -ml-px first:rounded-l-lg first:ml-0 last:rounded-r-lg bg-white transition-colors">
<svg class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M14 11H8" stroke="black" stroke-width="2" stroke-linecap="round" class="my-path"></path>
<path d="M11 14L11 8" stroke="black" stroke-width="2" stroke-linecap="round" class="my-path"></path>
<path d="M17 17L21 21" stroke="black" stroke-width="2" stroke-linecap="round" class="my-path">
</path>
<path
d="M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z"
stroke="black" stroke-width="2" class="my-path"></path>
</svg>
</button>
</div>
</div>
1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More