Button Group

Group a series of related buttons together on a single line. Great for creating toolbars.

Example usage

{{
    html.button_group({
        'buttons': [
            html.button({ label: 'foo' }),
            html.button({ label: 'bar' }),
            html.button({ label: 'baz' })
        ]
    })
}}

See the Pen docs - html - button group by Pulsar (@pulsar) on CodePen.

Options

Option Type Description
buttons array An array of html.button() elements
class string Classes to be applied to the button group (not the buttons inside it)
id string A unique identifier, if required
data-* string Data attributes, eg: 'data-foo': 'bar'

Example with icons

{{
    html.button_group({
        buttons: [
            html.button({ label: html.icon('align-left') }),
            html.button({ label: html.icon('align-center') }),
            html.button({ label: html.icon('align-right') }),
            html.button({ label: html.icon('align-justify') })
        ]
    })
}}

results matching ""

    No results matching ""