Control
The root of a fixed-height control you build yourself: a token height, matching padding and data-bt-control.
import { Control } from "@butteryui/core";Demo
When to use it
Use it for
- Your own control, such as a stepper, a filter pill or a toggle, that has to sit at buttery's heights
- Making a Pressable or a link a fixed-height control with asChild
Not for
- An action: use Button, which is already a control
- A box that grows with its content: use Surface or Stack
Examples
Pressable control
A pill button of your own at the button height: Surface for the look, Control for the height, Pressable for the press.
0 roasts in the order
Sizes
Every height, each with the inline padding that goes with it, so a control you build lines up with buttery's own.
Stepper root
A stepper built from public parts: a raised Control holding two 28px pressable Controls and the count between them.
Variants and states
Every height
Each size is a height token with padding to match, so a control you build lines up with buttery's own.
A pressable control
Props
Control
| Prop | Type | Default | Description |
|---|---|---|---|
size | "badge" | "sm" | "control" | "button" | "cta" | "control" | The height, from the height tokens, with inline padding to match: "badge" (20px), "sm" (28px),
"control" (34px, the default), "button" (36px) or "cta" (48px). Compact density shrinks them. |
asChild | boolean | Render the single child element instead of a div, such as a Pressable button, with Control's props merged onto it. |
It also takes ComponentPropsWithRef<"div">.
Accessibility
Adds no role; give it one through what it renders (a Pressable button, a link) or its own role and keyboard handling.
It takes no keyboard input of its own.
Motion
It doesn't move.
With reduced motion: Nothing changes.
Layout
Its height is its size's token: --bt-h-badge (20px), --bt-h-sm (28px), --bt-h-control (34px, the default), --bt-h-button (36px) or --bt-h-cta (48px), with inline padding to match. It's as wide as its content and padding, on one line with its content centered 6px apart. Its hit area is whatever it renders, so a pressable one should be sm or taller: badge is under the 24px minimum.