Skip to content
omaris

Actions

Button Group

MD3 button group — a row of buttons that reads as one control.

import { ButtonGroup } from 'omaris'
Learn

Examples

Connected

connected for actions that are one control — undo/redo, a formatting row; spaced for neighbours that keep their own shape.

<script lang="ts">	import { Button, ButtonGroup } from 'omaris';</script>​<ButtonGroup label="Text alignment">	<Button variant="outlined">Left</Button>	<Button variant="outlined">Centre</Button>	<Button variant="outlined">Right</Button></ButtonGroup>​<ButtonGroup variant="spaced" label="Actions">	<Button variant="tonal">Save</Button>	<Button variant="tonal">Publish</Button></ButtonGroup>

Vertical and full

full shares the width — a group filling a phone or a sheet edge to edge; vertical stacks for a narrow side panel.

<script lang="ts">	import { Button, ButtonGroup } from 'omaris';</script>​<div class="flex w-full max-w-sm flex-col gap-6">	<ButtonGroup full label="Range">		<Button variant="outlined">Day</Button>		<Button variant="outlined">Week</Button>		<Button variant="outlined">Month</Button>	</ButtonGroup>​	<ButtonGroup orientation="vertical" label="Export as">		<Button variant="outlined">CSV</Button>		<Button variant="outlined">JSON</Button>		<Button variant="outlined">PDF</Button>	</ButtonGroup></div>

When to use it

Use it for

  • A row of actions that reads as one control: Undo/Redo, Bold/Italic/Underline, Zoom in/out. connected is the default: pill ends outside, squared joins inside, a hairline gap between.
  • A segmented control built from full Buttons. toggle buttons with pressed inside a connected group, when a segment needs an href, a loading state or its own tone.
  • spaced when the buttons stay separate but should sit on the 8dp rhythm: a card's action row, a dialog footer.
  • orientation="vertical" for a stacked control in a narrow side panel; full for a group that fills a phone width or a sheet edge to edge.

Not for

  • One choice out of two to five that you bind a value to → Segmented Button. It owns the selection and draws the tick; a group only lays buttons out.
  • One default action plus a menu of the rest → Split Button.
  • Filters that can wrap or scroll and can all be off → Chips in a ChipGroup.
  • Page numbers → Pagination.
  • Two unrelated buttons that happen to be neighbours → a flex container with gap-2.

Do

  • Give every child the same variant and size. The group reshapes the corners; it does not unify the fills.
  • Pass label. It becomes the aria-label of the role="group", so a screen reader can say what the row is for.
  • Use Icon Buttons as the children of a toolbar group, each with its own aria-label.

Don't

  • Mix filled and outlined children in a connected group. The joins only read as one control when the fills match.
  • Go past five in a row. Beyond that it is a toolbar: spaced clusters with a Divider between them.
  • Use full at desktop width. The buttons stretch into bars; it is for a phone or a sheet.
Pairs with Button Icon Button Segmented Button Split Button Divider

Quick reference

variant
  • connected (default)
  • spaced
orientation
  • horizontal (default)
  • vertical

API

ButtonGroup

MD3 button group — a row of buttons that reads as one control.

connected is the segmented look: a hairline gap between children, pill ends on the outside, squared corners on the inside. spaced just lays buttons out on the MD3 8dp rhythm and leaves their shapes alone.

The group restyles whatever buttons you put in it, so children can stay plain <Button>s; set their variant to pick the group's fill.

import { ButtonGroup } from 'omaris'

Props

variant

Defaults to 'connected'

ButtonGroupVariant
connected
spaced
orientation

Defaults to 'horizontal'

ButtonGroupOrientation
horizontal
vertical
full

Defaults to false

boolean
label
string

Accessible name for the group.

class
string
children
Snippet