Use Button Group

<jangle-button-group> arranges related actions with consistent spacing and preserves their reading and keyboard order. Use it for actions such as Save and Cancel. It does not manage selection or provide toolbar arrow-key navigation.

Add a group

Configure package access, then register the group and its children:

import '@jangle-ui/tokens/tokens.css';
import '@jangle-ui/components/button/register';
import '@jangle-ui/components/button-group/register';

<jangle-button-group label="Profile actions" align="end">
  <jangle-button treatment="quiet">Cancel</jangle-button>
  <jangle-button intent="brand" treatment="strong">Save changes</jangle-button>
</jangle-button-group>

Connect the actions to your application as you would standalone Buttons. The group never changes their size, emphasis, disabled state, or form behavior. Prefer matching sizes in an ordinary group. Different sizes are supported when a particular composition needs them.

Layout and naming

Horizontal groups wrap when their actions no longer fit the available width. There is no fixed breakpoint. Use orientation="vertical" for a column. align="start|center|end" follows the document's direction and aligns each row or the intrinsic-width controls in a column.

An optional localized label provides an accessible group name when the grouping context helps. An omitted or whitespace-only label leaves an ordinary layout container. Every child still needs its own accessible name. The group adds no focus stop; Tab visits the children normally.

See Button Group in Storybook for interactive Controls, wrapping, and vertical examples.