--- title: "Components | GoodBarber's Design System" description: "This section is dedicated to a detailed description of the most fundamental components of our Design System: their dimensions, technical characteristics, appearance and properties, behavior and layout." canonical_url: "https://www.goodbarber.com/uxdesign/ui-components/" lang: pt --- # Components | GoodBarber's Design System [Design System](https://pt.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg) [https://pt.goodbarber.com/uxdesign/](https://pt.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://pt.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 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/) ![UI Components icon](https://portal.ww-cdn.com/portal_static/images/designsystem/tree/icon-ui-components.aa1d4a0e5524.svg) # UI Components This section is dedicated to a detailed description of the most fundamental components of our Design System: their dimensions, technical characteristics, appearance and properties, behavior and layout. - [Background Component Background This component sets the overall visual aesthetic and tone of the interface.](/uxdesign/background/) - [Text field Text Field This component is used to input and submit text-based information.](/uxdesign/textfield/) - [Dropdown Dropdown Dropdown menus facilitate the selection of an option from a given list.](/uxdesign/dropdown/) - [Date & Time Picker Date & Time Picker It’s the tool used to select a date and time on your app.](/uxdesign/date-time-picker/) - [Checkboxes & Radio Button Checkboxes & Radio Button These components are used to make selections and choices within your app.](/uxdesign/checkboxes-radio-button/) - [Button Button Buttons allow users to interact with apps clearly and intuitively.](/uxdesign/button/) - [Thumbnail Thumbnail These are images that provide a preview of media content, such as articles, pictures, and videos.](/uxdesign/thumbnail/) - [Form Form This component is used for gathering data and user input, like contact information and surveys](/uxdesign/form/)