Designsystem.gov.scot uses cookies which are essential for the site to work. We also use non-essential cookies to help us improve our websites. Any data collected is anonymised. By continuing to use this site, you agree to our use of cookies.

Cookie settings

Your cookie settings have been saved.

Component

Button

Button styling can be applied to either button or link elements. 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.

Types of button

Primary (default)

Use this for your primary calls to action. Multiple primary buttons can confuse users. Try to have only one of these per page (or section of a page).

Open this example in a new window

Sample HTML 

<p><button class="ds_button">Start here</button></p>

Secondary

Any non-primary actions should use this inverted button style. It has less visual prominence than the primary button.

Open this example in a new window

Sample HTML 

<p><button class="ds_button  ds_button--secondary">View summary</button></p>

Cancel/calloff

If a button is used to cancel or back out of an action, this more severe border style should be used.

Open this example in a new window

Sample HTML 

<p><button class="ds_button  ds_button--cancel">Cancel</button></p>

Disabled

Buttons in a disabled or unclickable state should be visually distinct and use this display.

Open this example in a new window

Sample HTML 

<p><button disabled="true" class="ds_button">Disabled button</button></p>

Width variants

Flexible (default)

Buttons will expand to fit the length of text by default

Open this example in a new window

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

Use fixed-width buttons to force uniformity in button widths.

Open this example in a new window

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

Use maximum-width buttons for large buttons. These will fill the width of small screens, up to a set maximum width (480px).

Open this example in a new window

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

A small button style is available for cases where one is necessary, such as when you have a group of buttons.

The small button modifier can be applied to any type or width variant.

Open this example in a new window

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

Icons can be added to buttons. Buttons with icons can also have any size, type or width modifiers applied to them.

Open this example in a new window

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 xlink: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 xlink: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 xlink:href="/assets/images/icons/icons.stack.svg#close-21"></use></svg>
</a>
</div>

The icons can be aligned to either side of the button.

Open this example in a new window

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 xlink: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 xlink:href="/assets/images/icons/icons.stack.svg#chevron-right"></use></svg>
    </a>
</div>

Icon-only buttons

Buttons can also contain only an icon. If you do this, make sure that the intention of the button is clearly communicated in a way that is accessible to users of assistive technology.

Open this example in a new window

Sample HTML 

<div class="ds_button-group">
    <a href="#" class="ds_button  ds_button--icon-only">
        <span class="visually-hidden">Search</span>
        <svg class="ds_icon" aria-hidden="true" role="img"><use xlink:href="/assets/images/icons/icons.stack.svg#search"></use></svg>
    </a><br />

    <a href="#" class="ds_button  ds_button--icon-only  ds_button--small  ds_button--cancel">
        <span class="visually-hidden">Close</span>
        <svg class="ds_icon" aria-hidden="true" role="img"><use xlink:href="/assets/images/icons/icons.stack.svg#close-21"></use></svg>
    </a>
</div>

Website analytics / performance

To track interactions with button elements in Google Analytics using Google Tag Manager, each button has a data attribute, for exapmle data-button="button-ACTION".

You will need to replace the text “ACTION” with the action for each button, for example for a submit button this would be data-button="button-submit".

Feedback, help or support

If you need any help or want to give any feedback you can e-mail us at: designsystem@gov.scot

Back to top