We use cookies to collect anonymous data to help us improve your site browsing experience.

Click 'Accept all cookies' to agree to all cookies that collect anonymous data. To only allow the cookies that make the site work, click 'Use essential cookies only.' Visit 'Set cookie preferences' to control specific cookies.

Set cookie preferences

Your cookie preferences have been saved. You can change your cookie settings at any time.

Component

Button

Use a button to help users perform an action, such as submitting a form or starting an application.

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.

Try to limit the use of styling link elements to look like buttons, as this may confuse the visual clues for how that element can be interacted with.

Types of button

Primary

This is the default button style. Use this for your primary calls to action. Multiple primary buttons can confuse users so 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>

Cancel

If a button is used to cancel or back out of an action, this style should be used. This button is typically used alongside a primary button.

Open this example in a new window

Sample HTML 

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

Secondary

All other non-primary actions should use this style. It has less visual prominence than the primary and cancel buttons.

Open this example in a new window

Sample HTML 

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

Disabled

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

Disabled buttons can confuse users so only include them if user research shows that they are helpful in your particular use case.

Open this example in a new window

Sample HTML 

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

Width variants

Flexible

This is the default behaviour with buttons expanding to fit the length of text.

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. Button labels will wrap onto multiple lines if there is insufficient space.

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 maximum width of 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 can be used when available space is limited.

The small button modifier can be applied to any button 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 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>

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 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>

Icon-only buttons

Buttons can contain an icon with no visible text. 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">
        <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

To track interactions with button elements in Google Analytics using Google Tag Manager, each button has a data attribute that describes the action.

The data attribute is added automatically by the Design System’s ‘tracking’ script.

Standard links do not receive additional tracking attributes so it is recommended to use the button component when linking to both internal and external service start pages to improve analytics data.

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