Tool Bar
A Tool Bar contains actionable controls related to the items on the screen or view.
It can be useful to display a filter/sort bar when there are clearly defined or typical categories in which users might want to refine their search. The filter/sort bar is anchored to the bottom of the page and displays the number of results as well as the filter/sort buttons.
Tool Bar used in Hotel Search Results
Tool Bar used when toggling a selection in Expenses
Specs
Font, Color and Usage:
- Background fill: White (#FFFFFF)
- Title: SF UI Text, 16 points
- “Delete” text color: Red (#BF6767)
- Text color: Concur Blue (#0078C8)
- “Results” text color: Medium Gray (#A7B6BF)
- Tool Bar: 44 tall
- Text: 15 padding
- Text Alignment: centerY
Redlines with Tool Bar