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') })
]
})
}}
See the Pen docs - html - button group with icons by Pulsar (@pulsar) on CodePen.