Button Group

A button group allows you to group related buttons into sections.

<dui-button-group>
    <dui-button-group>
        <dui-button variant="ButtonVariant.Outline" size="ButtonSize.Icon">
            <dui-icon name="arrow-left"/>
        </dui-button>
    </dui-button-group>
    <dui-button-group>
        <dui-button variant="ButtonVariant.Outline">Review</dui-button>
        <dui-button variant="ButtonVariant.Outline">Book Again</dui-button>
    </dui-button-group>
    <dui-button-group>
        <dui-button variant="ButtonVariant.Outline">
            <dui-icon name="mail"/>
            Email Hotel
        </dui-button>
    </dui-button-group>
</dui-button-group>

Usage

<dui-button-group>
    <dui-button>...</dui-button>
    <dui-button>...</dui-button>
</dui-button-group>

Examples

Basic

<dui-button-group>
    <dui-button variant="ButtonVariant.Outline">
        Button
    </dui-button>
    <dui-button variant="ButtonVariant.Outline">
        Another Button
    </dui-button>
</dui-button-group>

Sizes

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

<dui-button-group>
    <dui-button variant="ButtonVariant.Outline" size="ButtonSize.Small">Small</dui-button>
    <dui-button variant="ButtonVariant.Outline" size="ButtonSize.Small">Button</dui-button>
    <dui-button variant="ButtonVariant.Outline" size="ButtonSize.Small">Group</dui-button>
    <dui-button variant="ButtonVariant.Outline" size="ButtonSize.IconSmall">
        <dui-icon name="plus"/>
    </dui-button>
</dui-button-group>
<dui-button-group>
    <dui-button variant="ButtonVariant.Outline" size="ButtonSize.Default">Default</dui-button>
    <dui-button variant="ButtonVariant.Outline" size="ButtonSize.Default">Button</dui-button>
    <dui-button variant="ButtonVariant.Outline" size="ButtonSize.Default">Group</dui-button>
    <dui-button variant="ButtonVariant.Outline" size="ButtonSize.Icon">
        <dui-icon name="plus"/>
    </dui-button>
</dui-button-group>
<dui-button-group>
    <dui-button variant="ButtonVariant.Outline" size="ButtonSize.Large">Large</dui-button>
    <dui-button variant="ButtonVariant.Outline" size="ButtonSize.Large">Button</dui-button>
    <dui-button variant="ButtonVariant.Outline" size="ButtonSize.Large">Group</dui-button>
    <dui-button variant="ButtonVariant.Outline" size="ButtonSize.IconLarge">
        <dui-icon name="plus"/>
    </dui-button>
</dui-button-group>

Separator

When using button variants without a border (such as Default or Secondary), you can add a separator to visually separate buttons.

<dui-button-group>
    <dui-button variant="ButtonVariant.Default">Review</dui-button>
    <dui-button-group-separator/>
    <dui-button variant="ButtonVariant.Default">Book Again</dui-button>
</dui-button-group>
<dui-button-group>
    <dui-button variant="ButtonVariant.Secondary">Review</dui-button>
    <dui-button-group-separator/>
    <dui-button variant="ButtonVariant.Secondary">Book Again</dui-button>
</dui-button-group>

With Input

<div class="flex flex-col gap-4">
    <dui-button-group>
        <dui-button variant="ButtonVariant.Outline">Button</dui-button>
        <dui-input placeholder="Type something here..." />
    </dui-button-group>
    <dui-button-group>
        <dui-input placeholder="Type something here..." />
        <dui-button variant="ButtonVariant.Outline">Button</dui-button>
    </dui-button-group>
</div>

With Text

<div class="flex flex-col gap-4">
    <dui-button-group>
        <dui-button-group-text>Text</dui-button-group-text>
        <dui-button variant="ButtonVariant.Outline">Another Button</dui-button>
    </dui-button-group>
    <dui-button-group>
        <dui-button-group-text as as-child="true">
            <dui-label for="input-text">
                GPU Size    
            </dui-label>
        </dui-button-group-text>
        <dui-input id="input-text" placeholder="Type something here..."/>
    </dui-button-group>
