Button Group
Group multiple buttons together on a single line using a button group.
Basic Example
You can group a series of <i-button>
components inside a <i-button-group>
to display them inline, conveying additional meaning.
Size Variants
You’re able to use the size
modifier to control the size of your button group, using one of the available sizes: sm
, md
, and lg
. The default size is set to md
.
Block Variant
You can create block button groups that span the full width of a parent by adding the block
property.
Vertical Basic Example
Using the 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 md
.
Vertical Block
Just like horizontal block button groups, you can also set vertical button groups to span full width of its parent by adding the block
property.
Nested
When placing a <i-button-group>
inside another <i-button-group>
, you’ll get a mixed series of buttons that will render seamlessly.
Nested Block
You can also nest block
button groups.
Disabled
You can make button groups look inactive or disabled by adding the disabled
boolean property.
Configuration
Props
Use props to modify the component’s design and behavior.
- Property
vertical
TypeBoolean
Defaultfalse
Description Display the button group with vertical orientation - Property
block
TypeBoolean
Defaultfalse
Description Display the button group as a block, spanning the full container width - Property
disabled
TypeBoolean
Defaultfalse
Description The disabled state of the button group
Slots
Use slots to insert custom content into well-defined component locations.
- Property
default
Description Slot for default button group content