Skip to main contentSidebar
On this page

Button Group

<pc-button-group>Since  0.3.0Experimental

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>
CodeEdit

Demos

Sizes

All button sizes are supported, but avoid mixing sizes within the same button group.

Edit

Appearances

Themed buttons are supported through the button’s appearance attribute.

Edit

Vertical

Set the orientation attribute to vertical to make a vertical button group.

Edit

Pill

Pill‐shaped buttons are supported through the button’s pill attribute.

Edit

Dropdowns can be placed inside button groups as long as the trigger is a <pc-button> element.

Edit

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.

Edit

Tooltips in button groups

Buttons can be wrapped in tooltips to provide more detail when the user interacts with them.

Edit

Toolbar with button groups

Create interactive toolbars with button groups.

Edit

Properties

NameDescriptionReflectsDefault
labelA 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		 ""
orientationThe button group’s orientation.
Type: "horizontal" | "vertical"		 "horizontal"
updateCompleteA read‐only promise that resolves when the component has finished updating.‐

Learn more about attributes and properties.

Slots

NameDescription
(default)One or more <pc-button> elements to display in the button group.

Learn more about using slots.

Parts

NameDescription
baseThe component’s base wrapper.

Learn more about customising CSS parts.

Importing

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.6/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.6/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";

We’d love to hear from you. Please reach out to us with any questions or enquiries you may have.

You can contact us via e‐mail at placer.coc.reports+contact@gmail.com.

We look forward to hearing from you!

Got it!Dangerous lands

Whoa! You’ve wandered into the dangerous lands of Placer Toolkit. Version 0 is out of date and doesn’t meet EU privacy standards, including GDPR.

Want the latest powers, security and compliance? Stick with the current version of Placer Toolkit!

Yikes!Power up!

Our site is 100 % cookie‐free! We value your privacy, which is why we don’t store any cookies or personal information related to you.

Your browser history is safe from crumbs, and your data is protected, aligning with modern privacy standards like the GDPR. Enjoy your visit without a single digital cookie in sight! 🍪🚫

View our Privacy Policy for more information.

Got it!