Skip to main content Design tokens Components Style utilities
Skip to table of contents

    Button Group

    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

    Demos

    Sizes

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

    Appearances

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

    Pill shape

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

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

    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.

    Tooltips in button groups

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

    Toolbar with button groups

    Create interactive toolbars with button groups.

    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. 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 ignore this section. If you’re cherry picking, you can use any of the following snippets to import this component.

    ScriptImportBundler

    To import this component from the CDN with a script tag, copy this snippet and paste it in your HTML. 

    <script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@0.5.1/dist/components/button-group/button-group.js"></script>

    To import this component from the CDN using a JavaScript import, copy this snippet and paste it in your JavaScript: 

    import "https://cdn.jsdelivr.net/npm/placer-toolkit@0.5.1/dist/components/button-group/button-group.js";

    To import this component with a bundler using a JavaScript import, copy this snippet and paste it in your JavaScript: 

    import "placer-toolkit/dist/components/button-group/button-group.js";