The React documentation for this component can be read from Storybook (link here)

Control button

Use to perform utility tasks for the user.

Description

Similar to the secondary CTA but with smaller font, padding and an increased radius.

Context

The control button is a base component and can be used within larger components and layouts.

Behaviour

The control button inherits its colours from the secondary button. It has 5 states.

Variants

  • control-button--inverse: For cases when the button will sit on dark backgrounds.
  • control-button--enlarged: Use to enlarge the clickable area of a button or link.
  • control-button--icon-only: Use to just display icon.
  • control-button--info: Use to indicate that there is info that needs to be displayed. To be used alongside text.
  • control-button--processing: Use to show operation is happening. To be used alongside text.
  • control-button--success: Use to indicate that a status has become successful. To be used alongside text.
  • control-button--error: Use to indicate that a something has failed. To be used alongside text.

Activate Sass component

In order to have the styling of this component available, you need to include it in your project. After including the Radius library in your main ./index.scss file, add this snippet:

@include radius-component-control-button;

Link to Abstract/Sketch file

Download Sketch / Abstract file

Usage

Usage example

Disabled 
<button class="control-button" type="button">Control</button>

<button class="control-button control-button--inverse" type="button">Control</button>

<button class="control-button" disabled type="button">Disabled</button>

<a class="control-button is-disabled">Disabled</a>

<button class="control-button" type="button" aria-label="close">
  <svg class="svg-icon svg-icon--small">
    <use xlink:href="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/icons/svg-sprite.svg#cross"></use>
  </svg>
  Close
</button>

<button class="control-button" type="button" aria-label="play">
  <svg class="svg-icon svg-icon--small">
    <use xlink:href="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/icons/svg-sprite.svg#play"></use>
  </svg>
  Play
</button>

<button class="control-button control-button--enlarged" type="button" aria-label="play">
  <svg class="svg-icon svg-icon--small"><use xlink:href="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/icons/svg-sprite.svg#play"></use></svg>
  <span>Close</span>
</button>