Floating button group

Separate soft buttons in a quiet tray, with one shared highlight that morphs from button to button as you move, and a pressed state that settles in place.

npx shadcn@latest add @silicon-ui/floating-button-group
actiongrouptoolbarnew
Loading…

Installation

With the shadcn CLI

npx shadcn@latest add @silicon-ui/floating-button-group

Manually

  1. Install the dependencies.

    npm install @radix-ui/react-tooltip motion

  2. Copy these files into your project. Shared files are skipped if you already have them.

    • components/silicon-ui/floating-button-group/floating-button-group.tsx
    • components/silicon-ui/floating-button-group/floating-button-group.module.css
    • components/silicon-ui/tooltip/tooltip.tsx shared
    • components/silicon-ui/tooltip/tooltip.module.css shared

  3. Install the foundation once per app for the design and motion tokens: npx shadcn@latest add @silicon-ui/silicon-foundation

Usage

Source codetsx
import { FloatingButtonGroup } from "@/components/silicon-ui/floating-button-group/floating-button-group";

API reference

PropTypeDefault
items*readonly FloatingButtonGroupItem[]—
label*

Accessible name of the toolbar, such as "Board actions".

string—
variant

muted sits quietly on a page; floating raises the tray with the floating shadow for overlays such as a selection toolbar.

FloatingButtonGroupVariant

"muted""floating"

"muted"
sizeFloatingButtonGroupSize

"sm""md"

"md"
orientationFloatingButtonGroupOrientation

"horizontal""vertical"

"horizontal"
iconOnly

Shows every item as an icon only, with its label in a tooltip. Items with their own iconOnly win.

booleanfalse
tooltipSide

Side of the item tooltips. Defaults to top for a row and right for a column.

"top" | "bottom" | "left" | "right"—
onAction

Called with the item id after the item's own onSelect.

(id: string) => void—
classNamestring—
styleCSSProperties—

Dependencies

npm
@radix-ui/react-tooltipmotion
Registry
silicon-motion-tokenstooltip