Button Group

<quiet-button-group>

stable

since 1.0

Button groups display related buttons in a stylized group.

<quiet-button-group>
  <quiet-button>
    <quiet-icon slot="start" name="plus"></quiet-icon>
    New
  </quiet-button>
  <quiet-button>
    <quiet-icon slot="start" name="folder-open"></quiet-icon>
    Open
  </quiet-button>
  <quiet-button>
    <quiet-icon slot="start" name="device-floppy"></quiet-icon>
    Save
  </quiet-button>
  <quiet-button>
    <quiet-icon slot="start" name="printer"></quiet-icon>
    Print
  </quiet-button>
</quiet-button-group>

Button groups work really well in conjunction with the toolbar component.

Examples Jump to heading

With dropdowns Jump to heading

You can nest dropdowns inside button groups to give users additional options.

              
                  Details
                
                  Comments
                
                    Download
                  
                  Small 640×480
                  Medium 800×600
                  Large 1280×1024
                  
                  Custom…

<quiet-button-group label="Options">
  <quiet-button>
    <quiet-icon slot="start" name="photo"></quiet-icon>
    Details
  </quiet-button>
  <quiet-button>
    <quiet-icon slot="start" name="message-circle"></quiet-icon>
    Comments
  </quiet-button>
  <quiet-dropdown>
    <quiet-button slot="trigger" with-caret>
      <quiet-icon slot="start" name="download"></quiet-icon>
      Download
    </quiet-button>
    <quiet-dropdown-item value="sm">Small <span slot="details">640&times;480</span></quiet-dropdown-item>
    <quiet-dropdown-item value="md">Medium <span slot="details">800&times;600</span></quiet-dropdown-item>
    <quiet-dropdown-item value="lg">Large <span slot="details">1280&times;1024</span></quiet-dropdown-item>
    <quiet-divider></quiet-divider>
    <quiet-dropdown-item value="og">Custom…</quiet-dropdown-item>
  </quiet-dropdown>  
</quiet-button-group>

Adding tooltips Jump to heading

You can add tooltips to improve the user experience of your button groups.

              
              Details
              Comments
              Download

<quiet-button-group label="Options">
  <quiet-button icon-label="View image details" id="button-group__tooltip-image">
    <quiet-icon name="photo"></quiet-icon>
  </quiet-button>
  <quiet-button icon-label="Leave a comment" id="button-group__tooltip-comments">
    <quiet-icon name="message-circle"></quiet-icon>
  </quiet-button>
  <quiet-button icon-label="Save this image" id="button-group__tooltip-download">
    <quiet-icon name="download"></quiet-icon>
  </quiet-button>
</quiet-button-group>

<quiet-tooltip for="button-group__tooltip-image">Details</quiet-tooltip>
<quiet-tooltip for="button-group__tooltip-comments">Comments</quiet-tooltip>
<quiet-tooltip for="button-group__tooltip-download">Download</quiet-tooltip>

Vertical button groups Jump to heading

To make a vertical button group, set the orientation attribute to vertical.

<quiet-button-group orientation="vertical" label="Options" style="max-width: 60px;">
  <quiet-button>
    <quiet-icon slot="start" name="plus"></quiet-icon>
    New
  </quiet-button>
  <quiet-button>
    <quiet-icon slot="start" name="folder-open"></quiet-icon>
    Open
  </quiet-button>
  <quiet-button>
    <quiet-icon slot="start" name="device-floppy"></quiet-icon>
    Save
  </quiet-button>
  <quiet-button>
    <quiet-icon slot="start" name="printer"></quiet-icon>
    Print
  </quiet-button>
</quiet-button-group>

Making a split button Jump to heading

Create a split button by placing a button and a dropdown inside a button group.

              
                  Share
                
                  Share with cats
                  Share with dogs
                  
                  Copy URL
                  Copy embed code

<quiet-button-group label="Options">
  <quiet-button>
    <quiet-icon name="share-2" slot="start"></quiet-icon>
    Share
  </quiet-button>
  <quiet-dropdown placement="bottom-end">
    <quiet-button slot="trigger" icon-label="Save options" with-caret></quiet-button>
    <quiet-dropdown-item value="cats">Share with cats</quiet-dropdown-item>
    <quiet-dropdown-item value="dogs" disabled>Share with dogs</quiet-dropdown-item>
    <quiet-divider></quiet-divider>
    <quiet-dropdown-item value="url">Copy URL</quiet-dropdown-item>
    <quiet-dropdown-item value="embed">Copy embed code</quiet-dropdown-item>
  </quiet-dropdown>  
</quiet-button-group>

API Jump to heading

Importing Jump to heading

The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.

CDN

npm

To manually import <quiet-button-group> from the CDN, use the following code.

import 'https://cdn.jsdelivr.net/npm/@quietui/quiet@1.0.0/dist/components/button-group/button-group.js';

To manually import <quiet-button-group> from npm, use the following code.

import '@quietui/quiet/dist/components/button-group/button-group.js';

Slots Jump to heading

Button Group supports the following slots. Learn more about using slots

Name	Description
(default)	One or more `<quiet-button>` elements to place in the button group.

Button Group has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties

Property / Attribute	Description	Reflects	Type	Default
`label`	An accessible label for the tab list. This won't be shown, but it will be read to assistive devices so it's usually a good idea to include one.		`string`	`''`
`orientation`	The button group's orientation.		`'horizontal' 'vertical'`	`'horizontal'`

Button Group

Examples Jump to heading #

With dropdowns Jump to heading #

Adding tooltips Jump to heading #

Vertical button groups Jump to heading #

Making a split button Jump to heading #

API Jump to heading #

Importing Jump to heading #

Slots Jump to heading #

Properties Jump to heading #