ButtonGroup

Organizes multiple buttons into a single group, either horizontally or vertically aligned.

Features

• Full keyboard navigation
• Can expand one or multiple items

Anatomy

• Root: The root container for the button-group
• Button: The individual button within the button-group

Usage

To create a button-group, use the New function, or alternatively, you can follow the Builder or Functional patterns. Be sure to follow the anatomy defined above.

New function

@buttongroup.New(id string, props *buttongroup.Props)

• id - An unique string identifying the button-group instance.
• props - A pointer to the buttongroup.Props struct that defines the configuration options for the button-group (see below).

import buttongroup "github.com/indaco/hansui/components/button-group"

@buttongroup.New("demo") {
    @buttongroup.Button("Button 1")
    @buttongroup.Divider()
    @buttongroup.Button("Button 2")
}

Builder pattern

The Builder pattern creates an instance using method chaining. The With methods, such as WithColor or WithBorderStyle, are chainable configuration functions that allow you to customize various properties of the component:

@buttongroup.Builder("builder").WithShape("sm").WithVariant("retro").Render() {
    @buttongroup.Button("Button 1")
    @buttongroup.Button("Button 2")
}

Functional pattern

The Functional pattern applies configurations through individual function calls before rendering the button. Like in the Builder pattern, With methods customize the component by setting specific properties:

@buttongroup.Render("functional", buttongroup.WithVariant("brutalist")) {
    @buttongroup.Button("Button 1")
    @buttongroup.Button("Button 2")
}

API Reference

buttongroup.Props

Below is a list of each struct field, along with its type, default value, and allowed values where applicable.

Size

Specifies the size of the buttons in the group.

• type: string
• default: md
• values: xs, sm, md, lg.

Shape

Defines the shape of the buttons in the group.

• type: string
• default: rounded
• values: box, rounded, pill, circle

Enlarged

If true, the buttons in the group will be displayed in an enlarged size.

• type: bool
• default: false

Variant

Specifies the style variant of the button group.

• type: templ.Variant

ButtonProps

Defines the properties for the individual button items within the button group.

• type: *buttongroup.ButtonProps

Attrs

Additional HTML attributes for the accordion element. Allows you to set custom attributes such as data attributes, ARIA roles or others.

• type: templ.Attributes