# Button group 1.0.7+ | 1.1.2+

# Basic usage

<div class="tc-clib-buttonGroup">
	<xf:button>Button 1</xf:button>
	<xf:button>Button 2</xf:button>
	<xf:button>Button 3</xf:button>
</div>

Basic usage
Basic usage

# Full width display

<div class="tc-clib-buttonGroup tc-clib-buttonGroup--fullWidth">
	<xf:button>Button 1</xf:button>
	<xf:button>Button 2</xf:button>
	<xf:button>Button 3</xf:button>
</div>

Full width display
Full width display

# Full width display with padding between buttons

<div class="tc-clib-buttonGroup tc-clib-buttonGroup--fullWidth tc-clib-buttonGroup--fullWidth--padded">
	<xf:button>Button 1</xf:button>
	<xf:button>Button 2</xf:button>
	<xf:button>Button 3</xf:button>
</div>

Full width display with padding between buttons
Full width display with padding between buttons

# Border rounding

<div class="tc-clib-buttonGroup tc-clib-buttonGroup--fullWidth tc-clib-buttonGroup--rounded">
	<xf:button>Button 1</xf:button>
	<xf:button>Button 2</xf:button>
	<xf:button>Button 3</xf:button>
</div>

Border rounding
Border rounding

# Hidden button

<div class="tc-clib-buttonGroup">
	<xf:button class="is-hidden">Button 1</xf:button>
	<xf:button>Button 2</xf:button>
	<xf:button>Button 3</xf:button>
</div>