Components/Bar

The Bar is a container primarily used for displaying titles, buttons, and input controls. It serves as the foundational design and functionality for page headers, footers, dialogs, and popovers that require a header and/or footer. A header can consist of just a title or a title with a navigation button (back or home) at the front. A subheader can also be included in the header design. Footers can be either fixed or floating. The buttons in the footer are intended for finalizing actions, following a primary-to-tertiary hierarchy, and should be positioned in the right area. **The bar component has two modes:**

### Header **Use the header bar if:** - Your page contains several controls, and the actions are valid for the entire page. **Do not use the header bar if:** - You have closing or finalizing actions for the whole page. In this case, use a footer instead. ### Footer **Use the footer bar if:** - You have closing or finalizing actions on your page that apply to the whole page. **Do not use the footer bar if:** - You have different containers on your page (such as charts, tables, and forms) and the action influences only certain items. In this case, place the action as close to the corresponding item(s) as possible. - You have global actions (such as *Edit* or *Delete*) that are not finalizing or closing actions. In this case, use a header instead. ### Buttons - Use only icon buttons **or** text buttons. Icon and text should not be combined into one button. - Buttons are sorted by usage i.e. from frequently-used to seldomly-used. - You have closing or finalizing actions for the whole page. In this case, use a footer instead.