Skip to content
daisyBlazor

ButtonGroup

A daisyUI join that fuses adjacent buttons into one segmented bar. Each child keeps its own Color, Variant and Size; add join-vertical to stack them.
Cover · <ButtonGroup>

Examples

Basic

Wrap Buttons in a ButtonGroup and their inner corners square off.

website/Examples/Actions/ButtonGroupBasicExample.razor Source

Pagination

Highlight the current item by switching its Color and Variant from state.

website/Examples/Actions/ButtonGroupPagesExample.razor Source

Vertical

Class="join-vertical" stacks the group.

website/Examples/Actions/ButtonGroupVerticalExample.razor Source

API

<ButtonGroup>

DaisyBlazor

Parameters

  • Color Color
    = Color.Default

    Color applied to child buttons when not Default and OverrideStyles is true.

  • OverrideStyles bool
    = true

    When true (default) the group's non-default Variant, Color and Size override those of the child buttons.

  • Size Size
    = Size.Medium

    Size applied to child buttons when not Medium and OverrideStyles is true.

  • Variant Variant
    = Variant.Text

    Variant applied to child buttons when not Text and OverrideStyles is true.

  • Class string
    = null

    Extra CSS classes merged onto the root join element.

  • Style string
    = null

    Inline CSS styles applied to the root join element.

Content

  • ChildContent RenderFragment

    Buttons rendered inside the daisyUI join container.

From MudButtonGroup

ButtonGroup keeps MudButtonGroup's parameter names, so most markup moves over by dropping the Mud prefix. See the migration guide for the shared enums, icons and services.

Variant, Color, Size and OverrideStyles on the group are accepted for source compatibility but ignored: set them on each child Button.

<MudButtonGroup> <ButtonGroup>
Something went wrong while running the docs. Reload