--- title: "Sorting Bar | GoodBarber's Design System" description: "The Sorting Bar of GoodBarber apps sits above the favorites list, counts the saved items and opens a small menu to sort them by date or by name." canonical_url: "https://www.goodbarber.com/uxdesign/sorting-bar/" lang: es --- # Sorting Bar | GoodBarber's Design System [Design System](https://es.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.f4c520ac8628.svg) [https://es.goodbarber.com/uxdesign/](https://es.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://es.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/) * [Address](/uxdesign/address/) * [Author](/uxdesign/author/) * [Content](/uxdesign/content/) * [DateBullet](/uxdesign/datebullet/) * [Distance](/uxdesign/distance/) * [Duration](/uxdesign/duration/) * [Filter Bar](/uxdesign/filter-bar/) * [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/) * [Premium Sticker](/uxdesign/premium-sticker/) * [Sorting Bar](/uxdesign/sorting-bar/) * [Story Pager](/uxdesign/story-pager/) * [Text](/uxdesign/text/) * [Toast Feedback](/uxdesign/toast-feedback/) * [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/) # Sorting Bar UI Elements The Sorting Bar counts the favorites and lets the user choose their order, with a button that opens a sort menu. [https://portal.ww-cdn.com/portal_static/images/designsystem/videos/sorting-bar.b7d5bd70633b.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/sorting-bar.b7d5bd70633b.mp4) ## Introduction The Sorting Bar is a compact header displayed above the list of the Favorites section. It tells how many items are saved, and it shows the sort in use, with a button that opens a menu to change it. The Sorting Bar can be turned off in the back office. Without it, the list keeps its default order, and the user has no way to change it. ## Anatomy ### The count and the button On the left, the item count is a [Text](/uxdesign/text/) that says how many items are saved, such as "4 saved bookmarks". It follows the filter in use, and reads "2 saved locations" when the list shows only places. On the right, the sort button is a small [Button](/uxdesign/button/) with an [icon](/uxdesign/icons/) and a label that always match the sort applied to the list, Newest, Oldest, A to Z or Z to A. ![The item count and the sort button](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-SortingBar-Anatomy-Parts.4893b70fd4da.png) *The item count and the sort button* ### Spacing The bar follows the gutter of the app. It has [1G](/uxdesign/spacing/) of padding above and on the sides on phones and tablets, no padding on the sides on computers, and 1G between the count and the button. Below, the bar has 1G of padding only when it has a background of its own. Without a background, the bar adds no space below the button. ![1G around the bar, and 1G between the two parts](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-SortingBar-Anatomy-Spacing.1a1a88e95bd7.png) *1G around the bar, and 1G between the two parts* ## Properties ### Background and colors The bar can have a [background](/uxdesign/background/) of its own. By default it is transparent, and the background of the app shows through. The back office sets the color of the count, the color of the sort button and of its text, and, for the menu, its background and the color of its items. ![Transparent, or with a background of its own](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-SortingBar-Properties-Background.e440134cc013.png) *Transparent, or with a background of its own* ## Layout ### Placement The Sorting Bar belongs to the Favorites section. It sits under the [Filter Bar](/uxdesign/filter-bar/) of the section, when there is one, and above the list, whatever its layout. When the list is empty, the bar is not displayed. ![Under the Filter Bar, above the list](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-SortingBar-Layout-Placement.37616a024126.png) *Under the Filter Bar, above the list* ## Behavior ### The sort menu A tap on the button opens the sort menu right under it, aligned with it. The menu lists four orders, Most recently added, Least recently added, A to Z and Z to A, with a check on the one in use. Its items are written in the system font in 14px and follow the gutter, with 1G of padding on the sides, ½G above and below each item, ½G between the check and the label, and 4px between two items. The menu follows the [Shape](/uxdesign/atom-shape/) of the app. ![The sort menu, with a check on the sort in use](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-SortingBar-Behavior-Menu.837c725fdb33.png) *The sort menu, with a check on the sort in use* ### Remembering the choice The default order is set in the back office and is the same for every type of content. When the user picks another order, the app keeps it for that filter, from one session to the next.