Chip
A small reset action that sits next to a control, such as Reset beside a slider's label.
import { Chip } from "@butteryui/react";Demo
When to use it
Use it for
- Resetting one control to its default, beside that control's label
- A tiny secondary action inside a dense inspector row
Not for
- Any standalone action: use Button (chips are too small to stand alone)
- Filters or tags: buttery has no filter chip yet
Examples
Clear all
An inspector section with Clear all at the end of its title, unavailable once every effect is off.
2 effects on
Reset rotation
A reset beside a value, unavailable while the value is already the default, keeping focus after a reset.
Variants and states
Reset
Press Reset and it disables itself until the value changes again.
Props
Chip
It also takes ComponentPropsWithRef<"button">.
Accessibility
A native button named by its text, type="button". Its 24px hit area is larger than its 20px box. Disabled while there's nothing to reset.
| Keys | What they do |
|---|---|
| Enter or Space | Presses it, unless it's aria-disabled |
Motion
It scales to 97% while it's pressed, over `--bt-dur-press`, and springs back when it's let go.
With reduced motion: It presses in at once, without the scale animating.
Layout
It's --bt-h-badge (20px) tall and as wide as its label, never wider than its container, where a long label truncates with an ellipsis and shows in full as its title. Its hit area reaches 24px both ways, past its 20px box.