nessra uinessra ui

Button Group

Groups related buttons together with consistent styling.

Loading...
import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://nessra-ui.vercel.app/r/button-group.json

Usage

import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
<ButtonGroup>
  <Button variant="outline">Left</Button>
  <Button variant="outline">Center</Button>
  <Button variant="outline">Right</Button>
</ButtonGroup>

Examples

Vertical

Use orientation="vertical" for vertical layouts.

Loading...
import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"

With Icons

Loading...
import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"

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

API Reference

ButtonGroup

PropTypeDefaultDescription
orientation"horizontal" | "vertical""horizontal"Layout direction
classNamestring-Additional CSS classes

ButtonGroupText

A styled text element for displaying static content within button groups.

ButtonGroupSeparator

A visual separator between buttons.