Group multiple buttons together on a single line using a button group.
You can group a series of
<i-button> components inside a
<i-button-group> to display them inline, conveying additional meaning.
You’re able to use the
size modifier to control the size of your button group, using one of the available sizes:
lg. The default size is set to
You can create block button groups that span the full width of a parent by adding the
Vertical Basic Example
vertical property, you can stack a set of buttons vertically rather than horizontally.
Vertical Size Variants
Just like horizontal button groups, the size of vertical button groups can also be controlled using the
size modifier. The default size is set to
Just like horizontal block button groups, you can also set vertical button groups to span full width of its parent by adding the
When placing a
<i-button-group> inside another
<i-button-group>, you’ll get a mixed series of buttons that will render seamlessly.
You can also nest
block button groups.
You can make button groups look inactive or disabled by adding the
disabled boolean property.
Use props to modify the component’s design and behavior.
falseDescription Display the button group with vertical orientation
falseDescription Display the button group as a block, spanning the full container width
falseDescription The disabled state of the button group
Use slots to insert custom content into well-defined component locations.
defaultDescription Slot for default button group content