Button
When to use a button or a link
Both button and link elements can have button styling. Use the appropriate element for the task:
- use a button element when the user is performing an action
- use a link element when the user is navigating
It is best to limit where you style link elements to look like buttons. Doing so may make it unclear how to interact with the element.
Types of button
Primary button
This is the default button style. Use this for your primary calls to action. More than one primary button can confuse users so try to have only one of these per page (or section of a page).
Sample HTML
<button class="ds_button">Start here</button>Cancel button
Use this style of button for actions that used to cancel or back out of an action. This button is usually used alongside a primary button.
Sample HTML
<button class="ds_button ds_button--cancel">Cancel</button>Secondary button
All other non-primary actions should use this style. It has less visual prominence than the primary and cancel buttons.
Sample HTML
<button class="ds_button ds_button--secondary">Cancel</button>Disabled button
Buttons in a disabled state should be visually distinct and use this display.
Disabled buttons can confuse users. Only include them if user research shows that they are helpful in your particular use case.
Sample HTML
<button disabled="true" class="ds_button">Disabled button</button>Width variants
Flexible width
This is the default behaviour with buttons expanding to fit the length of text.
Sample HTML
<div class="ds_button-group">
<a href="#" class="ds_button">Start</a><br />
<a href="#" class="ds_button">Really super duper start here</a>
</div>Fixed width
Use fixed-width buttons to force uniformity in button widths. Button labels will wrap onto multiple lines if there is insufficient space.
Sample HTML
<div class="ds_button-group">
<a href="#" class="ds_button ds_button--fixed">Start</a><br />
<a href="#" class="ds_button ds_button--fixed">Really super duper start here</a>
</div>Maximum width
Use maximum-width buttons for large buttons. These will fill the width of small screens, up to a maximum width of 480px.
Sample HTML
<div class="ds_button-group">
<a href="#" class="ds_button ds_button--max">Start</a><br />
<a href="#" class="ds_button ds_button--max">Really super duper start here</a>
</div>Size variants
Small buttons
You can use a small button when available space is limited.
The small button modifier can have any button type or width variant.
Sample HTML
<div class="ds_button-group">
<a href="#" class="ds_button ds_button--small">Start here</a><br />
<a href="#" class="ds_button ds_button--small ds_button--max ds_button--secondary">View summary</a><br />
<a href="#" class="ds_button ds_button--small ds_button--fixed ds_button--cancel">Cancel</a>
</div>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 label
- match the label colour
Do not use icons:
- as decoration
- to represent more than one thing
Buttons with icons can have any size, type or width modifiers applied to them.
Sample HTML
<div class="ds_button-group">
<a href="#" class="ds_button ds_button--has-icon ds_button--max">
Search
<svg class="ds_icon" aria-hidden="true" role="img"><use href="/assets/images/icons/icons.stack.svg#search"></use></svg>
</a><br />
<a href="#" class="ds_button ds_button--small ds_button--secondary ds_button--has-icon">
Search
<svg class="ds_icon" aria-hidden="true" role="img"><use href="/assets/images/icons/icons.stack.svg#search"></use></svg>
</a><br />
<a href="#" class="ds_button ds_button--cancel ds_button--fixed ds_button--has-icon">
Cancel
<svg class="ds_icon" aria-hidden="true" role="img"><use href="/assets/images/icons/icons.stack.svg#close"></use></svg>
</a>
</div>Icons are tied to the edge of the button and not the label. This includes if the button is full-width.
You can align the icons to either side of the button.
Sample HTML
<div class="button-group">
<a href="#" class="ds_button ds_button--cancel ds_button--has-icon ds_button--has-icon--left">
<svg class="ds_icon" aria-hidden="true" role="img"><use href="/assets/images/icons/icons.stack.svg#chevron_left"></use></svg>
Back
</a>
<a href="#" class="ds_button ds_button--has-icon">
Next
<svg class="ds_icon" aria-hidden="true" role="img"><use href="/assets/images/icons/icons.stack.svg#chevron_right"></use></svg>
</a>
</div>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.
Sample HTML
<div class="ds_button-group">
<a href="#" class="ds_button">
<span class="visually-hidden">Search</span>
<svg class="ds_icon" aria-hidden="true" role="img"><use href="/assets/images/icons/icons.stack.svg#search"></use></svg>
</a><br />
<a href="#" class="ds_button ds_button--small ds_button--cancel">
<span class="visually-hidden">Close</span>
<svg class="ds_icon" aria-hidden="true" role="img"><use href="/assets/images/icons/icons.stack.svg#close"></use></svg>
</a>
</div>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