2b:I[97408,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"StageProvider"] 2c:I[60401,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"DetailTabs"] 2d:T1190,"use client"; import { Slot } from "radix-ui"; import { createContext, useContext, type ComponentProps } from "react"; import { cn } from "@/lib/utils"; const VARIANTS = { outline: "bg-white text-neutral-800 shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-inset ring-black/[0.1] hover:bg-neutral-50 dark:bg-transparent dark:text-neutral-200 dark:shadow-none dark:ring-white/[0.14] dark:hover:bg-white/[0.06]", secondary: "bg-neutral-100 text-neutral-900 hover:bg-neutral-200/80 dark:bg-white/[0.08] dark:text-white dark:hover:bg-white/[0.12]", primary: "bg-neutral-950 text-white hover:bg-neutral-800 dark:bg-white dark:text-neutral-950 dark:hover:bg-neutral-200", } as const; const SIZES = { sm: "h-8 gap-1.5 rounded-[10px] px-3 text-[13px] [&_svg]:size-3.5", md: "h-10 gap-2 rounded-[14px] px-4 text-sm [&_svg]:size-4", "icon-sm": "size-8 rounded-[10px] [&_svg]:size-3.5", icon: "size-10 rounded-[14px] [&_svg]:size-4", } as const; const SEPARATOR = { outline: "bg-black/[0.1] dark:bg-white/[0.14]", secondary: "bg-black/[0.08] dark:bg-white/[0.1]", primary: "bg-white/20 dark:bg-black/15", } as const; const TEXT = { outline: "ring-1 ring-inset ring-black/[0.1] dark:ring-white/[0.14]", secondary: "bg-neutral-100 dark:bg-white/[0.08]", primary: "bg-neutral-950 text-white/80 dark:bg-white dark:text-neutral-950/70", } as const; export type ButtonGroupVariant = keyof typeof VARIANTS; export type ButtonGroupSize = keyof typeof SIZES; const GroupContext = createContext<{ variant: ButtonGroupVariant; size: ButtonGroupSize }>({ variant: "outline", size: "md" }); export interface ButtonGroupProps extends ComponentProps<"div"> { variant?: ButtonGroupVariant; size?: ButtonGroupSize; orientation?: "horizontal" | "vertical"; } /** Attaches its buttons into one control: inner corners go square and outlines overlap. */ export function ButtonGroup({ variant = "outline", size = "md", orientation = "horizontal", className, ...props }: ButtonGroupProps) { return (

*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:rounded-r-none data-[variant=outline]:[&>*:not(:first-child)]:-ml-px" : "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none data-[variant=outline]:[&>*:not(:first-child)]:-mt-px", className, )} {...props} /> ); } export interface ButtonGroupItemProps extends ComponentProps<"button"> { variant?: ButtonGroupVariant; size?: ButtonGroupSize; asChild?: boolean; } export function ButtonGroupItem({ variant, size, asChild = false, className, type, ...props }: ButtonGroupItemProps) { const group = useContext(GroupContext); const Comp = asChild ? Slot.Root : "button"; return ( ); } /** A hairline between filled items; outline groups don't need one. */ export function ButtonGroupSeparator({ className, ...props }: ComponentProps<"div">) { const group = useContext(GroupContext); return

; } /** Non-interactive text inside a group, e.g. a zoom level or a page count. */ export function ButtonGroupText({ className, ...props }: ComponentProps<"span">) { const group = useContext(GroupContext); return ( ); } export default ButtonGroup; 2e:T857a,

"use client";

import { Slot } from "radix-ui";
import { createContext, useContext, type ComponentProps } from "react";
import { cn } from "@/lib/utils";

const VARIANTS = {
  outline:
    "bg-white text-neutral-800 shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-inset ring-black/[0.1] hover:bg-neutral-50 dark:bg-transparent dark:text-neutral-200 dark:shadow-none dark:ring-white/[0.14] dark:hover:bg-white/[0.06]",
  secondary: "bg-neutral-100 text-neutral-900 hover:bg-neutral-200/80 dark:bg-white/[0.08] dark:text-white dark:hover:bg-white/[0.12]",
  primary:
    "bg-neutral-950 text-white hover:bg-neutral-800 dark:bg-white dark:text-neutral-950 dark:hover:bg-neutral-200",
} as const;

const SIZES = {
  sm: "h-8 gap-1.5 rounded-[10px] px-3 text-[13px] [&_svg]:size-3.5",
  md: "h-10 gap-2 rounded-[14px] px-4 text-sm [&_svg]:size-4",
  "icon-sm": "size-8 rounded-[10px] [&_svg]:size-3.5",
  icon: "size-10 rounded-[14px] [&_svg]:size-4",
} as const;

const SEPARATOR = {
  outline: "bg-black/[0.1] dark:bg-white/[0.14]",
  secondary: "bg-black/[0.08] dark:bg-white/[0.1]",
  primary: "bg-white/20 dark:bg-black/15",
} as const;

const TEXT = {
  outline: "ring-1 ring-inset ring-black/[0.1] dark:ring-white/[0.14]",
  secondary: "bg-neutral-100 dark:bg-white/[0.08]",
  primary: "bg-neutral-950 text-white/80 dark:bg-white dark:text-neutral-950/70",
} as const;

export type ButtonGroupVariant = keyof typeof VARIANTS;
export type ButtonGroupSize = keyof typeof SIZES;

const GroupContext = createContext<{ variant: ButtonGroupVariant; size: ButtonGroupSize }>({ variant: "outline", size: "md" });

export interface ButtonGroupProps extends ComponentProps<"div"> {
  variant?: ButtonGroupVariant;
  size?: ButtonGroupSize;
  orientation?: "horizontal" | "vertical";
}

/** Attaches its buttons into one control: inner corners go square and outlines overlap. */
export function ButtonGroup({ variant = "outline", size = "md", orientation = "horizontal", className, ...props }: ButtonGroupProps) {
  return (
    <GroupContext.Provider value={{ variant, size }}>
      <div
        role="group"
        data-orientation={orientation}
        data-variant={variant}
        className={cn(
          "isolate inline-flex w-fit items-stretch",
          orientation === "horizontal"
            ? "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:rounded-r-none data-[variant=outline]:[&>*:not(:first-child)]:-ml-px"
            : "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none data-[variant=outline]:[&>*:not(:first-child)]:-mt-px",
          className,
        )}
        {...props}
      />
    </GroupContext.Provider>
  );
}

export interface ButtonGroupItemProps extends ComponentProps<"button"> {
  variant?: ButtonGroupVariant;
  size?: ButtonGroupSize;
  asChild?: boolean;
}

export function ButtonGroupItem({ variant, size, asChild = false, className, type, ...props }: ButtonGroupItemProps) {
  const group = useContext(GroupContext);
  const Comp = asChild ? Slot.Root : "button";
  return (
    <Comp
      type={asChild ? type : (type ?? "button")}
      className={cn(
        "relative inline-flex shrink-0 select-none items-center justify-center whitespace-nowrap font-medium tracking-[-0.01em] outline-none",
        "transition-[background-color,color] duration-150 hover:z-10 focus-visible:z-10 focus-visible:bg-neutral-100 dark:focus-visible:bg-white/[0.1]",
        "disabled:pointer-events-none disabled:opacity-50 [&_svg]:shrink-0",
        VARIANTS[variant ?? group.variant],
        SIZES[size ?? group.size],
        className,
      )}
      {...props}
    />
  );
}

/** A hairline between filled items; outline groups don't need one. */
export function ButtonGroupSeparator({ className, ...props }: ComponentProps<"div">) {
  const group = useContext(GroupContext);
  return <div aria-hidden className={cn("w-px shrink-0 self-stretch rounded-none", SEPARATOR[group.variant], className)} {...props} />;
}

/** Non-interactive text inside a group, e.g. a zoom level or a page count. */
export function ButtonGroupText({ className, ...props }: ComponentProps<"span">) {
  const group = useContext(GroupContext);
  return (
    <span
      className={cn(
        "inline-flex shrink-0 items-center justify-center px-3 text-[13px] font-medium tabular-nums text-neutral-600 dark:text-neutral-300",
        TEXT[group.variant],
        className,
      )}
      {...props}
    />
  );
}

export default ButtonGroup;

2f:T13ec,

import { Archive, Clock, Flag } from "lucide-react";
import { ButtonGroup, ButtonGroupItem } from "@/components/scalar-ui/button-group";

export default function Demo() {
  return (
    <ButtonGroup aria-label="Message actions">
      <ButtonGroupItem>
        <Archive />
        Archive
      </ButtonGroupItem>
      <ButtonGroupItem>
        <Flag />
        Report
      </ButtonGroupItem>
      <ButtonGroupItem>
        <Clock />
        Snooze
      </ButtonGroupItem>
    </ButtonGroup>
  );
}

30:Td41,

import { ButtonGroup, ButtonGroupItem } from "@/components/scalar-ui/button-group";

export default function Example() {
  return (
    <ButtonGroup aria-label="Pull request filter">
      <ButtonGroupItem>Open</ButtonGroupItem>
      <ButtonGroupItem>Merged</ButtonGroupItem>
      <ButtonGroupItem>Closed</ButtonGroupItem>
    </ButtonGroup>
  );
}

31:Tc2a,"use client"; import { AnimatePresence, motion } from "motion/react"; import { Check, ChevronDown } from "lucide-react"; import { DropdownMenu } from "radix-ui"; import { useState } from "react"; import { ButtonGroup, ButtonGroupItem, ButtonGroupSeparator } from "@/components/scalar-ui/button-group"; const strategies = [ { id: "merge", label: "Create a merge commit", hint: "All commits are added to the base branch" }, { id: "squash", label: "Squash and merge", hint: "Commits are combined into one" }, { id: "rebase", label: "Rebase and merge", hint: "Commits are replayed onto the base branch" }, ]; export default function Example() { const [open, setOpen] = useState(false); const [strategy, setStrategy] = useState(strategies[1]); return ( {strategy.label} {open && ( {strategies.map((s) => ( setStrategy(s)} className="flex cursor-default gap-2.5 rounded-[10px] px-2.5 py-2 outline-none data-highlighted:bg-neutral-100 dark:data-highlighted:bg-white/[0.08]" > {s.label} {s.hint} ))} )} ); } 32:T6639,

