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
- Twig
- React
- HTML
{{
html.button_group({
'buttons': [
html.button({ 'label': 'Alpha' }),
html.button({ 'label': 'Bravo' }),
html.button({ 'label': 'Charlie' })
]
})
}}
<ButtonGroup>
<Button>Alpha</Button>
<Button>Bravo</Button>
<Button>Charlie</Button>
</ButtonGroup>
<div className="btn__group">
<button className="btn">Alpha</button>
<button className="btn">Bravo</button>
<button className="btn">Charlie</button>
</div>
Twig helper options
You can configure this helper using the common helper options, the following options are specific to this helper.
Option | Type | Description |
---|---|---|
buttons | array | An 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.
- Twig
- React
- HTML
{{
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'
})
})
]
})
}}
<ButtonGroup>
<Button><i class="icon-align-left"><span class="hide">Text align: left</span></i></Button>
<Button><i class="icon-align-center"><span class="hide">Text align: center</span></i></Button>
<Button><i class="icon-align-right"><span class="hide">Text align: right</span></i></Button>
<Button><i class="icon-align-justify"><span class="hide">Text align: justify</span></i></Button>
</ButtonGroup>
<div class="btn__group">
<button class="btn"><i class="icon-align-left"><span class="hide">Text align: left</span></i></button>
<button class="btn"><i class="icon-align-center"><span class="hide">Text align: center</span></i></button>
<button class="btn"><i class="icon-align-right"><span class="hide">Text align: right</span></i></button>
<button class="btn"><i class="icon-align-justify"><span class="hide">Text align: justify</span></i></button>
</div>