ActionsGenerated from the public API

ButtonGroup

Grouped actions behind one joint, and the toolbar shell that gives a strip one tab stop.

@luc/ui

Examples

A joined row

The group is geometry and one joint: neighbouring borders collapse, the inner corners square, and every child keeps its own variant.

<ButtonGroup aria-label="Time frame">
  <Button variant="secondary">Day</Button>
  <Button variant="secondary">Week</Button>
  <Button variant="secondary">Month</Button>
</ButtonGroup>

Stacked vertically

`vertical` moves the joint to the horizontal edges: the borders collapse upward and the outer corners stay round.

<ButtonGroup vertical aria-label="Chart range">
  <Button variant="outline">1 month</Button>
  <Button variant="outline">6 months</Button>
  <Button variant="outline">1 year</Button>
</ButtonGroup>

A change of intent

`ButtonGroupSeparator` says there are two intents here rather than two options; the menu trigger is a real button with its own name, so the row keeps one tab stop per action.

<ButtonGroup>
  <Button variant="primary">Save</Button>
  <ButtonGroupSeparator />
  <DropdownMenu>
    <DropdownMenuTrigger asChild>
      <Button variant="primary" aria-label="More save options">
        <RiArrowDownSLine />
      </Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent align="end">
      <DropdownMenuItem>Save as draft</DropdownMenuItem>
      <DropdownMenuItem>Save and publish</DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</ButtonGroup>

Toolbar: one tab stop

`Toolbar` is the keyboard contract rather than a wrapper: one tab stop for the strip, arrow keys between the controls, Home and End to the ends, and a `label` the type requires because an unnamed toolbar is a defect. The parts are the Radix primitives re-exported as they are, so a strip brings its own layout and skin; `toggleVariants` is the LUC skin, but it ships in a client module, which is why a server-rendered strip spells the classes out.

<Toolbar label="Chart formatting">
  <ToolbarToggleGroup
    type="multiple"
    defaultValue={["bold"]}
    aria-label="Text style"
    className="flex items-center gap-1"
  >
    <ToolbarToggleItem
      value="bold"
      aria-label="Bold"
      className="grid size-8 place-items-center rounded-sm hover:bg-surface-interactive-hover data-[state=on]:bg-surface-selected"
    >
      <RiBold />
    </ToolbarToggleItem>
  </ToolbarToggleGroup>
  <ToolbarSeparator />
  <ToolbarButton
    aria-label="Series settings"
    className="grid size-8 place-items-center rounded-sm hover:bg-surface-interactive-hover"
  >
    <RiSettings3Line />
  </ToolbarButton>
</Toolbar>

Usage

import { ButtonGroup } from "@luc/ui";

<ButtonGroup>
  <Button variant="secondary">Day</Button>
  <Button variant="secondary">Week</Button>
</ButtonGroup>

Package setup — peer requirements, the stylesheet and the provider — is on installation.

API

Read from the published TypeScript API, so a prop that is not listed here does not exist and a default that is listed is the one the compiler sees.

ButtonGroup, ButtonGroupSeparator and the Toolbar primitives are exports of one module, so both families are documented here: grouping is geometry, and Toolbar is the keyboard contract on top of it.

Exported symbols
Export	Kind	Signature
`ButtonGroup`	2 documented props	`({ className, vertical, ...props }: ButtonGroupProps) => import("@types/react").JSX.Element`
`ButtonGroupSeparator`	export	`({ className, ...props }: React.ComponentPropsWithRef<"span">) => import("@types/react").JSX.Element`
`Toolbar`	5 documented props	`({ className, label, ...props }: ToolbarProps & { label: string; }) => import("@types/react").JSX.Element`
`ToolbarButton`	1 documented props	`import("@types/react").ForwardRefExoticComponent<RadixToolbar.ToolbarButtonProps & import("@types/react").RefAttributes<HTMLButtonElement>>`
`ToolbarLink`	1 documented props	`import("@types/react").ForwardRefExoticComponent<RadixToolbar.ToolbarLinkProps & import("@types/react").RefAttributes<HTMLAnchorElement>>`
`ToolbarSeparator`	3 documented props	`import("@types/react").ForwardRefExoticComponent<RadixToolbar.ToolbarSeparatorProps & import("@types/react").RefAttributes<HTMLDivElement>>`
`ToolbarToggleGroup`	10 documented props	`import("@types/react").ForwardRefExoticComponent<(RadixToolbar.ToolbarToggleGroupSingleProps \| RadixToolbar.ToolbarToggleGroupMultipleProps) & import("@types/react").RefAttributes<HTMLDivElement>>`
`ToolbarToggleItem`	2 documented props	`import("@types/react").ForwardRefExoticComponent<RadixToolbar.ToolbarToggleItemProps & import("@types/react").RefAttributes<HTMLButtonElement>>`