Button Group
MD3 button group — a row of buttons that reads as one control.
Walkthrough
1. 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>2. 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>