Expandable Control

Pro

Icon button that grows into a labelled pill. In toggle mode it fills with colour, shows its label briefly, then settles into a filled circle. Optional glass style for use over images.

Preview

Installation

npx @lumioui/cli add pro/expandable-control

Usage

import { ExpandableControl } from "@/components/ui/expandable-control/expandable-control";
<ExpandableControl />

Examples

Actions

Glass controls over a full-bleed photo in a viewer (glass because they float on imagery).

Sizes

Each size where it lives in a podcast app: md Follow in the show header, sm queue buttons on episode rows (trailing edge, so only the title truncates as they grow), lg as the play-latest action.

Toggle

Save on a recipe card.

API reference

Prop Type Default
icon* IconName —
label* string —
variant
"default" | "primary" +4 "default" | "primary" | "secondary" | "outline" | "ghost" | "destructive"

Visual style. Default "default" (card surface). "primary" fills with ink or the scoped Accent.

 "default"
glass boolean

Glass surface — only for controls floating over photos, video or maps. Default false (glass on a flat canvas is decorative).

 false
size "sm" | "md" | "lg"

Size. Default "md".

 "md"
expanded boolean

Controlled expanded state.

 —
defaultExpanded boolean

Initial expanded state (uncontrolled). Default false.

 false
onExpandedChange (expanded: boolean) => void —
active boolean

Toggle mode (save, follow, favourite). When passed, a press flips it: on → the pill opens, fills from the icon outward, a sheen crosses, the label holds, then the pill closes to a filled disc. Off → the fill dims.

 —
onActiveChange (active: boolean) => void —
disabled boolean —
className string —