Control icon

Description

Use when a button consists of solely an icon.

Context

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

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

Usage

Usage example

Code example

<button class="control-icon" type="button" aria-label="close" data-js-cookie-statement-cta>
  <svg class="svg-icon svg-icon--large">
    <use xlink:href="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/icons/svg-sprite.svg#cross-circle-outline"></use>
  </svg>
</button>

<button class="control-icon" type="button" aria-label="close" data-js-cookie-statement-cta>
  <svg class="svg-icon svg-icon--large">
    <use xlink:href="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/icons/svg-sprite.svg#cross"></use>
  </svg>
</button>