Primitives

Toolbar

Roving-focus toolbar for editor controls and compact actions.

Composition

The preferred shape for composing the installed primitive from its exported parts.

Parts

Exported compound parts from the installed source.

Toolbar

├── ToolbarButton

├── ToolbarLink

├── ToolbarGroup

├── ToolbarSeparator

└── ToolbarInput

The refined source installs this primitive from src/registry/sources/refined/ui/toolbar.tsx. Install it on its own with the command above, or inspect the source below.

Registry command

npx shadcn@latest add http://127.0.0.1:3000/r/refined/toolbar.json

See registry manifest

Raw code

Primary installed primitive source

Toolbar slot

src/registry/sources/refined/ui/toolbar.tsx

"use client";

import { Toolbar as ToolbarPrimitive } from "@base-ui/react/toolbar";

import type { ComponentProps } from "react";

import type {

ToolbarButtonProps,

ToolbarGroupProps,

ToolbarInputProps,

ToolbarLinkProps,

ToolbarProps,

ToolbarSeparatorProps,

} from "@/components/refined-ui/contracts";

import { controlSize } from "@/components/refined-ui/control-variants";

import { cn } from "@/components/refined-ui/lib/cn";

import { skinSlot } from "@/components/refined-ui/skin";

// Base UI Toolbar = roving-tabindex focus group (arrow keys between controls, one Tab stop for strip). Root shares --radius-control + card/border chrome with button bar.

// Button/Link forward Base UI's `render` prop so a consumer composes Menu.Trigger/Tooltip.Trigger/refined-ui Button and Base UI merges roving-focus wiring onto it.

// Separator mirrors ButtonGroupSeparator.

export function Toolbar({ orientation = "horizontal", className, ...props }: ToolbarProps) {

return (

<ToolbarPrimitive.Root

orientation={orientation}

data-ui="agent"

data-slot="toolbar"

className={cn(

"inline-flex gap-1 rounded-[var(--radius-control)] border bg-card/72 p-1 shadow-sm",

orientation === "vertical" ? "flex-col items-stretch" : "items-center",

skinSlot("toolbar", { orientation }),

className,

)}

{...props}

/>

);

}

// `render` picked straight off Base UI primitive so composed trigger (Menu.Trigger/Tooltip.Trigger/refined-ui Button) types/merges as Base UI expects.

type RefinedToolbarButtonProps = ToolbarButtonProps & Pick<ComponentProps<typeof ToolbarPrimitive.Button>, "render">;

export function ToolbarButton({ className, ...props }: RefinedToolbarButtonProps) {

return (

<ToolbarPrimitive.Button

data-ui="agent"

data-slot="toolbar-button"

data-control="true"

data-size="sm"

className={cn(

        "inline-flex shrink-0 items-center rounded-[var(--radius-sm)] font-medium text-muted-foreground outline-none transition-colors select-none hover:bg-foreground/6 hover:text-foreground data-[pressed]:bg-foreground/8 data-[pressed]:text-foreground focus-visible:ring-2 focus-visible:ring-foreground/20 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",

controlSize({ size: "sm" }),

"px-2",

skinSlot("toolbar-button", {}),

className,

)}

{...props}

/>

);

}

type RefinedToolbarLinkProps = ToolbarLinkProps & Pick<ComponentProps<typeof ToolbarPrimitive.Link>, "render">;

export function ToolbarLink({ className, ...props }: RefinedToolbarLinkProps) {

return (

<ToolbarPrimitive.Link

data-ui="agent"

data-slot="toolbar-link"

data-control="true"

data-size="sm"

className={cn(

        "inline-flex shrink-0 items-center rounded-[var(--radius-sm)] font-medium text-muted-foreground no-underline outline-none transition-colors hover:bg-foreground/6 hover:text-foreground focus-visible:ring-2 focus-visible:ring-foreground/20 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",

controlSize({ size: "sm" }),

"px-2",

skinSlot("toolbar-link", {}),

className,

)}

{...props}

/>

);

}

export function ToolbarGroup({ className, ...props }: ToolbarGroupProps) {

return (

<ToolbarPrimitive.Group

data-ui="agent"

data-slot="toolbar-group"

className={cn("inline-flex items-center gap-1", skinSlot("toolbar-group", {}), className)}

{...props}

/>

);

}

export function ToolbarSeparator({ orientation = "vertical", className, ...props }: ToolbarSeparatorProps) {

  // Mirrors ButtonGroupSeparator; horizontal toolbar renders vertical separators (1px column), so orientation defaults to "vertical".

return (

<ToolbarPrimitive.Separator

orientation={orientation}

data-ui="agent"

data-slot="toolbar-separator"

className={cn(

"shrink-0 self-stretch bg-border",

orientation === "vertical" ? "w-px" : "h-px w-full",

skinSlot("toolbar-separator", {}),

className,

)}

{...props}

/>

);

}

export function ToolbarInput({ className, ...props }: ToolbarInputProps) {

return (

<ToolbarPrimitive.Input

data-ui="agent"

data-slot="toolbar-input"

data-control="true"

data-size="sm"

className={cn(

        "min-w-0 rounded-[var(--radius-sm)] bg-transparent font-medium text-foreground outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-foreground/20 data-[disabled]:opacity-50",

controlSize({ size: "sm" }),

"px-2",

skinSlot("toolbar-input", {}),

className,

)}

{...props}

/>

);

}

Refined UI

Toolbar

Composition

Parts

Raw code