Button
Breakdown
Primary
A primary button is the highest priority action on a page. Primary buttons should only appear once per container. When placed on a background colour that compromises legibility a variant of primary reverse should be used.
Primary reverse
Both primary and secondary buttons have reverse states for times whey appear on RSPCA blue backgrounds.
Secondary
A secondary button can be paired with a primary button to perform a secondary action or used on it’s own. When placed on a background colour that compromises legibility a variant of secondary reverse should be used.
Secondary reverse
Tertiary
A tertiary button replaces a primary button when a more serious tone is needed. This is often used, but not exclusively used on swallow blue. It can be paired with a secondary button or used on their own.
Action
An action button is used when the action relates to a monetary journey. It is considered a type of primary button but has it’s own colour to highlight it’s significance over the standard primary button.
Button (with icon)
When adding an icon to a button, use an icon that can only represent a single action to keep the meaning simple to the user. The standard icon size for buttons is medium. For further guidance on icon sizes visit the icon page.
Usage
Buttons allow users to initiate an action or command when clicked or tapped. The button's label indicates the purpose of the action. We use buttons for actions like submitting a response. Whereas to navigate to another place use a link style. This can be found inn Heading.
Spacing
A button should be consistently placed 27px from the content above it.
Hug
By default, a button hugs the content within it. Therefore the width of default button is based on the length of its text.
Full-width
Full-width buttons can be used on narrower breakpoints. An example of this would be the donate button. This is an important action to highlight to the user so you want the button to be more easily clickable.
Anatomy
Vertical padding
Buttons have a vertical padding of 9px.
Horizontal padding
Buttons have a horizontal padding of 18px.
Layout
When pairing buttons together, use either a horizontal or vertical gap of 9px.
Icons
When placing icons into a button, use a horizontal padding of 9px.
Accessibility
Descriptive
For a button’s purpose to be clear to all users, it must have a meaningful name. Labelling buttons more descriptively gives users confidence that a button will have the outcome they expect.
Assistive technologies like screen readers provide overlays to enable users to jump to elements like buttons. These elements are listed by their names so if buttons don’t have descriptive names it’s not possible to determine which action will be performed when selecting them from the list.
Colour
To ensure buttons are visually accessible and meet WCAG guidelines, all buttons must pass 4.5:1 contrast against the surface it sits on in all interactive states. Therefore only a select combination of button colours should be used.
Acceptable contrast buttons on RSPCA blue
Acceptable contrast buttons on rabbit white
Acceptable contrast buttons on butterfly blue
Acceptable contrast buttons on swallow blue
