--- title: "Button UI: anatomy, variants and examples | Kombai" description: "A button runs one action when people click or tap it, like saving a draft, sending a message or buying a product." canonical_url: https://kombai.com/glossary/button/ author: "The Kombai Team" --- # Button A button runs one action when people click or tap it, like saving a draft, sending a message or buying a product. - Also called: CTA, call to action - Platforms: Web, Mobile - In the Kombai gallery: [55 web designs](https://kombai.com/gallery/web/button/), [35 mobile designs](https://kombai.com/gallery/mobile/button/) - [Ironwyck](https://kombai.com/gallery/inspirations/button-ios-31/) (Mobile) - [Ferrisway](https://kombai.com/gallery/inspirations/button-web-38/) (Web) - [Sundermere](https://kombai.com/gallery/inspirations/button-ios-18/) (Mobile) ## What is a button? A button is a labeled control that runs one action when people click, tap or press it. Its style ranks it: a filled button marks the main action, and outline or text buttons carry the alternatives. The label says what happens, usually with a verb. - The label starts with a verb, like Save, Send or Add to cart. - Fill, outline and color rank buttons as primary, secondary or destructive. ## When to use button - **Running an action.** Saving, sending, buying or confirming something on the current screen. - **Submitting a form.** The last step of a form, labeled with what happens next, like Create account. - **Confirming a choice.** A dialog that asks people to go ahead or cancel. ## When not to use one - **Going to another page.** Navigation is a link. Style the link as a button if it needs the weight. - **Turning a setting on or off.** Use a toggle switch, or a checkbox inside a form. - **Switching between views.** Use a segmented control or tabs. ## Anatomy 1. **Container**: The fill or outline people press 2. **Label**: A verb for what happens 3. **Icon**: Optional, beside the label 4. **Secondary button**: Less weight for the other choice 5. **States**: Hover, pressed, disabled, loading, focus ## Variants We sorted every button design in the Kombai gallery and found six patterns. ### 1. Primary and secondary pairs The default. A filled button for the likely choice next to an outline or ghost button for the other one. - [Ferrowake](https://kombai.com/gallery/inspirations/button-ios-12/) (Mobile) - [Ordwyn](https://kombai.com/gallery/inspirations/button-ios-14/) (Mobile) - [Glasswing](https://kombai.com/gallery/inspirations/button-web-9/) (Web) ### 2. Full-width buttons One button stretched across the screen or dialog, often docked at the bottom on mobile, for the single next step. - [Tessellon](https://kombai.com/gallery/inspirations/button-ios-3/) (Mobile) - [Salterra](https://kombai.com/gallery/inspirations/button-ios-16/) (Mobile) - [Lindmark](https://kombai.com/gallery/inspirations/button-web-40/) (Web) ### 3. Destructive buttons Red or pale red buttons for removing and deleting, usually inside a confirmation with a Cancel beside them. - [Skerryvore](https://kombai.com/gallery/inspirations/button-web-51/) (Web) - [Ravenhurst](https://kombai.com/gallery/inspirations/button-web-26/) (Web) - [Calvane](https://kombai.com/gallery/inspirations/button-ios-24/) (Mobile) ### 4. Sign-in buttons A stack of equal buttons, each with a provider's logo, so every way to sign in has the same weight. - [Ostara](https://kombai.com/gallery/inspirations/button-ios-26/) (Mobile) - [Kestrelby](https://kombai.com/gallery/inspirations/button-ios-20/) (Mobile) - [Halstead](https://kombai.com/gallery/inspirations/button-web-25/) (Web) ### 5. Icon buttons Round or square buttons led by an icon, often with a short label under it, for share sheets and quick actions. - [Brindle](https://kombai.com/gallery/inspirations/button-ios-11/) (Mobile) - [Halvard](https://kombai.com/gallery/inspirations/button-ios-4/) (Mobile) - [Vantross](https://kombai.com/gallery/inspirations/button-web-46/) (Web) ### 6. Row buttons Small pill buttons repeated on every row or card, like Follow, Accept or Add, so each item has its own action. - [Corvane](https://kombai.com/gallery/inspirations/button-ios-2/) (Mobile) - [Vandermoor](https://kombai.com/gallery/inspirations/button-ios-22/) (Mobile) - [Bramwell](https://kombai.com/gallery/inspirations/button-ios-13/) (Mobile) ## Where buttons show up ### Onboarding and permission prompts A clear yes and a quiet way out, like Get started and Log in, or Yes, add it and No, go back. - [Quillon](https://kombai.com/gallery/inspirations/button-ios-7/) (Mobile) - [Galewick](https://kombai.com/gallery/inspirations/button-ios-25/) (Mobile) - [Oakhurst](https://kombai.com/gallery/inspirations/button-web-27/) (Web) ### Profiles Edit profile and Share on your own page, Follow and Message on someone else's. - [Ravencourt](https://kombai.com/gallery/inspirations/button-ios-17/) (Mobile) - [Cloudbank](https://kombai.com/gallery/inspirations/button-web-28/) (Web) - [Organisation](https://kombai.com/gallery/inspirations/button-ios-34/) (Mobile) ### Editors and workspaces A row of tool buttons above the work, with one filled button for the main step, like Run, Merge or Apply. - [Junipera](https://kombai.com/gallery/inspirations/button-web-12/) (Web) - [Quarryhill](https://kombai.com/gallery/inspirations/button-web-44/) (Web) - [Thornbury](https://kombai.com/gallery/inspirations/button-web-3/) (Web) ## Button vs similar components | | [Button](https://kombai.com/glossary/button/) | [Floating action button](https://kombai.com/glossary/floating-action-button/) | [Dropdown menu](https://kombai.com/glossary/dropdown-menu/) | [Segmented control](https://kombai.com/glossary/segmented-control/) | |---|---|---|---|---| | Does | Runs one action | Runs the screen's main action | Opens a list of actions | Switches between options | | Sits | Next to what it acts on | Floating over the content | Behind a trigger button | Above the content it changes | | Best for | Save, send, buy, confirm | Create or compose on mobile | Several related actions | Views, modes or filters | ## Build notes - Use