Close

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

Usage

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>

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.

Theme development

On your tailwind.config.js file, add the Close component within the ui() plugin.

import ui from "franken-ui";

ui({
    components: {
        close: {
            hooks: {}
        }
    }
}),

Available hooks

Note If you are developing theme from scratch, you can use all these hooks. If you’re using the shadcn/ui theme, some hooks might not work as they were already in use or removed. Learn more about using hooks.

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