--- title: "ToolBar | GoodBarber's Design System" description: "The ToolBar element of GoodBarber cells is the row below the content that lines up its metadata and its actions, from the author to the favorite button." canonical_url: "https://www.goodbarber.com/uxdesign/toolbar/" lang: nl --- # ToolBar | GoodBarber's Design System [Design System](https://nl.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.f4c520ac8628.svg) [https://nl.goodbarber.com/uxdesign/](https://nl.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-up.b5a5ae872a5d.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-down.5c1a2eb6da12.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.f4c520ac8628.svg) [Overview](https://nl.goodbarber.com/uxdesign/) - [Foundations](/uxdesign/foundations/) * Layout + [Grid](/uxdesign/grid/) + [Spacing](/uxdesign/spacing/) + [Breakpoints](/uxdesign/breakpoints/) + [Layers](/uxdesign/layers/) * Graphic elements + [Color](/uxdesign/color/) + [Typography](/uxdesign/typography/) + [Images Aspect Ratios](/uxdesign/images-aspect-ratios/) + [Icons](/uxdesign/icons/) - [Atomic Components](/uxdesign/atomic-components/) * [Color atom](/uxdesign/atom-color/) * [Font atom](/uxdesign/atom-font/) * [Image atom](/uxdesign/atom-image/) * [Gradient atom](/uxdesign/atom-gradient/) * [Shape atom](/uxdesign/atom-shape/) * [Shadow atom](/uxdesign/atom-shadow/) * [Size atom](/uxdesign/atom-size/) * [Border atom](/uxdesign/atom-border/) * [Blur atom](/uxdesign/atom-blur/) * [Overlay atom](/uxdesign/atom-overlay/) * [Immersive feedback atom](/uxdesign/atom-immersive-feedback/) - [UI Elements](/uxdesign/ui-elements/) * [Action](/uxdesign/action/) * [Actions Menu](/uxdesign/actions-menu/) * [Author](/uxdesign/author/) * [Content](/uxdesign/content/) * [DateBullet](/uxdesign/datebullet/) * [Distance](/uxdesign/distance/) * [Duration](/uxdesign/duration/) * [Item](/uxdesign/item/) * [Item Icon](/uxdesign/item-icon/) * [Item Indicator](/uxdesign/item-indicator/) * [Item Label](/uxdesign/item-label/) * [Media](/uxdesign/media/) * [Pager](/uxdesign/pager/) * [Play](/uxdesign/play/) * [Player](/uxdesign/player/) * [Text](/uxdesign/text/) * [ToolBar](/uxdesign/toolbar/) * [Widget Header](/uxdesign/widget-header/) - [UI Components](/uxdesign/ui-components/) * [Background](/uxdesign/background/) * [Text Field](/uxdesign/textfield/) * [Dropdown](/uxdesign/dropdown/) * [Date & Time Picker](/uxdesign/date-time-picker/) * [Checkboxes & Radio Button](/uxdesign/checkboxes-radio-button/) * [Button](/uxdesign/button/) * [Thumbnail](/uxdesign/thumbnail/) * [Form](/uxdesign/form/) * [TabBar](/uxdesign/tabbar/) # ToolBar UI Elements The ToolBar is the row below the content of a cell that lines up its metadata and its actions. [https://portal.ww-cdn.com/portal_static/images/designsystem/videos/toolbar.d9d029533af1.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/toolbar.d9d029533af1.mp4) ## Introduction The ToolBar is a structural group, a row that hosts the contextual and interactive elements displayed below the main content of a cell. It gives a consistent layout and spacing to the metadata and the actions related to a piece of content. It can hold five elements, the [Author](/uxdesign/author/), a [Text](/uxdesign/text/), the [Player](/uxdesign/player/), an [Action](/uxdesign/action/) such as the comment or the favorite, and the [Actions Menu](/uxdesign/actions-menu/). Each meta-cell, and each list, decides which of them are shown, and in what order. ## Anatomy ### Two groups on one row The row reads from left to right. On the left come the metadata, the [Author](/uxdesign/author/), alone or followed by a [Text](/uxdesign/text/), or a Text alone, or the [Player](/uxdesign/player/) for a podcast. On the right come the actions, the [Action](/uxdesign/action/) buttons in a row, the [Actions Menu](/uxdesign/actions-menu/) that groups them behind one [icon](/uxdesign/icons/), or nothing at all. These are the actions allowed on the detail page of the content, such as comments, share and favorites. The toolbar of the detail page is another object, and the row of the cell only reflects its choices. ![The metadata on the left, the actions on the right](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-ToolBar-Anatomy-Structure.adbe3bed5e8e.png) *The metadata on the left, the actions on the right* ### The combinations The two groups combine in several ways. The same row can show an [author](/uxdesign/author/) and a [text](/uxdesign/text/) with two [action](/uxdesign/action/) buttons, an author alone with an [Actions Menu](/uxdesign/actions-menu/), or a [player](/uxdesign/player/) with no action at all. The cell and the list make that choice. ![The combinations of the row](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-ToolBar-Anatomy-Combinations.3db2ebc0ed30.png) *The combinations of the row* ## Layout ### Spacing The elements are aligned horizontally, with a fixed spacing that does not change with the device. The [Text](/uxdesign/text/) that follows the [Author](/uxdesign/author/) sits right against it, with no spacing. The metadata start at the edge of the content and can run up to 4px from the first [action](/uxdesign/action/). Two actions sit 12px apart, and the action icons sit in a 20px square. Vertically, the elements are centered on their baseline. ![The fixed spacing of the row](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-ToolBar-Layout-Spacing.474442959c56.png) *The fixed spacing of the row* ### No wrapping The row never wraps. When the metadata runs too long, it is truncated with an ellipsis, and the actions stay visible on the right. ![A row that fits, and a row cut short](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-ToolBar-Layout-Truncation.a9000d00d538.png) *A row that fits, and a row cut short* ### Placement The ToolBar belongs to the meta-cells that display metadata and actions below their content. A compact cell can do without it, and folds its actions into the [Actions Menu](/uxdesign/actions-menu/), next to the title. In a small card, the row keeps the [author](/uxdesign/author/) and folds the actions into the Actions Menu too. What the row shows also depends on the type of content. For a podcast, the [Player](/uxdesign/player/) can take the place of the author. ![In a list cell, a card and an immersive card](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-ToolBar-Layout-Hosts.a28163a47438.png) *In a list cell, a card and an immersive card*