Gruppo di pulsanti

Unisce pulsanti divisi, barre degli strumenti e componenti aggiuntivi di input in un’unica unità incorniciata: un bordo spesso, un’ombra marcata, un unico comando.

"use client"

import * as React from "react"

Il button group fonde pulsanti, input ed etichette adiacenti in un unico controllo segmentato. Non c’è nessuna primitiva sotto — un semplice contenitore role="group" possiede la cornice neobrutalista (un solo bordo spesso, una sola ombra netta, una sola animazione di pressione condivisa); solo ButtonGroupSeparator ricorre a una primitiva, avvolgendo Separator.

Quando usarlo:

Split button — un’azione principale più un DropdownMenu di alternative: Salva / Salva con nome…, Merge / Squash.
Paginatori e toolbar — Precedente/Successivo, zoom avanti/indietro, selettori di vista raccolti in un’unica cornice.
Estensioni degli input — un campo di ricerca con il suo pulsante di invio, un’etichetta con il prefisso dell’URL, un pulsante di copia in coda.

Installazione


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/button-group.json
npx shadcn@latest add https://neobrutalism.com/r/base/button-group.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/button-group.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/button-group.json

Installa le seguenti dipendenze:


pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

Copia e incolla il seguente codice nel tuo progetto.

components/ui/button-group.tsx

import { cva, type VariantProps } from "class-variance-authority"
import { Slot } from "radix-ui"

import { cn } from "@/lib/utils"
import { Separator } from "@/components/ui/separator"

const buttonGroupVariants = cva(
  cn(
    // The GROUP itself is the cohesive NeoBrutalist unit: a single bold border +
    // one hard offset shadow wrapping every segment, so it reads as ONE unit.
    // The frame animates so the whole group can press like a single Button.
    "relative inline-flex w-fit items-stretch border-2 border-foreground bg-background shadow-md transition-all duration-200",
    // Segments become flush fills — the frame owns the border, shadow and corners.
    "[&>*]:rounded-none",
    "[&>:is(button,a)]:border-0 [&>:is(button,a)]:shadow-none!",
    // Segments never translate on their own — only the whole frame moves.
    "[&>:is(button,a)]:hover:translate-y-0! [&>:is(button,a)]:active:translate-x-0! [&>:is(button,a)]:active:translate-y-0!",
    // The WHOLE group presses into its shadow like a single Button: hover sinks it
    // toward the shadow, press sits it flush (shadow gone).
    "has-[:is(button,a):hover]:translate-y-1 has-[:is(button,a):hover]:shadow",
    "has-[:is(button,a):active]:translate-y-2 has-[:is(button,a):active]:translate-x-1 has-[:is(button,a):active]:shadow-none",
    // When a group CONTAINS nested groups it becomes a plain gapped container
    // (no frame / shadow / press) so each nested sub-group is its own pressable
    // unit instead of pressing the whole outer frame.
    "has-[>[data-slot=button-group]]:gap-2 has-[>[data-slot=button-group]]:border-0 has-[>[data-slot=button-group]]:bg-transparent has-[>[data-slot=button-group]]:shadow-none! has-[>[data-slot=button-group]]:translate-x-0! has-[>[data-slot=button-group]]:translate-y-0!",
    // The hovered/pressed segment darkens in place via a full-bleed inset tint, so
    // you can still tell which segment you're acting on while the frame presses.
    "[&>:is(button,a):hover]:shadow-[inset_0_0_0_999px_#00000012]! [&>:is(button,a):active]:shadow-[inset_0_0_0_999px_#0000001f]!",

    "dark:[&>:is(button,a):hover]:shadow-[inset_0_0_0_999px_#ffffff1f]! dark:[&>:is(button,a):active]:shadow-[inset_0_0_0_999px_#ffffff33]!",
    // Solid dark segments (secondary) always lighten on hover — a dark tint would
    // be invisible on a black button in light mode.
    "[&>:is(button,a)[data-variant=secondary]:hover]:shadow-[inset_0_0_0_999px_#ffffff2b]! [&>:is(button,a)[data-variant=secondary]:active]:shadow-[inset_0_0_0_999px_#ffffff45]!",
    "[&>:is(button,a):focus-visible]:relative [&>:is(button,a):focus-visible]:z-10"
  ),
  {
    variants: {
      orientation: {
        // A single crisp seam between segments (logical side, so RTL-correct).
        horizontal:
          "flex-row [&>*:not(:first-child)]:border-s-2! [&>*:not(:first-child)]:border-foreground",
        vertical:
          "flex-col [&>*:not(:first-child)]:border-t-2! [&>*:not(:first-child)]:border-foreground",
      },
    },
    defaultVariants: {
      orientation: "horizontal",
    },
  }
)

function ButtonGroup({
  className,
  orientation,
  ...props
}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
  return (
    <div
      role="group"
      data-slot="button-group"
      data-orientation={orientation ?? "horizontal"}
      className={cn(buttonGroupVariants({ orientation }), className)}
      {...props}
    />
  )
}

function ButtonGroupText({
  className,
  asChild = false,
  ...props
}: React.ComponentProps<"div"> & {
  asChild?: boolean
}) {
  const Comp = asChild ? Slot.Root : "div"

  return (
    <Comp
      data-slot="button-group-text"
      className={cn(
        "inline-flex items-center gap-2 bg-muted px-3 font-head text-sm font-medium text-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
        className
      )}
      {...props}
    />
  )
}

