Skip to main content

Button group

Supported products
  • Central CMS
  • Central Forms
  • Central Connect

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

tip

If you’re creating button groups within a form you may find the form button group components more suited to your needs

Basic usage

{{
html.button_group({
'buttons': [
html.button({ 'label': 'Alpha' }),
html.button({ 'label': 'Bravo' }),
html.button({ 'label': 'Charlie' })
]
})
}}

Twig helper options

You can configure this helper using the common helper options, the following options are specific to this helper.

OptionTypeDescription
buttonsarrayAn array of button elements

Icon-only buttons

For assistive technology, you must make sure your icons have their own labels which will be announced when the button receives focus.

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