Toolbar

fiori 3 a11y themeable design in progress

The toolbar enables the user to change the UI or trigger an action. For example, the toolbar allows the user to change views, manipulate data or objects, navigate to another page, perform generic actions, and so on. It is most commonly used to display buttons, labels, selects and various other input controls.

Toolbar types

Solid

The toolbar has a solid background by default.

Title 
  <div class="fd-toolbar fd-toolbar--solid">
    <span>Title</span>
    <button class="fd-button fd-button--compact fd-button--transparent">Action1</button>
    <span class="fd-toolbar__spacer "> </span>
    <button class="fd-button fd-button--compact fd-button--transparent">Action2</button>
    <button class="fd-button fd-button--compact fd-button--transparent">Action3</button>
    <span class="fd-toolbar__separator"></span>
    <button class="fd-button fd-button--compact fd-button--transparent sap-icon--survey"></button>
    <button class="fd-button fd-button--compact fd-button--transparent sap-icon--pool"></button>
    <button class="fd-button fd-button--compact fd-button--transparent sap-icon--pie-chart"></button>
  </div>

Transparent

The toolbar also supports a transparent background which can be achieved by passing transparent to the fd-toolbar class.

  <div class="fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
    <button class="fd-button fd-button--compact fd-button--transparent">Action1</button>
    <button class="fd-button fd-button--compact fd-button--transparent">Action2</button>
    <span class="fd-toolbar__spacer "> </span>
    <button class="fd-button fd-button--compact fd-button--transparent">Action3</button>
    <button class="fd-button fd-button--compact fd-button--transparent">Action4</button>
    <span class="fd-toolbar__separator"></span>
    <button class="fd-button fd-button--compact fd-button--transparent sap-icon--survey"></button>
    <button class="fd-button fd-button--compact fd-button--transparent sap-icon--pool"></button>
    <button class="fd-button fd-button--compact fd-button--transparent sap-icon--pie-chart"></button>
  </div>

Auto

The toolbar can be inserted into other controls and can inherit the design from the parent control by passing auto to the fd-toolbar class.

  <div class="fd-toolbar fd-toolbar--clear fd-toolbar--auto">
    <button class="fd-button fd-button--compact fd-button--transparent">Action</button>
    <button class="fd-button fd-button--compact fd-button--transparent">Action2</button>
    <span class="fd-toolbar__spacer "> </span>
    <button class="fd-button fd-button--compact fd-button--transparent">Action3</button>
    <button class="fd-button fd-button--compact fd-button--transparent">Action4</button>
    <span class="fd-toolbar__separator"></span>
    <button class="fd-button fd-button--compact fd-button--transparent sap-icon--survey"></button>
    <button class="fd-button fd-button--compact fd-button--transparent sap-icon--pool"></button>
    <button class="fd-button fd-button--compact fd-button--transparent sap-icon--pie-chart"></button>
  </div>

Info

The Info toolbar is commonly used to show information (text or icons) and is slightly smaller than the regular toolbar in size. It can be achieved by passing info to the fd-toolbar class. fd-toolbar--active class can be added to have active and hover states.

3 item selected

3 item selected 
  <div class="fd-toolbar fd-toolbar--info">
    3 item selected
  </div>
  <br>
  <div class="fd-toolbar fd-toolbar--info fd-toolbar--active">
    3 item selected
  </div>

Title

The Title toolbar should be used whenever a title needs to be included. It can be achieved by passing title to the fd-toolbar class.

Title

  <div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active">
    <h4 style="margin-bottom:0px;">Title</h4>
    <span class="fd-toolbar__spacer "></span>
    <button class="fd-button fd-button--compact fd-button--transparent">opt1</button>
    <button class="fd-button fd-button--compact fd-button--transparent">opt2</button>
  </div>

Spacer

Spacers can be used to fill any remaining space either automatically or manually within a toolbar.

Auto

To create a spacer that automatically fills the remaining width in the toolbar, pass auto in the fd-toolbar_spacer class.

text text 
  <div class="fd-toolbar fd-toolbar--info fd-toolbar--active">
    <span>text</span>
    <span class="fd-toolbar__spacer "></span>
    <span>text</span>
  </div>

Fixed

To set the width of a spacer manually, pass the desired width using the fixed and style modifiers in the fd-toolbar_spacer class as seen below.

text text 
  <div class="fd-toolbar fd-toolbar--info">
    <span>text</span>
    <span class="fd-toolbar__spacer fd-toolbar__spacer--fixed" style="width:150px;"></span>
    <span>text</span>
  </div>

Separator

Separators should be used to visually separate items from each other.

text text

text text 
  <div class="fd-toolbar fd-toolbar--info">
    <span>text</span>
    <span class="fd-toolbar__separator"></span>
    <span>text</span>
  </div>
  
  <br>
  
  <div class="fd-toolbar fd-toolbar--solid">
    <span>text</span>
    <span class="fd-toolbar__separator"></span>
    <span>text</span>
  </div>

Size

The default size of the toolbar is compact but this can be changed by passing the fd-toolbar--cozy modifier class.

Title 
  <div class="fd-toolbar fd-toolbar--solid fd-toolbar--cozy">
    <span>Title</span>
    <button class="fd-button fd-button--compact fd-button--transparent">Button</button>
    <span class="fd-toolbar__spacer "> </span>
    <button class="fd-button fd-button--compact fd-button--transparent">Button</button>
    <button class="fd-button fd-button--compact fd-button--transparent">Button</button>
    <span class="fd-toolbar__separator"></span>
    <button class="fd-button fd-button--compact fd-button--transparent sap-icon--survey"></button>
    <button class="fd-button fd-button--compact fd-button--transparent sap-icon--pool"></button>
    <button class="fd-button fd-button--compact fd-button--transparent sap-icon--pie-chart"></button>
  </div>

Overflow

The Overflow toolbar can be used to add additional elements when extra space is required. It can be achieved in a popover by passing fd-popover fd-toolbar__overflow or in a button by passing sap-icon--overflow in the fd-button class.

Title 
  <div class="fd-toolbar fd-toolbar--solid fd-toolbar--cozy">
    <span>Title</span>
    <button class="fd-button fd-button--compact fd-button--transparent">Button</button>
    <span class="fd-toolbar__spacer "> </span>
    <button class="fd-button fd-button--compact fd-button--transparent">Button</button>
    <button class="fd-button fd-button--compact fd-button--transparent">Button</button>
    <span class="fd-toolbar__separator"></span>
    <div class="fd-popover fd-toolbar__overflow">
      <div class="fd-popover__control">
        <button class="fd-button fd-button--transparent fd-button--compact sap-icon--overflow"
          aria-controls="wgxzK85912"
          aria-haspopup="true"
          aria-expanded="false"
          aria-label="More"></button>
      </div>
      <div class="fd-popover__body fd-popover__body--right fd-popover__body--no-arrow"
        aria-hidden="true"
        id="wgxzK85912">
        <div class="fd-toolbar__overflow__body">
          <label class="fd-label fd-toolbar__overflow__label">Label</label>
          <button class="fd-button fd-button--compact fd-button--transparent">Edit</button>
          <span class="fd-toolbar__separator"></span>
          <label class="fd-form-label fd-toolbar__overflow__form-label">Form label</label>
          <button class="fd-button fd-button--compact fd-button--negative">Delete</button>
          <span class="fd-toolbar__separator"></span>
          <button class="fd-button fd-button--compact fd-button--sucess">Assign</button>
          <button class="fd-button fd-button--compact fd-button--attention">Exit</button>
        </div>
      </div>
    </div>
  </div>