Best practices
Each button variant has a particular semantic function and its design signals that function to the user. It is therefore very important that the different variants are used consistently across products, so that they message the correct actions.
“If everything looks important, then nothing is important.”
- Buttons vs. links – A button should indicate a change of a state (either front or back end), whereas a link is going to take the user somewhere else (and doesn’t change the state of the website/application). In short a button does something; a link goes somewhere.
- Do not overuse buttons – Too many buttons on a screen disrupts the visual hierarchy. If everything is looks important, nothing is important.
- Prioritise what matters – It is recommended to have only one primary button per page (or alternatively section), with any additional calls to action being represented using buttons with lower emphasis. This helps to guide the user and prioritise the most important actions on the page.
- Intentional sizing – Button sizes are equally important to the action hierarchy as the type of buttons used. Too many large buttons will blur what is important and feel overwhelming. Always ask why and make deliberate choices when using larger or smaller buttons.
- Clear and accurate labelling
- Consistent positioning – Buttons should be consistently positioned across Coloplast’s product interfaces (see guidelines)
|
✅ Do |
🛑 Don’t |
|---|---|
|
Use the ghost button for “negative” actions like cancelling. |
Don’t use the brand based secondary button for “negative” actions like cancelling. |
|
✅ Do |
🛑 Don’t |
|---|---|
|
Use the secondary button for situations with multiple “positive” options. And if shown on top of each other, make sure they have the same width. |
Pair buttons of different sizes or with input fields of different sizes. |
|
✅ Do |
🛑 Don’t |
|---|---|
|
Use emphasis to make a clear distinction between the primary actions. |
Use danger buttons for non-critical purposes. |
|
✅ Do |
🛑 Don’t |
|---|---|
|
Use active verbs or phrases that clearly indicate action. |
Don’t pair mixed icon button types. |
Button Types
Standard
Link
Icon
Inverted
When to use
Buttons are triggers for events or actions. They’re commonly used as part of larger components or patterns such as forms, cards, modals, nav or toolbars.
Buttons:
- act as calls to action (CTAs)
- move users through a sequence of screens
- use icons to convey meaning faster
- use badges to indicate values for underlying pages (e.g. notifications)
|
Type |
Emphasis |
Purpose |
|---|---|---|
|
Primary |
High |
Use primary buttons to call attention to a primary action on a form or to highlight the strongest call to action on a page. Primary buttons should in general only appear once per container (not including the application header or overlays). |
|
Inverted primary |
High |
Use inverted primary buttons to call attention to a primary action on a dark background. Inverted primary buttons should in general only appear once per container (not including the application header or overlays). Don’t combine with Primary. |
|
Secondary |
Medium high |
Secondary buttons represent important actions, but are not not the primary action on the page. Pair secondary buttons with primary buttons. In this case its function is to perform either the “negative” action of the set, such as “Cancel” or “Back”, or the least likely/desirable action. |
|
Inverted Secondary |
Medium high |
Same purpose as Secondary but on dark background. |
|
Secondary neutral |
Medium high |
Secondary neutral buttons is a slightly less prominent version of the secondary button. |
|
Tertiary |
Medium low |
Tertiary buttons can be used in isolation or paired with a primary button when there are multiple calls to action. |
|
Danger |
High |
Use when the action will delete user data or be otherwise difficult to recover from. Destructive buttons should trigger a confirmation dialog before the action is completed. Be thoughtful about using destructive buttons because they can feel stressful for users. |
|
Ghost |
Low |
Ghost buttons are used for the lowest priority actions, especially when presenting multiple options.Ghost buttons can be placed on a variety of backgrounds. Until the button is interacted with, its container is invisible. |
|
Inverted ghost |
Low |
Same purpose as ghost but on dark background. |
|
Ghost neutral |
Low |
Neutral ghost buttons are often used for icon buttons such as an edit or download button, or for stand-alone icon buttons (e.g. in the navigation bar). |
|
Link |
Low |
Use a link button to navigate to another (or section). These should open in the same window, unless information may be lost (for example, when someone is filling out a form), or when the destination is an external site (for example, a knowledge base article). Opening a new window should be clearly indicated with an icon or by labelling. |
|
Inverted link |
Low |
Same purpose as Link but on dark background. |
|
Link neutral |
Low |
Neutral link buttons can be used in situations where the primary link colour is not compatible with the background and a more neutral looking colour is needed. |
|
Functional |
Medium low |
Functional buttons are mainly used for form elements such as search settings, toolbars or filters. They pair with input fields of the same size (md and sm). |
When not to use
Except for Link buttons, avoid using buttons for navigation. Instead, links should be used when the goal is to take the user to a different page. Buttons are intended for actions that are specific to the current page, while links are used for navigation to other pages or locations.
Anatomy
All standard buttons support an optional leading or trailing icon. Icon buttons furthermore have support for a badge for notifications.
Standard button
- Button container
- Icon or spinner (optional)
- Label – Describes the action in a short precise manner (see content guidelines for more)
- Icon end (optional)
Link button
Link buttons are used for low to medium emphasis links, usually combined with an icon in a teaser style layout.
- Button container
- Icon start (optional)
- Label – Describes the action in a short precise manner (see content guidelines for more)
- Icon end (optional)
Icon button
Icon buttons vary slightly from the default button component, and therefor is its own separate component. It uses an almost identical setup (types, states) as the Button component. The link button type is not available for icon buttons.
- Button container
- Icon
- Badge
Size
Each of the standard buttons and icon buttons come in 2 sizes: small and medium.
Notifications
Icon buttons have an optional “Notification” property to toggle notification style indicators.
Combinations and meaning
Neutral
To cater a wide range of use-cases across the Coloplast’s many products, a handful of buttons come with “neutral” sub-variants.
For secondary buttons this can be useful when e.g. the user has more than one “positive” option in a flow, where one is only slightly more emphasised than the other.
Danger
Destructive buttons should trigger a confirmation dialog before the action is completed. Be thoughtful about using destructive buttons because they can feel stressful for users.
Alignment and order
Alignment
Buttons should always be where the user is most likely to expect and use them. In general, follow this guide on how to align buttons in most use cases:
|
Alignment |
Example use cases |
|---|---|
|
Left-aligned |
Forms, drawers, cards, pages |
|
Right-aligned |
Confirmation modals, dialogs |
|
Edge-aligned |
Sequential multistep pages like wizards or multi-section forms |
Order
Button types may be used in various combinations, but as a rule of thumb they should be listed in the order of importance/priority whether presented horizontally or vertically: Primary first, then secondary, then tertiary etc.
Behaviour
The hover, focus and press states use color modifiers to create all the button state backgrounds. Each state background is created mixing the buttons default background with a state color using the following logic (with exceptions):
Light theme rules
- For solid colors, use 2 color stops darker than the button background color
- For transparent (or low contrast) colors, use 4 color stops darker than the button background color
Dark theme rules
- For solid colors, use 2 color stops darker than the button background color
- For transparent colors, use 4 color stops lighter than the button background color
Content guidelines
Labels are the most important element of a button. It describes the action that will occur if a user taps a button.
- Labels should be concise, unambiguous and clearly indicate the next action to the user
- Use sentence case for all button labels (e.g. “Reorder products” and “Save changes”)
- By default the button content is centered
- Use icons to make an action faster to interpret. For more info see best practices for icons
|
✅ Do |
🛑 Don’t |
|---|---|
|
Use concise, easy to scan, and clear button labels to indicate the next action to the user. |
Use long, redundant button labels. Drop unnecessary articles, such as ‘a’ or ‘the’, for a more concise label. |
|
✅ Do |
🛑 Don’t |
|---|---|
|
Use active verbs or phrases that clearly indicate action. |
Use vague and generic labels, making the outcome of the actions unclear. |