Tool Bar

<tpg-tool-bar></tpg-tool-bar>

The primary function of the Tool Bar is to provide a set of filtering options to the user while displaying a list of items on the same screen. This helps the user to quickly get a sense of what data is available and enables them to refine their search without having to navigate to a separate page.

Filter bars typically display a set of dropdown menus that allow users to narrow down their search criteria based on the properties of the data set. These dropdown menus can be populated based on the data’s attributes such as its category, location, date or alphabetical order.

The default slot is typically used with a badge, quaternary button or text and badge.

Examples

Component

Header label

Vanilla JS

  <tpg-tool-bar>
    <tpg-badge
      type="neutral"
      label="Header label"
      size="md"
      emphasis="no-background"
      style="padding-left: var(--barsToolBarSpacingContentLeadingBadgeLeftPadding); gap: var(--barsToolBarSpacingContentLeadingBadgeItemSpacing);"
    ></tpg-badge>
    <tpg-quaternary-button
      id="sort"
      slot="trailing-content"
      label="Sort"
      size="small"
    ></tpg-quaternary-button>
    <tpg-quaternary-button
      id="filter"
      slot="trailing-content"
      label="Filter"
      size="small"
    ></tpg-quaternary-button>
    <tpg-quaternary-button
      id="multisel"
      slot="trailing-content"
      label="Multisel"
      size="small"
    ></tpg-quaternary-button>
    <tpg-menu-item slot="menu" label="Label 1"></tpg-menu-item>
    <tpg-menu-item slot="menu" label="Label 2"></tpg-menu-item>
    <tpg-menu-item slot="menu" label="Label 3"></tpg-menu-item>
    <tpg-menu-item slot="menu" label="Label 4"></tpg-menu-item>
    <tpg-menu-item slot="menu" label="Label 5"></tpg-menu-item>
  </tpg-tool-bar>
  <script>
    document.addEventListener('DOMContentLoaded', ()=>{
      const sort = document.getElementById('sort');
      sort.iconTemplate = tpgIconSort;
      const sort = document.querySelector('filter');
      filter.iconTemplate = tpgIconFilterAlt;
      const sort = document.querySelector('multisel');
      multisel.iconTemplate = tpgIconLibraryAddCheck;
    });
  </script>

React

  <tpg-tool-bar>
    <tpg-badge
      type="neutral"
      label="Header label"
      size="md"
      emphasis="no-background"
      style="padding-left: var(--barsToolBarSpacingContentLeadingBadgeLeftPadding); gap: var(--barsToolBarSpacingContentLeadingBadgeItemSpacing);"
    ></tpg-badge>
    <tpg-quaternary-button
      slot="trailing-content"
      label="Sort"
      size="small"
      icon-template={tpgIconSort}
    ></tpg-quaternary-button>
    <tpg-quaternary-button
      slot="trailing-content"
      label="Filter"
      size="small"
      icon-template={tpgIconFilterAlt}
    ></tpg-quaternary-button>
    <tpg-quaternary-button
      slot="trailing-content"
      label="Multisel"
      size="small"
      icon-template={tpgIconLibraryAddCheck}
    ></tpg-quaternary-button>
    <tpg-menu-item slot="menu" label="Label 1"></tpg-menu-item>
    <tpg-menu-item slot="menu" label="Label 2"></tpg-menu-item>
    <tpg-menu-item slot="menu" label="Label 3"></tpg-menu-item>
    <tpg-menu-item slot="menu" label="Label 4"></tpg-menu-item>
    <tpg-menu-item slot="menu" label="Label 5"></tpg-menu-item>
  </tpg-tool-bar>

Tables

Properties

Attribute	Property	Description	Type	Default Value
type	type	Handles which variant to render.	ToolBarType	'badge'

Events

Event name	Reactjs attribute	Description
tpg-select-event	ontpg-select-event	Triggered when user selects an element in the menu.

Functions

Name	Description	Arguments
No functions found.

Slots

Name	Description
	Default slot reserved for badge, quatenrary button or text and badge
trailing-content	Slot reserved for trailing content
menu	Slot reserved for a tpg-menu-item.

CSS Parts

Attribute	Description
No CSS parts found.

Sandbox