Actions
ButtonGroup
A row (or column) of controls welded into one — a segmented row of buttons, an `Input` with a `Button` on its end, a `Select` and the action that goes with it. Squares off every interior corner, rounds the two ends, and leaves a hairline seam between neighbours.
<UiButtonGroup />Options
One block per prop — what it does, and what it looks like set.
Orientation
orientation is the direction the controls are joined in. Horizontal welds them into a row — the ends keep their corners, everything between them is squared off, and a hairline seam sits where two neighbours meet. Vertical does the same down a column, which is how a stack of fields reads as one block rather than three.
The seam between two controls is this component's own background showing through a 1px gap — the children sit flush against each other and the gap is the only place it's visible. That means a group of ghost buttons, which have no background of their own, draws that background as a solid block: use subtle, soft or solid children inside a group, and reach for Toolbar when what you want is a bar of transparent icon buttons separated by real dividers.
Only *direct* children are squared off. Wrapping a field in a div (or a Tooltip) puts that wrapper in the group instead, so the wrapper loses its corners and the field inside keeps its own — put the controls in directly, and use class on each one for anything you'd have reached for the wrapper to do.
Size
size is the radius of the group's outer corners, in the same sm/md/lg steps Button uses. Nothing is passed down to the children, so set it to the size the controls inside are already at — a group of sm buttons under a default md group rounds off wider than the buttons it contains.
Nothing is passed down to the children — unlike Nuxt UI's UButtonGroup, this doesn't inject a size into the controls inside it, because most of this library's fields (Input, Select, NumberInput) have one fixed height and no size prop at all. Set size on each Button or Toggle you put in, and set the matching one here so the group's ends round off to the same curve.
Examples
The component in real use: compositions that answer "how do I build X with this", rather than one prop at a time.
A `Select` and the action that goes with it
Mixing control types is the point — a Select is full-width and a Button is fixed, so the select takes whatever the button leaves and the pair still reads as one control. Everything in a group has to be a *direct* child: wrap a field in a div and the group squares off the wrapper instead of the field.
A segmented control from `Toggle`s
Toggle keeps its own pressed state, so a segmented control is a row of them sharing one value — each writes the group's selection on press, and reads back whether it's the one selected. The seams are what make the row read as a single control with three positions.
API Reference
Generated from the component's source — props, slots and emits as the component actually declares them.
Props
"sm" | "md" | "lg"'md'Slots
default