Button Groups

Button Groups 10 · Split button with menu open

A split button with its small menu open beneath, listing three related actions.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='min-h-[260px] bg-white p-10'><div class='relative inline-block'><span class='inline-flex overflow-hidden rounded-lg border border-black'><button type='button' class='bg-black px-5 py-2.5 text-sm font-semibold text-white'>Save</button><button type='button' class='border-l border-neutral-700 bg-black px-3 text-white' aria-label='More'>⌄</button></span><div class='absolute right-0 mt-2 w-48 overflow-hidden rounded-xl border border-neutral-200 bg-white py-1 text-sm shadow-lg'><a href='#' class='block px-4 py-2 text-neutral-700 hover:bg-neutral-50'>Save as draft</a><a href='#' class='block px-4 py-2 text-neutral-700 hover:bg-neutral-50'>Save a copy</a><a href='#' class='block px-4 py-2 text-neutral-700 hover:bg-neutral-50'>Save and publish</a></div></div></div>

Button Groups 09 · Formatting toolbar

A text-editor toolbar made of three small groups (style, align, link) separated by gaps.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='bg-neutral-50 p-10'><div class='inline-flex flex-wrap gap-3 rounded-xl border border-neutral-200 bg-white p-2'><span class='inline-flex overflow-hidden rounded-lg border border-neutral-200 text-sm'><button type='button' class='bg-neutral-100 px-3 py-1.5 font-bold text-black'>B</button><button type='button' class='border-l border-neutral-200 px-3 py-1.5 italic text-neutral-700'>I</button><button type='button' class='border-l border-neutral-200 px-3 py-1.5 text-neutral-700 underline'>U</button></span><span class='inline-flex overflow-hidden rounded-lg border border-neutral-200 text-sm'><button type='button' class='px-3 py-1.5 text-neutral-700'>☰</button><button type='button' class='border-l border-neutral-200 px-3 py-1.5 text-neutral-700'>≡</button></span><button type='button' class='rounded-lg border border-neutral-200 px-3 py-1.5 text-sm text-neutral-700'>Link</button></div></div>

Button Groups 08 · Vertical group

Three buttons stacked and joined vertically, the top one selected.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='bg-white p-10'><span class='inline-flex w-44 flex-col overflow-hidden rounded-lg border border-neutral-300 text-sm'><button type='button' class='bg-black px-4 py-2.5 text-left font-medium text-white'>Overview</button><button type='button' class='border-t border-neutral-300 px-4 py-2.5 text-left text-neutral-700 hover:bg-neutral-50'>Activity</button><button type='button' class='border-t border-neutral-300 px-4 py-2.5 text-left text-neutral-700 hover:bg-neutral-50'>Settings</button></span></div>

Button Groups 07 · With counts

A connected group whose buttons show a label and a small count badge. Sample numbers.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='bg-white p-10'><span class='inline-flex overflow-hidden rounded-lg border border-neutral-300 text-sm'><button type='button' class='flex items-center gap-2 bg-black px-4 py-2 font-medium text-white'>All <span class='rounded-full bg-white px-2 text-xs text-black'>240</span></button><button type='button' class='flex items-center gap-2 border-l border-neutral-300 px-4 py-2 text-neutral-700 hover:bg-neutral-50'>Light <span class='rounded-full bg-neutral-100 px-2 text-xs'>180</span></button><button type='button' class='flex items-center gap-2 border-l border-neutral-300 px-4 py-2 text-neutral-700 hover:bg-neutral-50'>Dark <span class='rounded-full bg-neutral-100 px-2 text-xs'>60</span></button></span></div>

Button Groups 06 · Separate pill toggles

A row of separate pill-shaped toggle buttons with small gaps; two are selected.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='bg-white p-10'><div class='flex flex-wrap gap-2'><button type='button' class='rounded-full bg-black px-4 py-1.5 text-sm font-medium text-white'>Hero</button><button type='button' class='rounded-full border border-neutral-300 px-4 py-1.5 text-sm font-medium text-neutral-700 hover:bg-neutral-50'>Pricing</button><button type='button' class='rounded-full bg-black px-4 py-1.5 text-sm font-medium text-white'>Footer</button><button type='button' class='rounded-full border border-neutral-300 px-4 py-1.5 text-sm font-medium text-neutral-700 hover:bg-neutral-50'>Blog</button></div></div>

Button Groups 05 · Pagination

Previous, numbered pages and Next as one connected group with the current page in black.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='bg-white p-10'><nav class='inline-flex overflow-hidden rounded-lg border border-neutral-300 text-sm' aria-label='Pagination'><a href='#' class='px-4 py-2 text-neutral-500 hover:bg-neutral-50'>Previous</a><a href='#' class='border-l border-neutral-300 px-4 py-2 text-neutral-700 hover:bg-neutral-50'>1</a><a href='#' class='border-l border-neutral-300 bg-black px-4 py-2 font-medium text-white'>2</a><a href='#' class='border-l border-neutral-300 px-4 py-2 text-neutral-700 hover:bg-neutral-50'>3</a><a href='#' class='border-l border-neutral-300 px-4 py-2 text-neutral-700 hover:bg-neutral-50'>Next</a></nav></div>

Button Groups 04 · Dark segmented

A segmented control on a black background with a white selected segment.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='bg-black p-10'><span class='inline-flex rounded-lg bg-neutral-900 p-1'><button type='button' class='rounded-md px-4 py-1.5 text-sm font-medium text-neutral-400'>Design</button><button type='button' class='rounded-md bg-white px-4 py-1.5 text-sm font-semibold text-black'>Code</button><button type='button' class='rounded-md px-4 py-1.5 text-sm font-medium text-neutral-400'>Preview</button></span></div>

Button Groups 03 · Split button

A black main button joined to a smaller chevron button for more options.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='bg-white p-10'><span class='inline-flex overflow-hidden rounded-lg'><button type='button' class='bg-black px-5 py-2.5 text-sm font-semibold text-white hover:bg-neutral-800'>Publish</button><button type='button' class='border-l border-neutral-700 bg-black px-3 py-2.5 text-white hover:bg-neutral-800' aria-label='More options'>⌄</button></span></div>

Button Groups 02 · Icon buttons

Three icon-only buttons joined together for text alignment; the first is selected.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='bg-white p-10'><span class='inline-flex overflow-hidden rounded-lg border border-neutral-300'><button type='button' class='bg-neutral-100 px-3.5 py-2 text-black' aria-label='Align left'>☰</button><button type='button' class='border-x border-neutral-300 px-3.5 py-2 text-neutral-600 hover:bg-neutral-50' aria-label='Align center'>≡</button><button type='button' class='px-3.5 py-2 text-neutral-600 hover:bg-neutral-50' aria-label='Align right'>☰</button></span></div>

Button Groups 01 · Segmented three

Three connected buttons sharing borders; the middle one is selected in black.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <div class='bg-white p-10'><span class='inline-flex overflow-hidden rounded-lg border border-neutral-300'><button type='button' class='bg-white px-4 py-2 text-sm font-medium text-neutral-700 hover:bg-neutral-50'>Day</button><button type='button' class='border-x border-neutral-300 bg-black px-4 py-2 text-sm font-medium text-white'>Week</button><button type='button' class='bg-white px-4 py-2 text-sm font-medium text-neutral-700 hover:bg-neutral-50'>Month</button></span></div>