Button
About this component
There are 5 types of button in the Design System:
- primary button
- secondary button
- cancel button
- disabled button
- button styled as a link
When to use buttons
Primary button
This is the default button style. Use this for your main call to action.
Use only one primary button on a page (or section of a page). More than one can confuse users.
Cancel button
Use this button for actions that cancel or abandon an action.
A cancel button is usually grouped with a primary button. Follow the guidance on grouping buttons.
Secondary button
Use a secondary button for most other actions.
It has less visual prominence than the primary and cancel buttons.
Disabled button
Use this style for buttons in a disabled state. They should be used to show a user that an action is possible but not available to them at that stage in the user journey.
Disabled buttons should be styled differently from active buttons. The button is grey to tell users that the button is not usable.
Disabled buttons can confuse users. Only include them if user research shows that they are helpful in your particular use case.
Button styled as a link
Buttons can be styled as links. However, you should avoid using these, except if:
- all other button types would be too visually prominent
- the user is being taken to another page to perform an action
For example, the Add more fields pattern uses buttons styled as links for users to change or delete fields.
When to use a button versus a hyperlink
You should use a:
- button when the user is performing an action (either primary, secondary or cancel)
- standard hyperlink when the user is navigating to a different webpage — for example, to find out more about a topic on GOV.UK
Links styled as buttons
A hyperlink can be styled to look like a button. Use a link styled as a button when it’s either:
- a link that’s performing an action — these should be announced as a button to users of assistive technology. For example, use a link styled as a button when the user is being launched into a service, such as an eligibility checker, application form or calculator
- a link that needs to be more visually prominent than a standard link — you should limit using these
How to use buttons
Grouping buttons
Use a button group when a button is placed next to other buttons or links. Use a consistent approach to sizing buttons within a group — do not mix button sizes with width modifiers.
Buttons and links within a button group will be stacked on mobile sizes. On larger sizes they are arranged in a row that will overflow.
A button group can be changed to always remain on a single row by adding the ds_button-group—inline
modifier class. At mobile sizes, the contents of the button group take up the full available width.
Links and buttons styled as links should be placed after all other button styles.
Writing button text
Write button text in sentence case and describe the action the button performs. For example:
- ‘Start now’ to launch a user into a service
- ‘Sign in’ to an account a user has created
- ‘Continue’ when the service does not save a user’s information
- ‘Save and continue’ when the service saves a user’s information
- ‘Pay’ to make a payment
- ‘Sign out’ when a user is signed in to an account
- ‘Add another item’ to add another item to a list or a group — follow the guidance for button text in the Add more fields pattern
Placement of buttons
If you’re using buttons in standard content, buttons should:
- sit under a relevant heading
- be close to the heading — only 1 or 2 sentences should separate them
If you’re using buttons in forms, put buttons:
- underneath the relevant form field — for example, to add more fields
- after fields or body content, as a call to action once the user has completed the page
Read more about form structure and form design.
Width variants
Flexible width
This is the default behaviour with buttons expanding to fit the length of text.
Fixed width
Use fixed-width buttons to force uniformity in button widths.
Button text will wrap onto multiple lines if there is insufficient space.
Maximum width
Use maximum-width buttons for large buttons. These will fill the width of small screens, up to a maximum width of 480px.
Size variants
Small buttons
You can use a small button when:
- space is limited
- the action is not the primary action on a page
For example, using small buttons in a cookie banner means the banner takes up less space and does not push the site header too far down the page.
The small button modifier can have any button type or width variant.
Buttons with icons
You can add an icon to a button to make an action clearer and help users scan the page.
The Design System uses Google Material icons.
Icons must:
- be recognisable
- be understandable
- represent one action only
- directly relate to the button action and text
- match the label colour
Do not use icons:
- as decoration
-
inconsistently — an icon should represent the same action wherever used
-
in buttons styled to look like links
Buttons with icons can have any size, type or width modifiers applied to them.
Icons are tied to the edge of the button and not the text. This includes if the button is full-width.
You can align the icons to either side of the button.
Check our icons guidance for more information on:
- icons included in the Design System
- using icons not included in the Design System
- sizing icons
Icon-only buttons
Buttons can contain an icon with no visible text.
Use icon-only buttons where space is limited. Choose icons with clear meanings that are universally understood.
Make sure that users of assistive technology can understand what the button does. For example, by adding some visually hidden text or using aria-label
.
Website analytics
Each button has a data attribute that describes the action.
The Design System’s ‘tracking’ script adds the data attribute.
Use the button component to link to service start pages to improve analytics data.
Feedback, help and support
If you need help or support you can e-mail us at designsystem@gov.scot
There is a problem
Thanks for your feedback