</div>

With Select

<dui-field>
    <dui-label for="amount">Amount</dui-label>
    <dui-button-group>
        <dui-select>
            <option>$</option>
            <option>€</option>
            <option>£</option>
        </dui-select>
        <dui-input id="amount" placeholder="Enter amount to send"/>
        <dui-button variant="ButtonVariant.Outline">
            <dui-icon name="arrow-right"/>
        </dui-button>
    </dui-button-group>
</dui-field>

With Icons

<dui-button-group>
    <dui-button variant="ButtonVariant.Outline">
        <dui-icon name="flip-horizontal"/>
    </dui-button>
    <dui-button variant="ButtonVariant.Outline">
        <dui-icon name="flip-vertical"/>
    </dui-button>
    <dui-button variant="ButtonVariant.Outline">
        <dui-icon name="rotate-cw"/>
    </dui-button>
</dui-button-group>

With Input Group

<dui-input-group>
    <dui-input-group-input placeholder="Type to search..."/>
    <dui-input-group-addon
        align="InputGroupAddOnVariantAlignment.InlineStart"
        class="text-muted-foreground">
        <dui-icon name="search"/>
    </dui-input-group-addon>
</dui-input-group>

With Fields

<dui-field-group class="max-w-[300px]">
    <dui-field>
        <dui-label for="width">Width</dui-label>
        <dui-button-group>
            <dui-input-group>
                <dui-input-group-input id="width"/>
                <dui-input-group-addon class="text-muted-foreground">
                    W
                </dui-input-group-addon>
                <dui-input-group-addon
                    align="InputGroupAddOnVariantAlignment.InlineEnd"
                    class="text-muted-foreground"
                >
                    px
                </dui-input-group-addon>
            </dui-input-group>
            <dui-button variant="ButtonVariant.Outline" size="ButtonSize.Icon">
                <dui-icon name="minus"/>
            </dui-button>
            <dui-button variant="ButtonVariant.Outline" size="ButtonSize.Icon">
                <dui-icon name="plus"/>
            </dui-button>
        </dui-button-group>
    </dui-field>
</dui-field-group>

With Like

<dui-button-group>
    <dui-button variant="ButtonVariant.Outline">
        <dui-icon name="heart"/>
        Like
    </dui-button>
    <dui-button variant="ButtonVariant.Outline" size="ButtonSize.Icon" class="w-12!" as-child="true">
        <span>1.2K</span>
    </dui-button>
</dui-button-group>

With Select and Input

<dui-button-group>
    <dui-select>
        <option>Hours</option>
        <option>Days</option>
        <option>Weeks</option>
    </dui-select>
    <dui-input />
</dui-button-group>

Nested

You can nest button groups to create multiple groupings.

<dui-button-group>
    <dui-button-group>
        <dui-button variant="ButtonVariant.Outline" size="ButtonSize.Icon">
            <dui-icon name="plus"/>
        </dui-button>
    </dui-button-group>
    <dui-button-group>
        <dui-input-group>
            <dui-input-group-input placeholder="Send a message..."/>
            <dui-input-group-addon align="InputGroupAddOnVariantAlignment.InlineEnd">
                <dui-icon name="audio-lines"/>
            </dui-input-group-addon>
        </dui-input-group>
    </dui-button-group>
</dui-button-group>

Pagination

