Ravox KitBasics
Button Group
Neighboring actions joined into one piece, horizontal or vertical: Publish | ▾, − 1 +, prefix + field + copy. Separator for solid buttons, fixed text and a toolbar mode with keyboard arrows.
Settings
Examples
Main action with more options
Quantity
Toolbar (keyboard arrows)
With field and fixed text
Vertical pagination
Installation
The command creates components/ui/button-group.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add button-groupProps
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | Direction in which the pieces are joined. |
| variant | variant do Button | — | Default for every child <Button> (each one can still pass its own). |
| size | size do Button | — | Default for every child <Button>. |
| toolbar | boolean | false | Becomes role="toolbar": one Tab stop, with arrows, Home and End moving between buttons. |
| ...props | ComponentProps<"div"> | — | role="group" by default: give it an aria-label that says what the group does. |
| ButtonGroupSeparator | componente | — | Line between two solid buttons. In outline, the border already separates them. |
| ButtonGroupText | componente | — | A piece of fixed text: "https://", "$", "/month". |