Button Group - Fod.DemoPage

Basic Usage

A simple button group with no selection behavior (toolbar mode). Buttons act independently.

Toolbar Mode

razor

<FodButtonGroup AriaLabel="Text formatting">
    <FodButton>Bold</FodButton>
    <FodButton>Italic</FodButton>
    <FodButton>Underline</FodButton>
</FodButtonGroup>

Single Selection (Radio-like)

Only one button can be selected at a time. Perfect for mutually exclusive options.

Text Alignment

Selected: left

razor

<FodButtonGroup SelectionMode="SelectionMode.Single" SelectedValue="selectedValue" AriaLabel="Alignment">
    <FodButton Value="left">Left</FodButton>
    <FodButton Value="center">Center</FodButton>
    <FodButton Value="right">Right</FodButton>
</FodButtonGroup>

Multiple Selection (Toggle-like)

Multiple buttons can be selected simultaneously. Perfect for toggle options.

Text Formatting Options

Selected: bold

razor

<FodButtonGroup SelectionMode="SelectionMode.Multiple" SelectedValues="formats" AriaLabel="Formatting">
    <FodButton Value="bold">B</FodButton>
    <FodButton Value="italic">I</FodButton>
    <FodButton Value="underline">U</FodButton>
</FodButtonGroup>

Sizes

Button groups support three sizes: Large, Medium (default), and Small.

Large

Medium (Default)

Small

razor

<FodButtonGroup Size="Size.Large" AriaLabel="Large group">
    <FodButton>Option 1</FodButton>
    <FodButton>Option 2</FodButton>
</FodButtonGroup>

<FodButtonGroup Size="Size.Medium" AriaLabel="Medium group">
    <FodButton>Option 1</FodButton>
    <FodButton>Option 2</FodButton>
</FodButtonGroup>

<FodButtonGroup Size="Size.Small" AriaLabel="Small group">
    <FodButton>Option 1</FodButton>
    <FodButton>Option 2</FodButton>
</FodButtonGroup>

Orientation

Button groups can be displayed horizontally (default) or vertically.

Horizontal (Default)

Vertical

razor

<FodButtonGroup Orientation="Orientation.Horizontal" AriaLabel="Horizontal">
    <FodButton>Day</FodButton>
    <FodButton>Week</FodButton>
    <FodButton>Month</FodButton>
</FodButtonGroup>

<FodButtonGroup Orientation="Orientation.Vertical" AriaLabel="Vertical">
    <FodButton>Day</FodButton>
    <FodButton>Week</FodButton>
    <FodButton>Month</FodButton>
</FodButtonGroup>

Disabled State

The entire group or individual buttons can be disabled.

Entire Group Disabled

Individual Button Disabled

razor

<FodButtonGroup Disabled="true" AriaLabel="Disabled group">
    <FodButton>Option 1</FodButton>
    <FodButton>Option 2</FodButton>
</FodButtonGroup>

<FodButtonGroup SelectionMode="SelectionMode.Single" SelectedValue="value">
    <FodButton Value="a">Option A</FodButton>
    <FodButton Value="b" Disabled="true">Option B (Disabled)</FodButton>
    <FodButton Value="c">Option C</FodButton>
</FodButtonGroup>

With Icons

Buttons within a group can include icons using IconStart and IconEnd render fragments.

View Options

Selected view: list

razor

<FodButtonGroup SelectionMode="SelectionMode.Single" SelectedValue="view" AriaLabel="View">
    <FodButton Value="list">
        <IconStart>
            <FodIcon Icon="IconName.BulletList"/>
        </IconStart>
        <ChildContent>List</ChildContent>
    </FodButton>
    <FodButton Value="grid">
        <IconStart>
            <FodIcon Icon="IconName.DotGrid"/>
        </IconStart>
        <ChildContent>Grid</ChildContent>
    </FodButton>
</FodButtonGroup>

Keyboard Navigation

Button groups support full keyboard navigation using the roving tabindex pattern.

Keyboard Shortcuts

Tab: Enter/exit the group
Arrow Left/Right: Navigate between buttons (horizontal)
Arrow Up/Down: Navigate between buttons (vertical)
Home: Move to first button
End: Move to last button
Enter/Space: Activate the focused button

Try navigating with your keyboard:

Selected: None

razor

<FodButtonGroup SelectionMode="SelectionMode.Single" SelectedValue="selection" AriaLabel="Navigation">
    <FodButton Value="1">First</FodButton>
    <FodButton Value="2">Second</FodButton>
    <FodButton Value="3">Third</FodButton>
</FodButtonGroup>

RTL Support

Button groups automatically adapt to RTL (right-to-left) layouts.

RTL Layout (Arabic)

html

<div dir="rtl" lang="ar">
    <FodButtonGroup SelectionMode="SelectionMode.Single" AriaLabel="RTL">
        <FodButton Value="1">الأول</FodButton>
        <FodButton Value="2">الثاني</FodButton>
        <FodButton Value="3">الثالث</FodButton>
    </FodButtonGroup>
</div>

Interactive Example

A complete example showing button group with click handlers for toolbar actions.

Actions Toolbar

razor

<FodButtonGroup AriaLabel="Actions">
    <FodButton OnClick="HandleCopy">Copy</FodButton>
    <FodButton OnClick="HandleCut">Cut</FodButton>
    <FodButton OnClick="HandlePaste">Paste</FodButton>
</FodButtonGroup>

API Reference

FodButtonGroup component properties and their descriptions.

No properties defined.