"use client";

import { AnimatePresence, motion } from "motion/react";
import { Check, ChevronDown } from "lucide-react";
import { DropdownMenu } from "radix-ui";
import { useState } from "react";
import { ButtonGroup, ButtonGroupItem, ButtonGroupSeparator } from "@/components/scalar-ui/button-group";

const strategies = [
  { id: "merge", label: "Create a merge commit", hint: "All commits are added to the base branch" },
  { id: "squash", label: "Squash and merge", hint: "Commits are combined into one" },
  { id: "rebase", label: "Rebase and merge", hint: "Commits are replayed onto the base branch" },
];

export default function Example() {
  const [open, setOpen] = useState(false);
  const [strategy, setStrategy] = useState(strategies[1]);
  return (
    <ButtonGroup variant="primary" aria-label="Merge">
      <ButtonGroupItem>{strategy.label}</ButtonGroupItem>
      <ButtonGroupSeparator />
      <DropdownMenu.Root open={open} onOpenChange={setOpen}>
        <DropdownMenu.Trigger asChild>
          <ButtonGroupItem size="icon" aria-label="Choose merge strategy">
            <ChevronDown className="transition-transform duration-200 data-[open=true]:rotate-180" data-open={open} />
          </ButtonGroupItem>
        </DropdownMenu.Trigger>
        <AnimatePresence>
          {open && (
            <DropdownMenu.Portal forceMount>
              <DropdownMenu.Content forceMount asChild align="end" sideOffset={6} collisionPadding={8}>
                <motion.div
                  initial={{ opacity: 0, scale: 0.96, y: -4 }}
                  animate={{ opacity: 1, scale: 1, y: 0 }}
                  exit={{ opacity: 0, scale: 0.98, transition: { duration: 0.12 } }}
                  transition={{ type: "spring", bounce: 0.16, duration: 0.3 }}
                  className="z-50 w-72 origin-(--radix-dropdown-menu-content-transform-origin) rounded-2xl bg-white p-1.5 shadow-[0_12px_32px_-8px_rgb(0_0_0/0.18),0_2px_6px_rgb(0_0_0/0.05)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:ring-white/[0.1]"
                >
                  {strategies.map((s) => (
                    <DropdownMenu.Item
                      key={s.id}
                      onSelect={() => setStrategy(s)}
                      className="flex cursor-default gap-2.5 rounded-[10px] px-2.5 py-2 outline-none data-highlighted:bg-neutral-100 dark:data-highlighted:bg-white/[0.08]"
                    >
                      <Check className={`mt-0.5 size-4 shrink-0 ${s.id === strategy.id ? "text-neutral-950 dark:text-white" : "invisible"}`} />
                      <span>
                        <span className="block text-[13.5px] font-medium text-neutral-950 dark:text-white">{s.label}</span>
                        <span className="block text-[12.5px] text-neutral-500 dark:text-neutral-400">{s.hint}</span>
                      </span>
                    </DropdownMenu.Item>
                  ))}
                </motion.div>
              </DropdownMenu.Content>
            </DropdownMenu.Portal>
          )}
        </AnimatePresence>
      </DropdownMenu.Root>
    </ButtonGroup>
  );
}

