Close

Create a close icon that can be combined with different components.

Table of contents

• Usage
• Close in alerts
• Close in drops
• Close in modals
• Accessibility
  • Internationalization

Usage

To apply this component, add the data-z-close attribute to an <a> or <button> element.

<button type="button" data-z-close></button>

<a href="" data-z-close></a>

Close in alerts

This is an example of how this component is used with an alert box from the Alert component.

<div class="z-alert" data-z-alert>
  <a href class="z-alert-close" data-z-close></a>
</div>

Close in drops

This is an example of how this component is used with the Drop component.

<div data-z-drop>
  <button class="z-drop-close" type="button" data-z-close></button>
</div>

Close in modals

This is an example of how this component is used with the Modal component.

<div id="modal" data-z-modal>
  <div class="z-modal-dialog z-modal-body">
    <button
      class="z-modal-close absolute right-4 top-4"
      type="button"
      data-z-close
    ></button>
  </div>
</div>

Accessibility

The Close component automatically sets the appropriate WAI-ARIA roles and properties.

• The close icon has the aria-label property, and if an <a> element is used, the button role.

Internationalization

The Close component uses the following translation strings. Learn more about translating components.