Primitives

Toggle

Pressed-state button and toggle group built on the Button surface.

Single toggle

Multi-select group

Single-select group

Disabled

Composition

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

Parts

Exported compound parts from the installed source.

Toggle

└── ToggleGroup

The refined source installs this primitive from src/registry/sources/refined/ui/toggle.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/toggle.json

See registry manifest

Installed dependencies

Installed with this primitive because the slot depends on them; they are support files, not standalone sidebar items.

Button slotsrc/registry/sources/refined/ui/button.tsxSkin

Raw code

Primary installed primitive source

Base UI Toggle slot

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

"use client";

import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";

import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group";

import type { ToggleGroupProps, ToggleProps } from "@/components/refined-ui/contracts";

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

import { Button } from "@/components/refined-ui/ui/button";

// Not a new visual language — Button slot in pressed state. Base UI Toggle owns two-state behavior (aria-pressed, group coordination), renders library Button, so skin/tone/size/--radius-control chrome apply free.

// Live pressed state (incl. group-driven selection) feeds Button's `active` prop → data-active, same hook a skin styles for active buttons; pass explicit `active` to override.

// `data-component="toggle"` marks composed identity w/o displacing Button's data-slot="button"; `showCheck` reuses Checkbox/SelectItem's tick glyph.

export function Toggle({

variant = "surface",

size = "sm",

tone = "neutral",

active,

showCheck = false,

className,

pressed,

defaultPressed,

onPressedChange,

value,

disabled,

children,

...props

}: ToggleProps) {

return (

<TogglePrimitive

pressed={pressed}

defaultPressed={defaultPressed}

onPressedChange={onPressedChange}

value={value}

disabled={disabled}

render={(renderProps, state) => {

const isActive = active ?? state.pressed;

return (

<Button

variant={variant}

size={size}

tone={tone}

active={isActive}

{...renderProps}

data-component="toggle"

className={cn(className, renderProps.className)}

>

{showCheck ? (

              <span data-ui="agent" data-slot="toggle-check" className="flex size-3.5 shrink-0 items-center justify-center">

{isActive ? (

<svg viewBox="0 0 12 12" className="size-3" aria-hidden="true" fill="none">

                    <path d="M2.5 6.5 5 9l4.5-5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />

</svg>

) : null}

</span>

) : null}

{renderProps.children}

</Button>

);

}}

{...props}

>

{children}

</TogglePrimitive>

);

}

// ToggleGroup shares selection state with nested Toggles — single-select default, `multiple` for multi-toggle. Plain flex container; pressed styling lives on each Toggle's Button, group only owns layout.

// Caller className wins (twMerge) so grid/gap overrides collapse default inline row cleanly.

export function ToggleGroup({ className, orientation = "horizontal", ...props }: ToggleGroupProps) {

return (

<ToggleGroupPrimitive

data-ui="agent"

data-slot="toggle-group"

orientation={orientation}

className={cn("inline-flex items-center gap-1", orientation === "vertical" && "flex-col", className)}

{...props}

/>

);

}

Refined UI

Toggle

Composition

Parts

Installed dependencies

Raw code