33:T1795,

import { Minus, Plus } from "lucide-react";
import { ButtonGroup, ButtonGroupItem, ButtonGroupSeparator, ButtonGroupText } from "@/components/scalar-ui/button-group";

export default function Example() {
  return (
    <ButtonGroup variant="secondary" size="icon-sm" aria-label="Zoom">
      <ButtonGroupItem aria-label="Zoom out">
        <Minus />
      </ButtonGroupItem>
      <ButtonGroupSeparator />
      <ButtonGroupText className="min-w-14">100%</ButtonGroupText>
      <ButtonGroupSeparator />
      <ButtonGroupItem aria-label="Zoom in">
        <Plus />
      </ButtonGroupItem>
    </ButtonGroup>
  );
}

34:T1d6d,

import { Bold, Code, Italic, Link2, Underline } from "lucide-react";
import { ButtonGroup, ButtonGroupItem } from "@/components/scalar-ui/button-group";

export default function Example() {
  return (
    <ButtonGroup size="icon" aria-label="Formatting">
      <ButtonGroupItem aria-label="Bold">
        <Bold />
      </ButtonGroupItem>
      <ButtonGroupItem aria-label="Italic">
        <Italic />
      </ButtonGroupItem>
      <ButtonGroupItem aria-label="Underline">
        <Underline />
      </ButtonGroupItem>
      <ButtonGroupItem aria-label="Code">
        <Code />
      </ButtonGroupItem>
      <ButtonGroupItem aria-label="Link">
        <Link2 />
      </ButtonGroupItem>
    </ButtonGroup>
  );
}

