Button Group
<ahi-button-group> | AhiButtonGroup
Button group displays multiple related actions in a horizontal row to help with arrangement and spacing.
The default button group is used to emphasize several buttons as a thematically-related set among other controls.
<ahi-button-group label="Formatting">
<ahi-button>Bold</ahi-button>
<ahi-button>Italic</ahi-button>
<ahi-button>Underline</ahi-button>
</ahi-button-group>
Examples
Variants
Variants are supported through the button’s variant attribute.
<ahi-button-group label="Formatting">
<ahi-button variant="default">Bold</ahi-button>
<ahi-button variant="default">Italic</ahi-button>
<ahi-button variant="default">Underline</ahi-button>
</ahi-button-group>
<br /><br />
<ahi-button-group label="Formatting">
<ahi-button variant="primary">Bold</ahi-button>
<ahi-button variant="primary">Italic</ahi-button>
<ahi-button variant="primary">Underline</ahi-button>
</ahi-button-group>
<br /><br />
<ahi-button-group label="Formatting">
<ahi-button variant="destructive">Bold</ahi-button>
<ahi-button variant="destructive">Italic</ahi-button>
<ahi-button variant="destructive">Underline</ahi-button>
</ahi-button-group>
Dropdowns
Dropdowns can be placed inside button groups as long as the trigger is an
<ahi-button> element.
<ahi-button-group label="Example Button Group">
<ahi-button>Button</ahi-button>
<ahi-button>Button</ahi-button>
<ahi-dropdown>
<ahi-button slot="trigger" disclosure>Dropdown</ahi-button>
<ahi-menu>
<ahi-menu-item>Item 1</ahi-menu-item>
<ahi-menu-item>Item 2</ahi-menu-item>
<ahi-menu-item>Item 3</ahi-menu-item>
</ahi-menu>
</ahi-dropdown>
</ahi-button-group>
Split buttons
Create a split button using a button and a dropdown. Use a visually hidden label to ensure the dropdown is accessible to users with assistive devices.
<ahi-button-group label="Example Button Group">
<ahi-button variant="primary">Save</ahi-button>
<ahi-dropdown placement="bottom-end">
<ahi-button slot="trigger" variant="primary" disclosure>
<span class="ahi-visually-hidden">More options</span>
</ahi-button>
<ahi-menu>
<ahi-menu-item>Save</ahi-menu-item>
<ahi-menu-item>Save as…</ahi-menu-item>
<ahi-menu-item>Save all</ahi-menu-item>
</ahi-menu>
</ahi-dropdown>
</ahi-button-group>
Tooltips
Buttons can be wrapped in tooltips to provide more detail when the user interacts with them.
<ahi-button-group label="Example Button Group">
<ahi-tooltip content="I'm on the left">
<ahi-button>Left</ahi-button>
</ahi-tooltip>
<ahi-tooltip content="I'm in the middle">
<ahi-button>Center</ahi-button>
</ahi-tooltip>
<ahi-tooltip content="I'm on the right">
<ahi-button>Right</ahi-button>
</ahi-tooltip>
</ahi-button-group>
Toolbar
Create interactive toolbars with button groups.
<div class="button-group-toolbar">
<ahi-button-group label="History">
<ahi-tooltip content="Undo">
<ahi-button>
<ahi-icon name="arrow-back-up" label="Undo" size="minor"></ahi-icon>
</ahi-button>
</ahi-tooltip>
<ahi-tooltip content="Redo">
<ahi-button>
<ahi-icon name="arrow-forward-up" label="Redo" size="minor"></ahi-icon>
</ahi-button>
</ahi-tooltip>
</ahi-button-group>
<ahi-button-group label="Formatting">
<ahi-tooltip content="Bold">
<ahi-button>
<ahi-icon name="bold" label="Bold" size="minor"></ahi-icon>
</ahi-button>
</ahi-tooltip>
<ahi-tooltip content="Italic">
<ahi-button>
<ahi-icon name="italic" label="Italic" size="minor"></ahi-icon>
</ahi-button>
</ahi-tooltip>
<ahi-tooltip content="Underline">
<ahi-button>
<ahi-icon name="underline" label="Underline" size="minor"></ahi-icon>
</ahi-button>
</ahi-tooltip>
</ahi-button-group>
<ahi-button-group label="Alignment">
<ahi-tooltip content="Align Left">
<ahi-button>
<ahi-icon name="align-left" label="Align Left" size="minor"></ahi-icon>
</ahi-button>
</ahi-tooltip>
<ahi-tooltip content="Align Center">
<ahi-button>
<ahi-icon name="align-center" label="Align Center" size="minor"></ahi-icon>
</ahi-button>
</ahi-tooltip>
<ahi-tooltip content="Align Right">
<ahi-button>
<ahi-icon name="align-right" label="Align Right" size="minor"></ahi-icon>
</ahi-button>
</ahi-tooltip>
</ahi-button-group>
</div>
<style>
.button-group-toolbar ahi-button-group:not(:last-of-type) {
margin-right: var(--ahi-space-2);
}
</style>
Importing
To import this component using a script tag:
<script type="module" src="/path/to/azalea-kit-ui/dist/components/button-group/button-group.js"></script>To import this component using a bundler:
import '@azaleahealth/azalea-kit-ui/dist/components/button-group/button-group.js';Slots
| Name | Description |
|---|---|
| (default) | One or more <ahi-button> elements to display in the button group. |
Learn more about using slots.
Properties
| Name | Description | Type | Default | |
|---|---|---|---|---|
label
|
A label to use for the button group. This won’t be displayed on the screen, but it will be announced by assistive devices when interacting with the control and is strongly recommended. |
string
|
''
|
|
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about properties and attributes.
CSS Parts
| Name | Description |
|---|---|
base |
Deprecated. Use the button-group part instead. |
button-group |
The component’s outer wrapper. |
Learn more about customizing CSS parts.