# Expandable Control

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.

> Composed · Pro · Actions — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/expandable-control
```

## Import

```tsx
import { ExpandableControl } from "@/components/ui/expandable-control/expandable-control";
```

## Variants

- `actions` — Actions: `npx @lumioui/cli add pro/expandable-control-actions`
- `sizes` — Sizes: `npx @lumioui/cli add pro/expandable-control-sizes`
- `toggle` — Toggle: `npx @lumioui/cli add pro/expandable-control-toggle`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `icon` | `IconName` | — |
| `label` | `string` | — |
| `variant?` | `"default" | "primary" | "secondary" | "outline" | "ghost" | "destructive"` | Visual style. Default "default" (card surface). "primary" fills with  ink or the scoped Accent. |
| `glass?` | `boolean` | Glass surface — only for controls floating over photos, video  or maps. Default false (glass on a flat canvas is decorative). |
| `size?` | `"sm" | "md" | "lg"` | Size. Default "md". |
| `expanded?` | `boolean` | Controlled expanded state. |
| `defaultExpanded?` | `boolean` | Initial expanded state (uncontrolled). Default 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` | — |

## Icons rendered

- `plus` — /icons.html?i=plus
- `share` — /icons.html?i=share
- `info` — /icons.html?i=info
- `bookmark` — /icons.html?i=bookmark

Source: https://lumioui.com/components/expandable-control