---
title: "UI Elements | GoodBarber's Design System"
description: "UI elements are the building blocks of GoodBarber's design system, assembled into the components of the app."
canonical_url: "https://www.goodbarber.com/uxdesign/ui-elements/"
lang: sv
---

# UI Elements | GoodBarber's Design System

[Design System](https://se.goodbarber.com/uxdesign/)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg)

[https://se.goodbarber.com/uxdesign/](https://se.goodbarber.com/uxdesign/)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-up.4b0a6b4e88c8.svg)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-down.e16b9408a703.svg)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg)

[Overview](https://se.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/)
* [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/)
- [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/)

![UI Elements icon](https://portal.ww-cdn.com/portal_static/images/designsystem/tree/icon-ui-elements.991777aa76e8.svg)

# UI Elements

UI elements are the building blocks of our components. Each element combines atoms of the design system to do a single job. Assembled together, elements form the components of the app.

- [An action button with a bookmark icon Action The contextual button to act on a piece of content.](/uxdesign/action/)
- [A date bullet showing a day and a month DateBullet The date of an event, at a glance.](/uxdesign/datebullet/)
- [A distance label on its own Distance The label that shows how far a place is.](/uxdesign/distance/)
- [A duration label on its own Duration The label that shows how long a video lasts.](/uxdesign/duration/)
- [An Item and its child elements Item The structural unit of a navigation entry, with its child elements.](/uxdesign/item/)
- [The Item Icon and its background layer Item Icon The pictogram of a navigation entry, on its own background layer.](/uxdesign/item-icon/)
- [A tiny indicator on its own Item Indicator The marker of the selected entry of a navigation.](/uxdesign/item-indicator/)
- [An Item Label on its own Item Label The text of a navigation entry, in three sizes that adapt to each device.](/uxdesign/item-label/)
- [A media container holding a play icon and a duration Media The container that anchors elements over a cell's image.](/uxdesign/media/)
- [A pager on its own Pager The dots that show where you are in a carousel.](/uxdesign/pager/)
- [A play icon on its own Play The icon that signals playable media.](/uxdesign/play/)
- [A player control with a play icon and a timer Player The control that plays and pauses audio, right from its cell.](/uxdesign/player/)