function ButtonGroupSeparator({
  className,
  orientation = "vertical",
  ...props
}: React.ComponentProps<typeof Separator>) {
  return (
    <Separator
      data-slot="button-group-separator"
      orientation={orientation}
      className={cn(
        "relative z-10 self-stretch bg-border data-horizontal:h-0.5 data-horizontal:w-auto data-vertical:h-auto data-vertical:w-0.5",
        className
      )}
      {...props}
    />
  )
}

export {
  ButtonGroup,
  ButtonGroupSeparator,
  ButtonGroupText,
  buttonGroupVariants,
}

Aggiorna i percorsi di import in base alla struttura del tuo progetto.

Utilizzo

import {
  ButtonGroup,
  ButtonGroupSeparator,
  ButtonGroupText,
} from "@/components/ui/button-group"

<ButtonGroup>
  <Button>Button 1</Button>
  <Button>Button 2</Button>
</ButtonGroup>

Composizione

Usa la seguente composizione per costruire un ButtonGroup:

ButtonGroup
├── Button or Input
├── ButtonGroupSeparator
└── ButtonGroupText

ButtonGroup vs ToggleGroup

Usa il componente ButtonGroup quando vuoi raggruppare pulsanti che eseguono un'azione.
Usa il componente ToggleGroup quando vuoi raggruppare pulsanti che commutano uno stato.

Esempi

Orientamento

Imposta la prop orientation per cambiare la disposizione del gruppo di pulsanti.

import { MinusIcon, PlusIcon } from "lucide-react"

import { Button } from "@/components/ui/button"

Dimensione

Controlla la dimensione dei pulsanti con la prop size sui singoli pulsanti.

import { PlusIcon } from "lucide-react"

import { Button } from "@/components/ui/button"

Annidati

Annida i componenti <ButtonGroup> per creare gruppi di pulsanti con spaziatura.

import { AudioLinesIcon, PlusIcon } from "lucide-react"

import { Button } from "@/components/ui/button"

Separatore

Il componente ButtonGroupSeparator divide visivamente i pulsanti all'interno di un gruppo.

I pulsanti con la variante outline non hanno bisogno di un separatore perché hanno già un bordo. Per le altre varianti, un separatore è consigliato per migliorare la gerarchia visiva.

import { Button } from "@/components/ui/button"
import {
  ButtonGroup,

Diviso

Crea un gruppo di pulsanti diviso aggiungendo due pulsanti separati da un ButtonGroupSeparator.

import { IconPlus } from "@tabler/icons-react"

import { Button } from "@/components/ui/button"

Input

Avvolgi un componente Input con dei pulsanti.

import { SearchIcon } from "lucide-react"

import { Button } from "@/components/ui/button"

Input Group

Avvolgi un componente InputGroup per creare layout di input complessi.

"use client"

import * as React from "react"

Crea un gruppo di pulsanti diviso con un componente DropdownMenu.

"use client"

import {

Select

Abbinalo a un componente Select.

"use client"

import * as React from "react"

Usalo con un componente Popover.

import { BotIcon, ChevronDownIcon } from "lucide-react"

import { Button } from "@/components/ui/button"

RTL

Per abilitare il supporto RTL in Neobrutalism, consulta la guida alla configurazione RTL.

"use client"

import * as React from "react"

Accessibilità

ButtonGroup rende role="group", che dice alle tecnologie assistive che i pulsanti appartengono allo stesso insieme senza cambiare il comportamento da tastiera — ogni pulsante conserva il proprio tab stop e l’attivazione nativa con Enter / Space. Dai un nome al gruppo con aria-label o aria-labelledby così gli screen reader ne annunciano il contesto:

<ButtonGroup aria-label="Pagination">
  <Button>Previous</Button>
  <Button>Next</Button>
</ButtonGroup>

ButtonGroupSeparator avvolge il Separator di Base UI, che viene reso con role="separator" e la aria-orientation corrispondente — annunciato come divisore, mai focalizzabile. Se ti serve un unico tab stop con la navigazione tra i pulsanti affidata alle frecce, quello è il pattern WAI-ARIA Toolbar — questo componente mantiene di proposito il semplice ordine di tabulazione.

Riferimento API

ButtonGroup

Il componente ButtonGroup è un contenitore che raggruppa pulsanti correlati con uno stile coerente.

Prop	Type	Default
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`

<ButtonGroup>
  <Button>Button 1</Button>
  <Button>Button 2</Button>
</ButtonGroup>

Annida più gruppi di pulsanti per creare layout complessi con spaziatura. Consulta l'esempio annidati per maggiori dettagli.

<ButtonGroup>
  <ButtonGroup />
  <ButtonGroup />
</ButtonGroup>

ButtonGroupSeparator

Il componente ButtonGroupSeparator divide visivamente i pulsanti all'interno di un gruppo.

Prop	Type	Default
`orientation`	`"horizontal" \| "vertical"`	`"vertical"`

<ButtonGroup>
  <Button>Button 1</Button>
  <ButtonGroupSeparator />
  <Button>Button 2</Button>
</ButtonGroup>

ButtonGroupText

Usa questo componente per mostrare testo all'interno di un gruppo di pulsanti.

Prop	Type	Default
`asChild`	`boolean`	`false`

<ButtonGroup>
  <ButtonGroupText>Text</ButtonGroupText>
  <Button>Button</Button>
</ButtonGroup>

Usa la prop asChild per rendere un componente personalizzato come testo, per esempio una label.

import { ButtonGroupText } from "@/components/ui/button-group"
import { Label } from "@/components/ui/label"
 
export function ButtonGroupTextDemo() {
  return (
    <ButtonGroup>
      <ButtonGroupText asChild>
        <Label htmlFor="name">Text</Label>
      </ButtonGroupText>
      <Input placeholder="Type something here..." id="name" />
    </ButtonGroup>
  )
}