Close

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

Usage

Note If you are not using Tailwind CSS, you can skip this step. On your tailwind.config.js file, add the Close component within the ui() plugin.

import ui from "franken-ui";
 
ui({
    components: {
        close: {
            hooks: {}
        }
    }
}),

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

<button type="button" uk-close></button>
 
<a href="" uk-close></a>

<button type="button" aria-label="Close" uk-close></button>

Large modifier

Add the .uk-close-large class for a larger close button.

<button class="uk-close-large" type="button" uk-close></button>

<button
  class="uk-close-large"
  type="button"
  aria-label="Close"
  uk-close
></button>

Close in alerts

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

<div class="uk-alert" uk-alert>
  <button class="uk-alert-close right-4 top-4" type="button" uk-close></button>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

<div class="uk-alert" uk-alert>
  <button
    class="uk-alert-close"
    type="button"
    aria-label="Close"
    uk-close
  ></button>
  <div class="uk-alert-description">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt.
  </div>
</div>

Close in drops

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

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

<div class="uk-inline">
  <button class="uk-button uk-button-default" type="button">Click</button>
  <div uk-drop="mode: click">
    <div class="uk-card uk-card-body uk-card-default">
      <button
        class="uk-drop-close"
        type="button"
        aria-label="Close"
        uk-close
      ></button>
      <p class="uk-margin">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt.
      </p>
    </div>
  </div>
</div>

Close in modals

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

<div id="modal" uk-modal>
  <div class="uk-modal-body uk-modal-dialog">
    <button class="uk-modal-close-default" type="button" uk-close></button>
  </div>
</div>

Open modal

Are you absolutely sure?

This action cannot be undone. This will permanently delete your account and remove your data from our servers.

<a class="uk-button uk-button-default" href="#modal" uk-toggle> Open modal </a>
 
<div class="uk-modal uk-flex-top" id="modal" uk-modal>
  <div class="uk-modal-body uk-margin-auto-vertical uk-modal-dialog">
    <button
      class="uk-modal-close-default"
      type="button"
      aria-label="Close"
      uk-close
    ></button>
    <h2 class="uk-modal-title">Are you absolutely sure?</h2>
    <div class="my-6 text-sm text-muted-foreground">
      This action cannot be undone. This will permanently delete your account
      and remove your data from our servers.
    </div>
    <div class="uk-flex uk-flex-right">
      <button
        class="uk-modal-close uk-button uk-button-default uk-margin-small-right"
        type="button"
      >
        Cancel
      </button>
      <button class="uk-button uk-button-primary" type="button">
        Continue
      </button>
    </div>
  </div>
</div>

Available hooks

Learn more about using hooks.

Hook Name	Affected Classes
`hook-close`	`.uk-close`
`hook-close`	`.uk-close:hover`
`hook-misc`	`*`

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.

Key	Default	Description
`label`	`Close`	`aria-label` attribute.