Component catalog

Find components by purpose, with API references, examples, and accessibility guidance.

Components

Groups related independent actions in one capsule, corresponding to SwiftUI ControlGroup.

Code

import { ControlGroup } from "@liquidify/react/control-group"

Prop	Type	Default	Description
children required	`ReactNode`	Not specified	Related controls, usually Buttons with their own onPress handlers.
className	`string \| undefined`	Not specified	Additional CSS class for the glass surface. Use it to override `--lq-*` tokens in a stylesheet.
disabled	`boolean \| undefined`	`false`	Disables the group. A disabled ancestor takes precedence over a child’s false value.
label	`ReactNode`	`undefined`	Visible group label. Use aria-label for a group without visible text.
labelProps	`LabelProps \| undefined`	`undefined`	Typography props for a text or number label.
prominent	`boolean \| undefined`	`false`	Uses Button’s prominent tint and enlarges the capsule on hover or activation.
ref	`Ref<HTMLFieldSetElement> \| undefined`	Not specified	Ref to the rendered root or merged child. Its generic element type follows the component’s polymorphic root and defaults to `HTMLElement`.
separators	`boolean \| undefined`	`true`	Shows decorative separators between actions.
size	`ControlGroupSize \| undefined`	`"regular", or the enclosing ControlGroup size`	Default child size. An explicit child size takes precedence.
tint	`LiquidTintValue \| undefined`	Not specified	System accent from the 13-color LIQUID_COLORS palette. Changes tint, focus, and selection colors independently of the visual variant.