Button

When to use this component

Use the button component to help users carry out an action like starting an application or saving their information in Sport Wales services.

How it works

Write button text in sentence case, describing the action it performs. Follow these guidelines:

• Button height should be 46px according to Sport Wales brand guidelines
• Use rounded edges (8px border radius) for all buttons
• Write button text in sentence case, describing the action it performs
• Align the primary action button to the left edge of your form
• Primary blue button hover state changes to #2E7799
• Start/Warning red button hover state changes to #C9202E
• Secondary buttons use outlined style with Sport Wales blue border
• Use Montserrat font family for all button text
• Avoid using multiple primary buttons on a single page
• Use start buttons for main call to action on service start pages
• Use warning buttons sparingly for destructive actions only
• Pages with too many calls to action make it hard for users to know what to do next

Default buttons

Use a default button for the main call to action on a page.

Avoid using multiple default buttons on a single page. Having more than one main call to action reduces their impact, and makes it harder for users to know what to do next.

Start buttons

Use a start button for the main call to action on your service's start page.

Start buttons do not usually submit form data, so use a link tag instead of a button tag.

Secondary buttons

Use secondary buttons for secondary calls to action on a page.

Pages with too many calls to action make it hard for users to know what to do next. Before adding lots of secondary buttons, try to simplify the page or break the content down across multiple pages.

You can also group default and secondary buttons together.

Warning buttons

Warning buttons are designed to make users think carefully before they use them. They only work if used very sparingly. Most services should not need one.