ButtonGroup

Joined or spaced buttons with shared defaults.

JavaScript off: what the HTML and CSS do on their own.

Related buttons in a row, joined into one control by default. Accent, Variant and Size here become the defaults for the buttons inside; a button's own setting wins.

Usage

razor

<ButtonGroup Label="Text alignment" Variant="ButtonVariant.Outline" Accent="Accent.Neutral">
    <IconButton Icon="Lucide.TextAlignStart" Label="Align left" />
    <IconButton Icon="Lucide.TextAlignCenter" Label="Center" />
</ButtonGroup>

Joined buttons

Use Label to name the group for screen readers; the buttons and icon buttons inside are joined into one control.

Preview Code

Preview

Code

Joined.razor

<Row Gap="4" Align="Align.Center" Wrap Justify="Justify.Center">
    <ButtonGroup Label="History" Variant="ButtonVariant.Outline" Accent="Accent.Neutral">
        <IconButton Icon="Lucide.Undo2" Label="Undo" />
        <IconButton Icon="Lucide.Redo2" Label="Redo" />
    </ButtonGroup>
    <ButtonGroup Label="Pages" Variant="ButtonVariant.Outline" Accent="Accent.Neutral">
        <Button StartIcon="Lucide.ChevronLeft">Newer</Button>
        <Button EndIcon="Lucide.ChevronRight">Older</Button>
    </ButtonGroup>
    <ButtonGroup Label="Save options">
        <Button StartIcon="Lucide.Save">Save</Button>
        <IconButton Icon="Lucide.ChevronDown" Label="More save options" />
    </ButtonGroup>
</Row>

Shared defaults

Use Variant, Accent and Size on the group as its buttons' defaults; a button's own setting wins.

Preview Code

Preview

Code

Defaults.razor

<ButtonGroup Label="Review" Variant="ButtonVariant.Outline" Accent="Accent.Neutral" Size="ControlSize.Sm">
    <Button StartIcon="Lucide.Check">Approve</Button>
    <Button>Request changes</Button>
    <Button Accent="Accent.Danger">Reject</Button>
</ButtonGroup>

Spaced apart

Use Attached="false" to space the buttons apart instead of joining them.

Preview Code

Preview

Code

Spaced.razor

<ButtonGroup Label="Clipboard" Variant="ButtonVariant.Ghost" Accent="Accent.Neutral" Attached="false">
    <Button StartIcon="Lucide.Scissors">Cut</Button>
    <Button StartIcon="Lucide.Copy">Copy</Button>
    <Button StartIcon="Lucide.ClipboardPaste">Paste</Button>
</ButtonGroup>

Stacked and full width

Use Orientation to stack the buttons, and FullWidth to share the container's width among them.

Preview Code

Preview

Code

Stacked.razor

<Row Gap="6" Align="Align.Center" Wrap Justify="Justify.Center" Grow>
    <ButtonGroup Label="Zoom" Orientation="Orientation.Vertical" Variant="ButtonVariant.Outline" Accent="Accent.Neutral">
        <IconButton Icon="Lucide.ZoomIn" Label="Zoom in" />
        <IconButton Icon="Lucide.ZoomOut" Label="Zoom out" />
    </ButtonGroup>
    <Box Grow MaxWidth="20.Rem">
        <ButtonGroup Label="Export" Variant="ButtonVariant.Outline" Accent="Accent.Neutral" FullWidth>
            <Button StartIcon="Lucide.FileSpreadsheet">Export CSV</Button>
            <Button StartIcon="Lucide.FileText">Export PDF</Button>
        </ButtonGroup>
    </Box>
</Row>

Mode support

What works in each mode, ButtonGroup
Feature	Off	Static	Live
Everything	Yes	Yes	Yes

Off: JavaScript disabled. Static: a static SSR page with IzzyBlazor's script. Live: an interactive page (Server, WebAssembly or Auto).

Accessibility

It renders a div with role="group", named by Label, such as "Text alignment"; without one, screen readers don't hear what the buttons share.
Each button is its own tab stop; there's no arrow-key movement between them (in a Toolbar, its arrow keys move between them).
It doesn't mark a pressed or selected button: for one choice among several, use SegmentedControl or RadioGroup.

Parameters

ButtonGroup parameters
Prop	Type	Default
`Label`What the buttons have in common, for screen readers: "Text alignment".	`string?`
`Accent`The buttons' accent, unless a button sets its own.	`Accent?`
`Variant`The buttons' variant, unless a button sets its own.	`ButtonVariant?`
`Size`The buttons' size, unless a button sets its own.	`ControlSize?`
`Attached`Joins the buttons into one control with shared borders (the default).	`bool`	`true`
`Orientation`Lays the buttons out in a row (the default) or a column.	`Orientation`	`Orientation.Horizontal`
`FullWidth`Stretches the group to its container's width, sharing it among the buttons.	`bool`	`false`
`ChildContent`The buttons.	`RenderFragment?`

Plus 16 item props and 4 common props.

Full API