Toolbar

<quiet-toolbar>

stable

since 1.0

Toolbar turns a collection of buttons and button groups into an accessible toolbar.

Toolbars follows the ARIA APG toolbar pattern for accessibility. A roving tab index is used, meaning users can tab into the control and use the arrow keys to navigate options. A subsequent tab will exit the toolbar.

By grouping related buttons and button groups into toolbars, the number of tab stops in the keyboard interface is reduced, resulting in a more user-friendly experience.

<quiet-toolbar>
  <quiet-button-group>
    <quiet-button icon-label="Undo"><quiet-icon name="arrow-back-up"></quiet-icon></quiet-button>
    <quiet-button icon-label="Redo"><quiet-icon name="arrow-forward-up"></quiet-icon></quiet-button>
  </quiet-button-group>

  <quiet-button-group>
    <quiet-button icon-label="Bold"><quiet-icon name="bold"></quiet-icon></quiet-button>
    <quiet-button icon-label="Italic"><quiet-icon name="italic"></quiet-icon></quiet-button>
    <quiet-button icon-label="Underline"><quiet-icon name="underline"></quiet-icon></quiet-button>
  </quiet-button-group>

  <quiet-button-group>
    <quiet-button icon-label="Align left"><quiet-icon name="align-left"></quiet-icon></quiet-button>
    <quiet-button icon-label="Align center"><quiet-icon name="align-center"></quiet-icon></quiet-button>
    <quiet-button icon-label="Align right"><quiet-icon name="align-right"></quiet-icon></quiet-button>
    <quiet-button icon-label="Justify"><quiet-icon name="align-justified"></quiet-icon></quiet-button>
  </quiet-button-group>
</quiet-toolbar>

Examples Jump to heading

Toolbars with various components Jump to heading

Toolbars can be used with a mixture of buttons, button groups, and dropdowns that have a <quiet-button> trigger. Keyboard users will be able to cycle through all buttons with Left and Right, as expected.

              
                  New
                
                  View
                  Show canvas
                  Show grid
                  Show source
                  
                  Preferences…

<quiet-toolbar>
  <quiet-button variant="primary">
    <quiet-icon slot="start" name="plus"></quiet-icon>
    New
  </quiet-button>

  <quiet-button-group>
    <quiet-button icon-label="Bold"><quiet-icon name="bold"></quiet-icon></quiet-button>
    <quiet-button icon-label="Italic"><quiet-icon name="italic"></quiet-icon></quiet-button>
    <quiet-button icon-label="Underline"><quiet-icon name="underline"></quiet-icon></quiet-button>
  </quiet-button-group>

    <quiet-dropdown id="dropdown__checkboxes">
      <quiet-button slot="trigger" with-caret>View</quiet-button>
      <quiet-dropdown-item type="checkbox" value="canvas" checked>Show canvas</quiet-dropdown-item>
      <quiet-dropdown-item type="checkbox" value="grid" checked>Show grid</quiet-dropdown-item>
      <quiet-dropdown-item type="checkbox" value="source">Show source</quiet-dropdown-item>
      <quiet-divider></quiet-divider>
      <quiet-dropdown-item value="preferences">Preferences…</quiet-dropdown-item>
    </quiet-dropdown>    
  </quiet-button-group>


  <quiet-button icon-label="Print"><quiet-icon name="printer"></quiet-icon></quiet-button>
  <quiet-button icon-label="Share"><quiet-icon name="share-2"></quiet-icon></quiet-button>
</quiet-toolbar>

Vertical toolbars Jump to heading

To make a vertical toolbar, set the orientation attribute to vertical. Keyboard users will be able to use Up and Down instead of Left and Right. Button groups will automatically assume the correct orientation.

<quiet-toolbar orientation="vertical" style="max-width: 60px;">
  <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>
</quiet-toolbar>

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-toolbar> from the CDN, use the following code.

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

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

import '@quietui/quiet/dist/components/toolbar/toolbar.js';

Slots Jump to heading

Toolbar supports the following slots. Learn more about using slots

Name	Description
(default)	A mixture of buttons and/or button groups.

Properties Jump to heading

Toolbar 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
`orientation`	The toolbar's orientation. This changes which arrow keys are used to select adjacent buttons.		`'horizontal' 'vertical'`	`'horizontal'`

Toolbar

Examples Jump to heading #

Toolbars with various components Jump to heading #

Vertical toolbars Jump to heading #

API Jump to heading #

Importing Jump to heading #

Slots Jump to heading #

Properties Jump to heading #