<dui-button-group>
    <dui-button variant="ButtonVariant.Outline" size="ButtonSize.Small">
        <dui-icon name="arrow-left"/>
        Previous
    </dui-button>
    <dui-button variant="ButtonVariant.Outline" size="ButtonSize.Small">
        1
    </dui-button>
    <dui-button variant="ButtonVariant.Outline" size="ButtonSize.Small">
        2
    </dui-button>
    <dui-button variant="ButtonVariant.Outline" size="ButtonSize.Small">
        3
    </dui-button>
    <dui-button variant="ButtonVariant.Outline" size="ButtonSize.Small">
        4
    </dui-button>
    <dui-button variant="ButtonVariant.Outline" size="ButtonSize.Small">
        5
    </dui-button>
    <dui-button variant="ButtonVariant.Outline" size="ButtonSize.Small">
        Next
        <dui-icon name="arrow-right"/>
    </dui-button>
</dui-button-group>

Pagination Split

<dui-button-group>
    <dui-button-group>
        <dui-button variant="ButtonVariant.Outline" size="ButtonSize.Small">
            1
        </dui-button>
        <dui-button variant="ButtonVariant.Outline" size="ButtonSize.Small">
            2
        </dui-button>
        <dui-button variant="ButtonVariant.Outline" size="ButtonSize.Small">
            3
        </dui-button>
        <dui-button variant="ButtonVariant.Outline" size="ButtonSize.Small">
            4
        </dui-button>
        <dui-button variant="ButtonVariant.Outline" size="ButtonSize.Small">
            5
        </dui-button>
    </dui-button-group>
    <dui-button-group>
        <dui-button variant="ButtonVariant.Outline" size="ButtonSize.IconExtraSmall">
            <dui-icon name="arrow-left"/>
        </dui-button>
        <dui-button variant="ButtonVariant.Outline" size="ButtonSize.IconExtraSmall">
            <dui-icon name="arrow-right"/>
        </dui-button>
    </dui-button-group>
</dui-button-group>

Vertical

Use the orientation property to switch to a vertical layout.

<dui-button-group orientation="ButtonGroupOrientation.Vertical" aria-label="Media controls" class="h-fit">
    <dui-button variant="ButtonVariant.Outline" size="ButtonSize.Icon">
        <dui-icon name="plus"/>
    </dui-button>
    <dui-button variant="ButtonVariant.Outline" size="ButtonSize.Icon">
        <dui-icon name="minus"/>
    </dui-button>
</dui-button-group>

Vertical Nested

<dui-button-group orientation="ButtonGroupOrientation.Vertical" aria-label="Design tools palette">
    <dui-button-group orientation="ButtonGroupOrientation.Vertical">
        <dui-button variant="ButtonVariant.Outline" size="ButtonSize.Icon">
            <dui-icon name="search" />
        </dui-button>
        <dui-button variant="ButtonVariant.Outline" size="ButtonSize.Icon">
            <dui-icon name="copy" />
        </dui-button>
        <dui-button variant="ButtonVariant.Outline" size="ButtonSize.Icon">
            <dui-icon name="share" />
        </dui-button>
    </dui-button-group>
    <dui-button-group orientation="ButtonGroupOrientation.Vertical">
        <dui-button variant="ButtonVariant.Outline" size="ButtonSize.Icon">
            <dui-icon name="flip-horizontal" />
        </dui-button>
        <dui-button variant="ButtonVariant.Outline" size="ButtonSize.Icon">
            <dui-icon name="flip-vertical" />
        </dui-button>
        <dui-button variant="ButtonVariant.Outline" size="ButtonSize.Icon">
            <dui-icon name="rotate-cw" />
        </dui-button>
    </dui-button-group>
    <dui-button-group>
        <dui-button variant="ButtonVariant.Outline" size="ButtonSize.Icon">
            <dui-icon name="trash" />
        </dui-button>
    </dui-button-group>
</dui-button-group>

Button

Previous Page

Checkbox

Capture boolean input from user

On this page

UsageExamplesBasicSizesSeparatorWith InputWith TextWith SelectWith IconsWith Input GroupWith FieldsWith LikeWith Select and InputNestedPaginationPagination SplitVerticalVertical Nested