Skip to table of contents Button Group
<pc-button-group> 0.3.0 experimental Button groups can be used to group related buttons into groups.
<pc-button-group label="Alignment">
<pc-button>Left</pc-button>
<pc-button>Centre</pc-button>
<pc-button>Right</pc-button>
</pc-button-group>
All button sizes are supported, but avoid mixing sizes within the same button group.
<pc-button-group label="Alignment">
<pc-button size="small">Left</pc-button>
<pc-button size="small">Centre</pc-button>
<pc-button size="small">Right</pc-button>
</pc-button-group>
<br />
<br />
<pc-button-group label="Alignment">
<pc-button size="medium">Left</pc-button>
<pc-button size="medium">Centre</pc-button>
<pc-button size="medium">Right</pc-button>
</pc-button-group>
<br />
<br />
<pc-button-group label="Alignment">
<pc-button size="large">Left</pc-button>
<pc-button size="large">Centre</pc-button>
<pc-button size="large">Right</pc-button>
</pc-button-group>
Themed buttons are supported through the button’s appearance attribute.
<pc-button-group label="Alignment">
<pc-button appearance="neutral">Left</pc-button>
<pc-button appearance="neutral">Centre</pc-button>
<pc-button appearance="neutral">Right</pc-button>
</pc-button-group>
<br />
<br />
<pc-button-group label="Alignment">
<pc-button appearance="primary">Left</pc-button>
<pc-button appearance="primary">Centre</pc-button>
<pc-button appearance="primary">Right</pc-button>
</pc-button-group>
<br />
<br />
<pc-button-group label="Alignment">
<pc-button appearance="success">Left</pc-button>
<pc-button appearance="success">Centre</pc-button>
<pc-button appearance="success">Right</pc-button>
</pc-button-group>
<br />
<br />
<pc-button-group label="Alignment">
<pc-button appearance="warning">Left</pc-button>
<pc-button appearance="warning">Centre</pc-button>
<pc-button appearance="warning">Right</pc-button>
</pc-button-group>
<br />
<br />
<pc-button-group label="Alignment">
<pc-button appearance="danger">Left</pc-button>
<pc-button appearance="danger">Centre</pc-button>
<pc-button appearance="danger">Right</pc-button>
</pc-button-group>
Pill‐shaped buttons are supported through the button’s pill attribute.
<pc-button-group label="Alignment">
<pc-button size="small" pill>Left</pc-button>
<pc-button size="small" pill>Centre</pc-button>
<pc-button size="small" pill>Right</pc-button>
</pc-button-group>
<br />
<br />
<pc-button-group label="Alignment">
<pc-button size="medium" pill>
Left
</pc-button>
<pc-button size="medium" pill>
Centre
</pc-button>
<pc-button size="medium" pill>
Right
</pc-button>
</pc-button-group>
<br />
<br />
<pc-button-group label="Alignment">
<pc-button size="large" pill>Left</pc-button>
<pc-button size="large" pill>Centre</pc-button>
<pc-button size="large" pill>Right</pc-button>
</pc-button-group>
Dropdowns can be placed inside button groups as long as the trigger is a <pc-button> element.
<pc-button-group label="Example button group">
<pc-button>Left</pc-button>
<pc-button>Centre</pc-button>
<pc-dropdown>
<pc-button slot="trigger">
Right
<pc-icon
library="default"
icon-style="solid"
name="chevron-down"
slot="suffix"
></pc-icon>
</pc-button>
<pc-dropdown-item>Item 1</pc-dropdown-item>
<pc-dropdown-item>Item 2</pc-dropdown-item>
<pc-dropdown-item>Item 3</pc-dropdown-item>
</pc-dropdown>
</pc-button-group>
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.
<pc-button-group label="Example button group">
<pc-button appearance="primary">Save</pc-button>
<pc-dropdown placement="bottom-end">
<pc-button appearance="primary" slot="trigger">
<span class="pc-visually-hidden">More options</span>
<pc-icon
library="default"
icon-style="solid"
name="chevron-down"
></pc-icon>
</pc-button>
<pc-dropdown-item>Save</pc-dropdown-item>
<pc-dropdown-item>Save as…</pc-dropdown-item>
<pc-dropdown-item>Save all</pc-dropdown-item>
</pc-dropdown>
</pc-button-group>
Buttons can be wrapped in tooltips to provide more detail when the user interacts with them.
<pc-button-group label="Alignment">
<pc-tooltip content="I’m on the left!">
<pc-button>Left</pc-button>
</pc-tooltip>
<pc-tooltip content="I’m in the centre!">
<pc-button>Centre</pc-button>
</pc-tooltip>
<pc-tooltip content="I’m on the right!">
<pc-button>Right</pc-button>
</pc-tooltip>
</pc-button-group>
Create interactive toolbars with button groups.
<div class="button-group-toolbar">
<pc-button-group label="History">
<pc-tooltip content="Undo">
<pc-button>
<pc-icon
library="default"
icon-style="solid"
name="arrow-rotate-left"
label="Undo"
></pc-icon>
</pc-button>
</pc-tooltip>
<pc-tooltip content="Redo">
<pc-button>
<pc-icon
library="default"
icon-style="solid"
name="arrow-rotate-right"
label="Redo"
></pc-icon>
</pc-button>
</pc-tooltip>
</pc-button-group>
<pc-button-group label="Formatting">
<pc-tooltip content="Bold">
<pc-button>
<pc-icon
library="default"
icon-style="solid"
name="bold"
label="Bold"
></pc-icon>
</pc-button>
</pc-tooltip>
<pc-tooltip content="Italic">
<pc-button>
<pc-icon
library="default"
icon-style="solid"
name="italic"
label="Italic"
></pc-icon>
</pc-button>
</pc-tooltip>
<pc-tooltip content="Underline">
<pc-button>
<pc-icon
library="default"
icon-style="solid"
name="underline"
label="Underline"
></pc-icon>
</pc-button>
</pc-tooltip>
</pc-button-group>
<pc-button-group label="Alignment">
<pc-tooltip content="Align left">
<pc-button>
<pc-icon
library="default"
icon-style="solid"
name="align-left"
label="Align left"
></pc-icon>
</pc-button>
</pc-tooltip>
<pc-tooltip content="Align centre">
<pc-button>
<pc-icon
library="default"
icon-style="solid"
name="align-center"
label="Align centre"
></pc-icon>
</pc-button>
</pc-tooltip>
<pc-tooltip content="Align right">
<pc-button>
<pc-icon
library="default"
icon-style="solid"
name="align-right"
label="Align right"
></pc-icon>
</pc-button>
</pc-tooltip>
</pc-button-group>
</div>
<style>
.button-group-toolbar pc-button-group:not(:last-of-type) {
margin-inline-end: var(--pc-spacing-xs);
}
</style>
| Name | Description | Reflects | 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 highly recommended.
Type: string |
| "" |
updateComplete |
A read‐only promise that resolves when
the component has
finished updating.
| | ‐ |
Learn more about customising animations.
| Name | Description |
|---|
| (default) | One or more <pc-button> elements to display in the button group. |
Learn more about using slots.
If you’re using the autoloader or the standard loader,
you can skip this section. But if you’re cherry picking,
you can use any of the following snippets to import this component.
CDN (script tag)CDN (import)npm (import)
To manually import this component from the CDN,
copy this code snippet and paste it in your HTML.
<script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/button-group/button-group.js"></script>
To manually import this component from the CDN, copy
this code snippet and paste it in your JavaScript file.
import "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/button-group/button-group.js";
To manually import this component from npm, copy this
code snippet and paste it in your JavaScript file.
import "placer-toolkit/dist/components/button-group/button-group.js";