Theme: Light | Lightest | Dark | Darkest Scale: Medium | Large

Button Group

Usage notes

Button groups are used to perform an action or mark a selection e.g. for task-based options within a workflow.

Default


        <coral-buttongroup>
          <button is="coral-button" icon="add" title="Add">Add</button>
          <button is="coral-button" icon="camera" title="Camera" aria-label="Camera"></button>
          <button is="coral-button" icon="undo" title="Undo">Undo</button>
        </coral-buttongroup>

Single select

Toggle markup


        <coral-buttongroup selectionmode="single">
          <button is="coral-button" icon="add" value="add" title="Add" aria-label="Add"></button>
          <button is="coral-button" icon="camera" selected="" value="camera" title="Camera" aria-label="Camera"></button>
          <button is="coral-button" icon="undo" value="undo" title="Undo" aria-label="Undo"></button>
        </coral-buttongroup>

Multi select

Toggle markup


        <coral-buttongroup selectionmode="multiple">
          <button is="coral-button" icon="add" selected="" value="add" title="Add" aria-label="Add"></button>
          <button is="coral-button" icon="camera" value="camera" title="Camera" aria-label="Camera"></button>
          <button is="coral-button" icon="undo" selected="" value="undo" title="Undo" aria-label="Undo"></button>
        </coral-buttongroup>

Read only

Toggle markup


        <coral-buttongroup readonly="" selectionmode="single">
          <button is="coral-button" icon="add" title="Add" aria-label="Add"></button>
          <button is="coral-button" icon="camera" selected="" title="Camera" aria-label="Camera"></button>
          <button is="coral-button" icon="undo" title="Undo" aria-label="Undo"></button>
        </coral-buttongroup>

Disabled

Toggle markup


        <coral-buttongroup disabled="" selectionmode="single">
          <button is="coral-button" icon="add" title="Add">Add</button>
          <button is="coral-button" selected="" icon="camera" title="Camera">Camera</button>
          <button is="coral-button" icon="undo" title="Undo">Undo</button>
        </coral-buttongroup>

From JavaScript

Toggle markup


        <div id="jsexample"></div>
        <script>
          window.addEventListener('load', function() {
            var buttonGroupFromJS = document.createElement('coral-buttongroup');
            buttonGroupFromJS.setAttribute('selectionmode', 'single');

            var button1 = document.createElement('button', {is:'coral-button'});
            button1.setAttribute('icon', 'add');
            button1.setAttribute('variant', 'secondary');
            button1.setAttribute('title', 'Add');
            button1.setAttribute('aria-label', 'Add');
            buttonGroupFromJS.appendChild(button1);

            var button2 = document.createElement('button', {is:'coral-button'});
            button2.setAttribute('icon', 'delete');
            button2.setAttribute('variant', 'secondary');
            button2.setAttribute('title', 'Delete');
            button2.setAttribute('aria-label', 'Delete');
            buttonGroupFromJS.appendChild(button2);

            document.getElementById('jsexample').appendChild(buttonGroupFromJS);
          });
        </script>