35:T16df,

import { Minus, Plus, LocateFixed } from "lucide-react";
import { ButtonGroup, ButtonGroupItem } from "@/components/scalar-ui/button-group";

export default function Example() {
  return (
    <ButtonGroup orientation="vertical" size="icon" aria-label="Map controls">
      <ButtonGroupItem aria-label="Zoom in">
        <Plus />
      </ButtonGroupItem>
      <ButtonGroupItem aria-label="Zoom out">
        <Minus />
      </ButtonGroupItem>
      <ButtonGroupItem aria-label="My location">
        <LocateFixed />
      </ButtonGroupItem>
    </ButtonGroup>
  );
}

36:T183a,

import { ButtonGroup, ButtonGroupItem } from "@/components/scalar-ui/button-group";

export default function Example() {
  return (
    <div className="flex flex-col items-center gap-4">
      <ButtonGroup size="sm" aria-label="Small">
        <ButtonGroupItem>Day</ButtonGroupItem>
        <ButtonGroupItem>Week</ButtonGroupItem>
        <ButtonGroupItem>Month</ButtonGroupItem>
      </ButtonGroup>
      <ButtonGroup aria-label="Medium">
        <ButtonGroupItem>Day</ButtonGroupItem>
        <ButtonGroupItem>Week</ButtonGroupItem>
        <ButtonGroupItem>Month</ButtonGroupItem>
      </ButtonGroup>
    </div>
  );
}

