Icon Bar

Icon chips that spring open on hover to reveal labels.

Installation

npx shadcn@latest add @iconiq/icon-bar

Horizontal toolbar of compact icon chips. Hover or focus previews labels; clicking selects one item and keeps it expanded.

valuestring | null

Controlled selected item value. Pair with onValueChange for fully controlled selection.

defaultValuestring | null

Optional initial selected item when uncontrolled. Omit to start with every chip collapsed until the user clicks one.

onValueChange(value: string | null) => void

Called when selection changes. Receives null when the active chip is clicked again to deselect.

classNamestring

Optional class names applied to the outer flex container.

childrenReact.ReactNode

One or more IconBarItem elements rendered in a single row with consistent spacing.

Individual pill chip with a Lucide icon and animated label reveal on hover, focus, or selection.

iconLucideIcon

Required

Lucide icon component rendered inside the fixed 36px icon well.

labelstring

Required

Short text revealed when the chip expands. Keep labels concise so the width animation stays smooth.

valuestring

Selection identity for this chip. Defaults to label when omitted.

onClick(event: React.MouseEvent<HTMLButtonElement>) => void

Optional click handler fired after selection updates.

disabledboolean

Default false

Disables interaction, hover preview, and selection.

classNamestring

Optional class names merged onto the chip button.

Only one item stays expanded at a time. Clicking a chip selects it; clicking another moves selection; clicking the active chip again collapses it.

Hover and keyboard focus preview labels on non-selected chips. Give each item a unique value when labels repeat.

In controlled mode, update value from onValueChange (including null on deselect) for the UI to stay in sync.

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: @base-ui/react/toggle, @base-ui/react/toggle-group, motion, lucide-react.

This page documents the Base UI install only. Icon Bar uses Base UI Toggle Group and Toggle for selection.

The generated registry file is /r/icon-bar.json.