Grupo de botões

O Fuses reúne botões, barras de ferramentas e complementos de entrada em uma única unidade emoldurada — uma borda grossa, uma sombra forte, um clique compartilhado.

"use client"

import * as React from "react"

O button group funde botões, inputs e rótulos adjacentes em um único controle segmentado. Não há primitivo por baixo — um contêiner simples com role="group" é dono da moldura neobrutalista (uma borda grossa, uma sombra dura, uma animação de pressionar compartilhada); só o ButtonGroupSeparator recorre a um primitivo, envolvendo o Separator.

Use quando:

Split buttons — uma ação principal mais um DropdownMenu de alternativas: Salvar / Salvar como…, Merge / Squash.
Paginadores e barras de ferramentas — Anterior/Próximo, aproximar/afastar, alternadores de visualização reunidos em uma moldura só.
Complementos de input — um campo de busca com seu botão de enviar, um rótulo de prefixo de URL, um botão de copiar como sufixo.

Instalação


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

Instale as seguintes dependências:


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

Copie e cole o código a seguir no seu projeto.

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,
}

Atualize os caminhos de importação para corresponder à estrutura do seu projeto.

Uso

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

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

Composição

Use a seguinte composição para construir um ButtonGroup:

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

ButtonGroup vs ToggleGroup

Use o componente ButtonGroup quando quiser agrupar botões que executam uma ação.
Use o componente ToggleGroup quando quiser agrupar botões que alternam um estado.

Exemplos

Orientação

Defina a prop orientation para alterar a disposição do grupo de botões.

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

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

Tamanho

Controle o tamanho dos botões com a prop size em cada botão.

import { PlusIcon } from "lucide-react"

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

Aninhados

Aninhe componentes <ButtonGroup> para criar grupos de botões com espaçamento.

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

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

Separador

O componente ButtonGroupSeparator divide visualmente os botões dentro de um grupo.

Botões com a variante outline não precisam de separador porque já têm uma borda. Para as demais variantes, recomenda-se um separador para melhorar a hierarquia visual.

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

Dividido

Crie um grupo de botões dividido adicionando dois botões separados por um ButtonGroupSeparator.

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

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

Input

Envolva um componente Input com botões.

import { SearchIcon } from "lucide-react"

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

Input Group

Envolva um componente InputGroup para criar layouts de entrada complexos.

"use client"

import * as React from "react"

Crie um grupo de botões dividido com um componente DropdownMenu.

"use client"

import {

Select

Combine com um componente Select.

"use client"

import * as React from "react"

Use com um componente Popover.

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

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

RTL

Para ativar o suporte a RTL no Neobrutalism, consulte o guia de configuração de RTL.

"use client"

import * as React from "react"

Acessibilidade

ButtonGroup renderiza role="group", o que avisa à tecnologia assistiva que os botões formam um conjunto sem mudar o comportamento de teclado — cada botão mantém sua própria parada de tabulação e a ativação nativa por Enter / Space. Nomeie o grupo com aria-label ou aria-labelledby para que os leitores de tela anunciem o contexto:

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

ButtonGroupSeparator envolve o Separator do Base UI, que renderiza role="separator" com o aria-orientation correspondente — anunciado como divisor, nunca focável. Se você precisa de uma única parada de tabulação com navegação por setas entre os botões, isso é o padrão Toolbar do WAI-ARIA — este componente mantém de propósito a ordem simples de tabulação.

Referência da API

ButtonGroup

O componente ButtonGroup é um contêiner que agrupa botões relacionados com um estilo consistente.

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

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

Aninhe vários grupos de botões para criar layouts complexos com espaçamento. Consulte o exemplo aninhados para mais detalhes.

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

ButtonGroupSeparator

O componente ButtonGroupSeparator divide visualmente os botões dentro de um grupo.

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

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

ButtonGroupText

Use este componente para exibir texto dentro de um grupo de botões.

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

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

Use a prop asChild para renderizar um componente personalizado como texto, por exemplo um 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>
  )
}