Components

Button Group

A flex container that joins adjacent buttons and inputs into a seamless group — collapsing inner border radii and merging shared borders.

example.tsx

Import

tsx

import { AppButtonGroup } from "@/components/primitives/AppButtonGroup"

Examples

Variants

Use any button variant — the group adapts automatically.

example.tsx

Sizes

Control size via the size prop on each button inside the group.

example.tsx

Icon buttons

Use size="icon" for compact icon-only toolbar groups.

example.tsx

Split button

Pair a primary action button with a dropdown trigger to expose secondary options.

example.tsx

Input integration

Any element that accepts className can be placed inside — inputs, buttons, or static spans for prefixes and suffixes.

example.tsx

https://

USD

How it works

AppButtonGroup uses CSS child selectors to automatically:

Remove all border radii from inner children
Restore rounded-l-md on the first child
Restore rounded-r-md on the last child
Remove the right border on all but the last child to avoid double borders

API Reference

AppButtonGroup extends all native <div> HTML attributes.

Prop	Type	Description
className	string	Additional Tailwind classes merged via cn(). Applied after base styles.

Source

src/components/primitives/AppButtonGroup.tsx

import * as React from "react"
import { cn } from "@/lib/utils"

function AppButtonGroup({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={cn(
        "flex [&>*]:rounded-none [&>*:first-child]:rounded-l-md [&>*:last-child]:rounded-r-md [&>*:not(:last-child)]:border-r-0",
        className
      )}
      {...props}
    />
  )
}

export { AppButtonGroup }