Button Group

A container that groups related buttons together with consistent styling.

Basic Usage

Source

<RzButtonGroup>
    <RzButton Outline>Button 1</RzButton>
    <RzButton Outline>Button 2</RzButton>
</RzButtonGroup>

Orientation

Set the Orientation property to change the button group layout.

Source

<RzButtonGroup Orientation="Orientation.Vertical">
    <RzButton Outline>Button 1</RzButton>
    <RzButton Outline>Button 2</RzButton>
</RzButtonGroup>

Size

Control the size of buttons using the Size property on individual buttons.

Source

<RzButtonGroup>
    <RzButton Outline Size="Size.Small">Small</RzButton>
    <RzButton Outline Size="Size.Small">Small</RzButton>
    <RzButton Outline Size="Size.Small">Small</RzButton>
</RzButtonGroup>

Nested

Nest RzButtonGroup components to create button groups with spacing.

Source

<RzButtonGroup>
    <RzButtonGroup>
        <RzButton Outline>Copy</RzButton>
        <RzButton Outline>Paste</RzButton>
    </RzButtonGroup>
    <RzButtonGroup>
        <RzButton Outline>
            <Blazicon Svg="MdiIcon.FormatBold" />
        </RzButton>
        <RzButton Outline>
            <Blazicon Svg="MdiIcon.FormatItalic" />
        </RzButton>
        <RzButton Outline>
            <Blazicon Svg="MdiIcon.FormatUnderline" />
        </RzButton>
    </RzButtonGroup>
</RzButtonGroup>

Separator

The ButtonGroupSeparator component visually divides buttons within a group. Useful for variants other than outline.

Source

<RzButtonGroup>
    <RzButton Variant="ThemeVariant.Secondary">Item 1</RzButton>
    <ButtonGroupSeparator />
    <RzButton Variant="ThemeVariant.Secondary">Item 2</RzButton>
</RzButtonGroup>

Split

Create a split button group by adding two buttons separated by a ButtonGroupSeparator.

Source

<RzButtonGroup>
    <RzButton Variant="ThemeVariant.Primary">Action</RzButton>
    <ButtonGroupSeparator />
    <RzButton Variant="ThemeVariant.Primary" class="w-9 px-0">
        <Blazicon Svg="MdiIcon.ChevronDown" />
    </RzButton>
</RzButtonGroup>

Input

Wrap an input component with buttons.

Source

<RzButtonGroup>
    <RzInputText For="@(() => _formModel.SearchValue)" Placeholder="Type something..." class="w-[200px]" />
    <RzButton Outline class="w-9 px-0">
        <Blazicon Svg="MdiIcon.Magnify" />
    </RzButton>
</RzButtonGroup>

Input Group

Wrap an RzInputGroup component to create complex input layouts.

Source

<RzButtonGroup class="[--radius:9999rem]" x-data="{ voiceEnabled: false }">

    <RzButtonGroup>
        <RzButton Variant="ThemeVariant.Default" Outline="true" class="size-9 px-0">
            <Blazicon Svg="Lucide.Plus" />
        </RzButton>
    </RzButtonGroup>

    <RzButtonGroup>
        <EditForm Model="_chatModel">
            <RzInputGroup>
                <InputGroupInput For="@(() => _chatModel.Message)" 
                                 Placeholder="Send a message..."
                                 x-bind:placeholder="voiceEnabled ? 'Record and send audio...' : 'Send a message...'"
                                 x-bind:disabled="voiceEnabled" />
         
                <InputGroupAddon Align="InputGroupAddonAlign.InlineEnd">
                    <InputGroupButton Size="InputGroupButtonSize.IconExtraSmall"
                                      type="button"
                                      x-on:click="voiceEnabled = !voiceEnabled"
                                      x-bind:aria-pressed="voiceEnabled"
                                      x-bind:data-active="voiceEnabled"
                                      class="data-[active=true]:bg-orange-100 data-[active=true]:text-orange-700 dark:data-[active=true]:bg-orange-800 dark:data-[active=true]:text-orange-100 transition-colors">
                        <Blazicon Svg="@Lucide.AudioLines" />
                    </InputGroupButton>
                </InputGroupAddon>
            </RzInputGroup>
        </EditForm>
    </RzButtonGroup>
</RzButtonGroup>

@code {
    private ChatModel _model = new();

    private class ChatModel
    {
        public string Message { get; set; } = "";
    }                        
}

Dropdown Menu

Create a split button group with a RzDropdownMenu.

Source

<RzButtonGroup>
    <RzButton Variant="ThemeVariant.Primary">Profile</RzButton>
    <ButtonGroupSeparator />
    <RzDropdownMenu>
        <DropdownMenuTrigger AsChild>
            <RzButton Variant="ThemeVariant.Primary" class="w-9 px-0">
                <Blazicon Svg="MdiIcon.ChevronDown" />
            </RzButton>
        </DropdownMenuTrigger>
        <DropdownMenuContent>
            <DropdownMenuItem>Settings</DropdownMenuItem>
            <DropdownMenuItem>Messages</DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem>Logout</DropdownMenuItem>
        </DropdownMenuContent>
    </RzDropdownMenu>
</RzButtonGroup>

Select

Pair with a RzNativeSelect component.

Source

<RzButtonGroup>
    <ButtonGroupText>Format</ButtonGroupText>
    <RzNativeSelect For="@(() => _formModel.SearchValue)" class="w-[150px]">
        <option value="mp4">MP4</option>
        <option value="mov">MOV</option>
        <option value="avi">AVI</option>
    </RzNativeSelect>
</RzButtonGroup>

Popover

Use with a RzPopover component.

Source

<RzButtonGroup>
    <RzButton Variant="ThemeVariant.Secondary">Settings</RzButton>
    <ButtonGroupSeparator />
    <RzPopover>
        <PopoverTrigger AsChild>
            <RzButton Variant="ThemeVariant.Secondary" class="w-9 px-0">
               <Blazicon Svg="MdiIcon.Cog" />
            </RzButton>
        </PopoverTrigger>
        <PopoverContent>
            <div class="grid gap-4">
                <div class="space-y-2">
                    <h4 class="font-medium leading-none">Dimensions</h4>
                    <p class="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
                </div>
            </div>
        </PopoverContent>
    </RzPopover>
</RzButtonGroup>