--- title: "Button | GoodBarber's Design System" description: "# Anatomy\r\n\r\nMost of the time, the length of the buttons is dynamic according to the displayed text. Exceptionally, it will be constrained by the layout, as shown [here](#layout).\r\n\r\nThe button component comes in 3 sizes: **Small, Medium and Large.**" canonical_url: "https://www.goodbarber.com/uxdesign/button/" lang: nl --- # Button | GoodBarber's Design System [Design System](https://nl.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg) [https://nl.goodbarber.com/uxdesign/](https://nl.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://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 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/) # Button UI Components Whether it’s used for navigation, actions, or form submissions, the button component allows users to interact with apps clearly and intuitively. [https://portal.ww-cdn.com/portal_static/images/designsystem/videos/button.3243430e719b.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/button.3243430e719b.mp4) ## Introduction The Button component is a fundamental element of any user interface and plays a crucial role in the GoodBarber design system. Whether it's used for navigation, actions, or form submissions, the Button component allows users to interact with your app in a clear and intuitive way. In the GoodBarber design system, we've put a lot of thought into the design and functionality of the Button component to ensure that it is consistent and easy to use across all devices and platforms. The component is available in different styles and can be customized to match the overall design of your app. ## Anatomy Most of the time, the length of the buttons is dynamic according to the displayed text. Exceptionally, it will be constrained by the layout, as shown [here](#layout). The button component comes in 3 sizes: **Small, Medium and Large.** ### Basic button The **padding**, **font size** and **height** vary depending on the [size](/uxdesign/atom-size/) of the component. Small ![Preset small size](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Button-Anatomy-Button-Basic-Small.6bf0f350d16f.png) *Preset small size* Medium ![Preset medium size](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Button-Anatomy-Button-Basic-Medium.76426c8a323a.png) *Preset medium size* Large ![Preset large size](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Button-Anatomy-Button-Basic-Large.3e9fc523ab83.png) *Preset large size* ### Icon button The **padding**, **font size**, **height** and **icon size** vary depending on the [size](/uxdesign/atom-size/) of the component. Small ![Preset small size with an icon](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Button-Anatomy-Button-Icon-Small.004d28ae6bd9.png) *Preset small size with an icon* Medium ![Preset medium size with an icon](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Button-Anatomy-Button-Icon-Medium.57c20f313bef.png) *Preset medium size with an icon* Large ![Preset large size with an icon](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Button-Anatomy-Button-Icon-Large.f80df1107fb0.png) *Preset large size with an icon* ### Font size Font sizes change only according to the button size chosen and are the same on all devices. For more details on font sizes, please refer to this [table](/uxdesign/atom-font/#size). | | Component Size | | | | Text Level | | | | All Devices | | | --- | -------------- | --- | --- | --- | ---------- | --- | --- | --- | ----------- | --- | | | **Small** | | | | Button 1 | | | | **14** | | | | **Medium** | | | | Button 2 | | | | **15** | | | | **Large** | | | | Button 3 | | | | **16** | | | | | | | | | | | | | | Small ![Text size with the preset small size](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Button-Anatomy-FontSize-Small.d7fb1b762d29.png) *Text size with the preset small size* Medium ![Text size with the preset medium size](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Button-Anatomy-FontSize-Medium.a6323105cd19.png) *Text size with the preset medium size* Large ![Text size with the preset large size](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Button-Anatomy-FontSize-Large.059dbd1e3ce9.png) *Text size with the preset large size* ## Properties ### Shape Below, the [Shape atom](/uxdesign/atom-shape/) applied to the button with the types **Sharp** / **Rounded** / **Round**: Sharp ![Sharp shape on button](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Button-Properties-Shape-Sharp.db00e24cd263.png) *Sharp shape on button* Rounded ![Rounded shape on button](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Button-Properties-Shape-Rounded.0142cfc35580.png) *Rounded shape on button* Round ![Round shape on button](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Button-Properties-Shape-Round.a3a7502bcb0f.png) *Round shape on button* ### Border By default, the [Border Atom](https://zeroheight.com/8a9c46053/p/22187e-atoms/t/045cf5) value is **1px** when the Outline option is enabled:: ![Border atom on button](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Button-Properties-Border.f710d8b93f49.png) *Border atom on button* ### Shadow For more information on the property: [Shadow atom](/uxdesign/atom-border/) section. ![Shadow atom on button](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Button-Properties-Shadow.9f52a628073b.png) *Shadow atom on button* ### Do / Don't | ![Good practice for button style](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Button-Propoerties-Do.1c4a81ffa3aa.png) | | ![Bad practice for button style](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Button-Propoerties-Don%E2%80%99t.2136fb2cb09d.png) | | ------------------------------------------------------------------------------------------------------------------------------------------------ | --- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | | **✓ Do** | | **✕ Don't** | | ・Text + Border | | ・Text + Border + Drop Shadow | | ・Text + Background | | ・Text + Background + Border | | ・Text + Background + Drop Shadow | | ・Text + Background + Border +Drop Shadow | ## Layout ### Stacked buttons **Mobile** Whether the text is short or long, the button will take up all **4 columns of the page**. ![Button width on mobile](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Button-Layout-Stacked-Mobile.b7691f4a815a.png) *Button width on mobile* **Tablet & Web** Even with a very short text, the button will take up **at least 2 columns** : ![Button width on tablet & desktop](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Button-Layout-Stacked-Tablet-Web-Short-Tx.e23765961f9a.png) *Button width on tablet & desktop* If the length of a button exceeds 2 columns, the largest button is used: ![Button max width on tablet & desktop](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Button-Layout-Stacked-Tablet-Web-Long-Tx.c2a08f97ea36.png) *Button max width on tablet & desktop* ### Inline Buttons **Mobile** / **Tablet** / **Web** Even with a very **short text**, the button will take up **at least 2 columns**: ![Buttons on 2 columns](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Button-Layout-Inline-Short-Tx.333e7b3420c0.png) *Buttons on 2 columns* In case of a **long text**, we cut the word by using ellipsis: ![Buttons on 2 columns - Max width](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Button-Layout-Inline-Long-Tx.cf8823d78852.png) *Buttons on 2 columns - Max width* ### Form Depending on the device, the layout of a button associated with a Text Field may vary: On **Mobile**, the 2 components are one on top of the other because of the lack of space. The button takes up the whole width of the page: ![Button in a form on mobile](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Button-Layout-Form-Mobile.06c7ae8cfc37.png) *Button in a form on mobile* On **Tablet and Web**, if the 2 components are one on top of the other the button will have its minimum length. If they are on the same line, the Text Field takes the space left by the button: ![Button in a form on tablet & desktop](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Button-Layout-Form-Tablet-Web.2e9c2d4f2c2f.png) *Button in a form on tablet & desktop* ### Modal **1 button:** center alignment ![One button in a modal](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Button-Layout-Modal-1bt.9e440b8807c5.png) *One button in a modal* **2 buttons:** right alignment ![Two buttons in a modal](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Button-Layout-Modal-2bt.55628d7a80d0.png) *Two buttons in a modal* ### Footer If the button is in a footer, the Top and Bottom paddings around the button will be **8px**: ![Button in a footer](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Button-Layout-Footer.00f0e1fac043.png) *Button in a footer*