ButtonDivider

Updated: Sep 24, 2026
ButtonDivider marks a boundary between logical sections of actions inside a ButtonGroup or ButtonRail — for example, separating the primary actions from settings or from a destructive action. Use it to communicate structure rather than decorate every pair of buttons.
It owns its pill geometry, its color, and its horizontal margins, and it reports its height to the surrounding group so mixed rows still align. It is never focusable and never carries action semantics.
For a separator between content sections rather than actions, use Divider.

Usage

import { Button, ButtonDivider, ButtonGroup } from '@wearables-ui-toolkit/mrbd';

<ButtonGroup>
  <Button icon={playIcon} title="Play" onClick={play} />
  <Button icon={shuffleIcon} title="Shuffle" onClick={shuffle} />
  <ButtonDivider />
  <Button icon={deleteIcon} title="Delete" onClick={remove} />
</ButtonGroup>;
In a rail, the same divider separates a fixed anchor action from the actions that scroll around it. anchorIndex counts only the rail’s focusable children, so dividers do not shift it — the capture action below is index 1, not 2:
import { Button, ButtonDivider, ButtonRail } from '@wearables-ui-toolkit/mrbd';

<ButtonRail anchorIndex={1}>
  <Button icon={backIcon} title="Back" onClick={goBack} />
  <ButtonDivider />
  <Button icon={captureIcon} title="Capture" onClick={capture} />
  <ButtonDivider />
  <Button icon={settingsIcon} title="Settings" onClick={openSettings} />
</ButtonRail>;

Props

The full prop type is ButtonDividerProps.
PropTypeDefaultDescription
className
string
''
Extra class on the divider element.
style
CSSProperties
—
Extra inline styles on the divider element.
ButtonDivider forwards its ref to the root HTMLDivElement. It does not spread arbitrary DOM attributes: className, style, and ref are the only ways to reach the root element.

Behavior

  • Renders a vertical pill filled with the --uit-color-border-primary role, so it tracks the active theme. Its corner radius makes it fully rounded at its own width.
  • Its horizontal margins are built in and fixed. Let the divider and its parent own action-lane spacing; extra margins create inconsistent gaps.
  • It does not take part in the spacing compensation the buttons around it publish while they expand and collapse, so the divider’s own gap stays constant while its neighbours animate.
  • It reports its height to the surrounding group, which uses the tallest child to size the row. The divider is shorter than a button, so adding one never makes a row taller.
  • It has no interaction states and takes no focus stop, so it does not participate in focus travel: left and right navigation moves past it to the next focusable control.
  • It has no intrinsic animation and does not react to the focus state of the buttons around it.

Accessibility

The divider is decorative and is hidden from assistive technology, so it is absent from the accessibility tree entirely. It contributes nothing to the accessible name of the actions around it, and it adds no grouping semantics, so any grouping it implies visually must also be clear from the labels themselves.
  • Use ButtonDivider only between logical sections, such as ordinary actions and a destructive one.
  • Place dividers on both sides of an anchored child only when that child forms its own section.
  • Make the grouping clear in action labels because assistive technology does not perceive the divider.

Avoid

  • Reserve dividers for meaningful boundaries rather than visual symmetry or every gap between buttons.
  • Use ButtonDivider inside a button group or rail, where the parent can read its geometry and align the row.
  • Preserve its component-owned margins, size, and pill styling.
  • Keep it as a direct child because wrapping it prevents the group from reading its height correctly.
  • Use Divider for content sections; ButtonDivider separates action groups.
ButtonGroup, ButtonRail, Button, Divider