Button close

Overview

This button is designed to work in modal elements. It creates a red cross icon on the top right corner of the element, with a traceable data-attribute that you can use in your JavaScript code to close an element.

Usage

Dependencies

To get the button close component working, include the dependencies in your project in the following order:

"design-system": "git+ssh://git@github.com/Selectra-Dev/design-system.git"

include /node_modules/design-system/src/pug/01-atoms/btn-close

@import 'design-system/src/scss/01-atoms/icon';
@import 'design-system/src/scss/01-atoms/btn-close';

Basic code

The button close component is composed by a button containing an svg icon.

<button class="btn-close btn-close--sm" type="button" aria-label="Close">
  <svg class="icon" aria-hidden="true">
    <use xlink:href="/img/sprite.svg#icon-close"></use>
  </svg>
</button>

+btn-close('shape', 'size', 'aria label', 'dismiss', 'svg url')

Pug mixin

A pug mixin is available to implement the button close with ease, find the parameters below:

+btn-close(size, ariaLabel, dismiss, svgUrl)