Buttons

Primary button

A primary button is used for the main call to action on a page.

<button type="submit" class="occlss-button occlss-button--primary">
  Apply for a Blue Badge
</button>

When to use this component

Use the button component to help users carry out an action on an Oxfordshire County Council page like starting an application or moving to the next question in a form.

Write button text in sentence case, describing the action it performs. For example:

• ‘Start now’ at the start of smart answers
• ‘Log in’ to and account the user has already created
• ‘Send your application’ to submit the user’s application form
• ‘Pay’ to make a payment
• ‘Log out’ when a user is logged into an account

When not to use this component

The button must never be used to draw attention to any other type of link, for example, a document link. They are only to be used for call to action.

Primary disabled

<button type="submit" disabled="disabled" aria-disabled="true" class="occlss-button occlss-button--primary is-disabled">
  Apply for a Blue Badge
</button>

Neutral button

The neutral button acts as a secondary call to action on a page.

<button type="submit" class="occlss-button occlss-button--neutral">
  Back
</button>

When to use this component

The neutral button can be used in combination with a primary button. For example, as a ‘back’ button.

When not to use this component

Avoid using multiple 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.

Neutral disabled

<button type="submit" disabled="disabled" aria-disabled="true" class="occlss-button occlss-button--neutral is-disabled is-disabled">
  Back
</button>

Negative button

The negative button is a warning button that makes the user think carefully before using them. Negative buttons are only effective if used sparingly.

<button type="submit" class="occlss-button occlss-button--negative">
  Cancel payment
</button>

When to use this component

Only use the negative button for actions with serious destructive consequences that cannot be easily undone by the user. For example, cancelling a payment.

Negative disabled

<button type="submit" disabled="disabled" aria-disabled="true" class="occlss-button occlss-button--negative is-disabled is-disabled">
  Cancel payment
</button>

Search button

This is a special button style used exclusively for the main website search in the heading panel and where the search pattern is used within a content page. For example, on the search results page.

<button type="submit" class="occlss-button occlss-button--search">
  Search
</button>

Disabled

<button type="submit" disabled="disabled" aria-disabled="true" class="occlss-button occlss-button--search is-disabled is-disabled">
  Search disabled
</button>

Changelog

3.0.0

• Button primary new style
• Buttons shadow been removed

1.0.0

• Component added