You can group a series of <IButton> components inside a <IButtonGroup> to display them inline, conveying additional meaning.
<template>
<IButtonGroup>
<IButton>Left</IButton>
<IButton>Middle</IButton>
<IButton>Right</IButton>
</IButtonGroup>
</template>
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.
<template>
<IButtonGroup size="sm">
<IButton>Left</IButton>
<IButton>Middle</IButton>
<IButton>Right</IButton>
</IButtonGroup>
<IButtonGroup size="md">
<IButton>Left</IButton>
<IButton>Middle</IButton>
<IButton>Right</IButton>
</IButtonGroup>
<IButtonGroup size="lg">
<IButton>Left</IButton>
<IButton>Middle</IButton>
<IButton>Right</IButton>
</IButtonGroup>
</template>
You can create block button groups that span the full width of a parent by adding the block property.
<template>
<IButtonGroup block>
<IButton>Left</IButton>
<IButton>Middle</IButton>
<IButton>Right</IButton>
</IButtonGroup>
</template>
Using the vertical property, you can stack a set of buttons vertically rather than horizontally.
<template>
<IButtonGroup vertical>
<IButton>Button 1</IButton>
<IButton>Button 2</IButton>
<IButton>Button 3</IButton>
</IButtonGroup>
</template>
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.
<template>
<IButtonGroup vertical size="sm">
<IButton>Top</IButton>
<IButton>Middle</IButton>
<IButton>Bottom</IButton>
</IButtonGroup>
<IButtonGroup vertical size="md">
<IButton>Top</IButton>
<IButton>Middle</IButton>
<IButton>Bottom</IButton>
</IButtonGroup>
<IButtonGroup vertical size="lg">
<IButton>Top</IButton>
<IButton>Middle</IButton>
<IButton>Bottom</IButton>
</IButtonGroup>
</template>
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.
<template>
<IButtonGroup block vertical>
<IButton>Left</IButton>
<IButton>Middle</IButton>
<IButton>Right</IButton>
</IButtonGroup>
</template>
When placing a <IButtonGroup> inside another <IButtonGroup>, you'll get a mixed series of buttons that will render seamlessly.
<template>
<IButtonGroup>
<IButton>Button 1</IButton>
<IButtonGroup>
<IButton>Button 2</IButton>
<IButton>Button 3</IButton>
</IButtonGroup>
</IButtonGroup>
</template>
You can also nest block button groups.
<template>
<IButtonGroup block>
<IButton>Button 1</IButton>
<IButtonGroup block>
<IButton>Button 2</IButton>
<IButton>Button 3</IButton>
</IButtonGroup>
</IButtonGroup>
</template>
You can make button groups look inactive or disabled by adding the disabled boolean property.
<template>
<IButtonGroup disabled>
<IButton>Left</IButton>
<IButton>Middle</IButton>
<IButton>Right</IButton>
</IButtonGroup>
</template>