ButtonGroup

Installation

npm install @radix-ui/react-separator@^1.1.8 @radix-ui/react-slot@^1.2.4 class-variance-authority@^0.7.1 clsx@^2.1.1 tailwind-merge@^3.4.0

components/separator/index.ts
components/separator/separator.tsx
lib/utils.ts
components/button-group/button-group-context.ts
components/button-group/button-group.tsx
components/button-group/index.ts

The code below also uses:

npm install @tabler/icons-react@^3.36.1

components/spinner/index.ts
components/spinner/spinner.tsx
lib/icons.ts
components/button/button.tsx
components/button/index.ts

Code

'use client';

import { Button } from '@/components/button/button';
import { ButtonGroup } from '@/components/button-group/button-group';

export default function ButtonGroupDemo() {
  return (
    <ButtonGroup>
      <Button variant="outline">Day</Button>
      <Button variant="outline">Week</Button>
      <Button variant="outline">Month</Button>
    </ButtonGroup>
  );
}

Props

ButtonGroup

ButtonGroup props
Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical" \| null`	`"horizontal"`	No description
`size`	`ButtonGroupSize`	`"default"`	Size shared with ButtonGroupText and any Button member that doesn't set its own size. Inherited through context, so a Button nested inside a trigger wrapper (a split button) picks it up too.

ButtonGroupSeparator

ButtonGroupSeparator adds no props of its own; it accepts the props of the element or primitive it wraps.

ButtonGroupText

ButtonGroupText props
Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render as the child element via Radix Slot, keeping the addon styling.
`size`	`ButtonGroupSize`	`"default"`	Addon size. Inherits from ButtonGroup when omitted.

Examples

Sizes

Small

Default

Large

'use client';

import { Button } from '@/components/button/button';
import {
  ButtonGroup,
  ButtonGroupText,
} from '@/components/button-group/button-group';

export default function ButtonGroupSizes() {
  return (
    <div className="nx:flex nx:flex-col nx:items-start nx:gap-4">
      <ButtonGroup size="sm">
        <ButtonGroupText>Small</ButtonGroupText>
        <Button variant="outline">Day</Button>
        <Button variant="outline">Week</Button>
      </ButtonGroup>
      <ButtonGroup size="default">
        <ButtonGroupText>Default</ButtonGroupText>
        <Button variant="outline">Day</Button>
        <Button variant="outline">Week</Button>
      </ButtonGroup>
      <ButtonGroup size="lg">
        <ButtonGroupText>Large</ButtonGroupText>
        <Button variant="outline">Day</Button>
        <Button variant="outline">Week</Button>
      </ButtonGroup>
    </div>
  );
}

Vertical

'use client';

import { Button } from '@/components/button/button';
import { ButtonGroup } from '@/components/button-group/button-group';

export default function ButtonGroupVertical() {
  return (
    <ButtonGroup orientation="vertical" size="sm">
      <Button variant="outline">Top</Button>
      <Button variant="outline">Middle</Button>
      <Button variant="outline">Bottom</Button>
    </ButtonGroup>
  );
}

With text

https://

'use client';

import { Button } from '@/components/button/button';
import {
  ButtonGroup,
  ButtonGroupText,
} from '@/components/button-group/button-group';

export default function ButtonGroupWithText() {
  return (
    <ButtonGroup>
      <ButtonGroupText>https://</ButtonGroupText>
      <Button variant="outline">nexus.dev</Button>
    </ButtonGroup>
  );
}

With separator

'use client';

import {
  IconBold,
  IconItalic,
  IconLink,
  IconUnderline,
} from '@tabler/icons-react';

import { Button } from '@/components/button/button';
import {
  ButtonGroup,
  ButtonGroupSeparator,
} from '@/components/button-group/button-group';

export default function ButtonGroupWithSeparator() {
  return (
    <ButtonGroup>
      <Button variant="ghost" size="icon" aria-label="Bold">
        <IconBold />
      </Button>
      <Button variant="ghost" size="icon" aria-label="Italic">
        <IconItalic />
      </Button>
      <Button variant="ghost" size="icon" aria-label="Underline">
        <IconUnderline />
      </Button>
      <ButtonGroupSeparator />
      <Button variant="ghost" size="icon" aria-label="Add link">
        <IconLink />
      </Button>
    </ButtonGroup>
  );
}