Skip to main content Sidebar
Design tokens Components Layout Style utilities
Privacy Code of Conduct Licence Impressum
© 2025 Placer • Built with Astro

We’d love to hear from you. Please reach out to us with any questions or inquiries 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!
Skip to table of contents

The Placer Toolkit alpha has arrived! 🎉
Plenty of changes are coming your way—some big, some breaking, some even nuclear! Beware the changelog…

Bring it on!

    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>
    Code Edit

    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

    Pill shape#

    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    		 ""
    updateComplete A 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.1/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.1/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";