29:["$","section","button-group",{"id":"button-group","aria-labelledby":"button-group-title","className":"scroll-mt-24","children":[["$","header",null,{"className":"mb-5 flex flex-wrap items-start justify-between gap-4","children":[["$","div",null,{"className":"min-w-0 max-w-2xl","children":[["$","div",null,{"className":"flex flex-wrap items-center gap-2","children":[["$","h2",null,{"id":"button-group-title","className":"sr-only","children":"Button Group"}],false,false]}],false,["$","p",null,{"className":"font-mono text-[11.5px] text-fg-subtle","children":"radix-ui"}]]}],false]}],["$","$L2b",null,{"children":["$","$L2c",null,{"slug":"button-group","gated":{"unlocked":true,"files":[{"name":"button-group.tsx","code":"$2d","html":"$2e"},{"name":"demo.tsx","code":"import { Archive, Clock, Flag } from \"lucide-react\";\nimport { ButtonGroup, ButtonGroupItem } from \"@/components/scalar-ui/button-group\";\n\nexport default function Demo() {\n return (\n \n \n \n Archive\n \n \n \n Report\n \n \n \n Snooze\n \n \n );\n}\n","html":"$2f"}],"examples":{"default":{"name":"default.tsx","code":"import { ButtonGroup, ButtonGroupItem } from \"@/components/scalar-ui/button-group\";\n\nexport default function Example() {\n return (\n \n Open\n Merged\n Closed\n \n );\n}\n","html":"$30"},"split-button":{"name":"split-button.tsx","code":"$31","html":"$32"},"secondary":{"name":"secondary.tsx","code":"import { Minus, Plus } from \"lucide-react\";\nimport { ButtonGroup, ButtonGroupItem, ButtonGroupSeparator, ButtonGroupText } from \"@/components/scalar-ui/button-group\";\n\nexport default function Example() {\n return (\n \n \n \n \n \n 100%\n \n \n \n \n \n );\n}\n","html":"$33"},"icon":{"name":"icon.tsx","code":"import { Bold, Code, Italic, Link2, Underline } from \"lucide-react\";\nimport { ButtonGroup, ButtonGroupItem } from \"@/components/scalar-ui/button-group\";\n\nexport default function Example() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n  );\n}\n","html":"$34"},"vertical":{"name":"vertical.tsx","code":"import { Minus, Plus, LocateFixed } from \"lucide-react\";\nimport { ButtonGroup, ButtonGroupItem } from \"@/components/scalar-ui/button-group\";\n\nexport default function Example() {\n  return (\n    \n      \n        \n      \n      \n        \n      \n      \n        \n      \n    \n  );\n}\n","html":"$35"},"size":{"name":"size.tsx","code":"import { ButtonGroup, ButtonGroupItem } from \"@/components/scalar-ui/button-group\";\n\nexport default function Example() {\n  return (\n    \n      \n        Day\n        Week\n        Month\n      \n      \n        Day\n        Week\n        Month\n      \n    \n  );\n}\n","html":"$36"}},"prompt":"","promptHtml":""},"install":{"cli":"npx scalar-ui add button-group","shadcn":"npx shadcn@latest add https://scalarui.com/r/button-group.json","shadcnConfig":"{\n  \"registries\": {\n    \"@scalar-ui\": {\n      \"url\": \"https://scalarui.com/r/{name}.json\",\n      \"headers\": {\n        \"Authorization\": \"Bearer ${SCALAR_TOKEN}\"\n      }\n    }\n  }\n}","mcpClaude":"claude mcp add scalar-ui \\\n  -e SCALAR_TOKEN=slk_your_token \\\n  -e SCALAR_URL=https://scalarui.com \\\n  -- npx -y @scalardesign/mcp","mcpJson":"{\n  \"mcpServers\": {\n    \"scalar-ui\": {\n      \"command\": \"npx\",\n      \"args\": [\n        \"-y\",\n        \"@scalardesign/mcp\"\n      ],\n      \"env\": {\n        \"SCALAR_TOKEN\": \"slk_your_token\",\n        \"SCALAR_URL\": \"https://scalarui.com\"\n      }\n    }\n  }\n}","npm":"npm install radix-ui","origin":"https://scalarui.com"},"open":true,"prompt":false,"shadcn":false,"preview":"$L37","toolbar":"$L38"}]}],["$L39","$L3a","$L3b","$L3c","$L3d","$L3e"]]}]

Button Groups

Button Groups

Default

Split Button

With Text

Icon

Vertical

Size