v0.11.0

Appearance

Close button <button> ​

Close buttons are used to dismiss overlays such as dialogs, drawers, toasts, and popovers. They render a close icon without any visible label.

HTML tag<button>
⏣Native HTML
⬡Progressive
◇Custom
⬢Shadow DOM
Native HTML Element

Options ​

Appearance ​

Pick a visual style via data-appearance. Each appearance has its own CSS import.

Ring ​

html
<button
  type="button"
  class="l-close"
  data-appearance="ring"
  aria-label="Close"
></button>
css
@import 'luxen-ui/css/close-button/ring';

Square ​

html
<button
  type="button"
  class="l-close"
  data-appearance="square"
  aria-label="Close"
></button>
css
@import 'luxen-ui/css/close-button/square';

Circle ​

html
<button
  type="button"
  class="l-close"
  data-appearance="circle"
  aria-label="Close"
></button>
css
@import 'luxen-ui/css/close-button/circle';

Accessibility ​

Criteria ​

Color

Icon and background colors meet AA contrast ratios

WCAG1.4.31.4.11
RGAA3.2
Size

Minimum 24×24px target size; larger for touch contexts

WCAG2.5.52.5.8
Icon

Decorative icon; aria-label on the button provides the accessible name

WCAG1.1.1
RGAA1.11.3
Hover state

Clear visual change on hover

WCAG1.4.11.4.13
Focus state

Visible focus ring for keyboard users

WCAG2.4.72.4.11
RGAA10.7
Active state

Visual feedback on press

WCAG1.4.1
Disabled state

Appears inactive, not focusable when disabled

WCAG2.5.2
Accessible name

Always provide aria-label or context-specific label

WCAG4.1.2
RGAA11.111.2
Role

Uses native <button> — no extra ARIA role needed

WCAG4.1.2

Keyboard interactions ​

Enter
Activates the close button
Space
Activates the close button
Tab
Moves focus to the next focusable element
ShiftTab
Moves focus to the previous focusable element

API reference ​

Importing ​

css
@import 'luxen-ui/css/close-button/ring';

Attributes & Properties ​

data-appearancering | square | circleAttribute
Visual appearance (matches the imported appearance CSS).
commandAttribute
Invoker command (typically close).
commandforAttribute
ID of the target element to close.

CSS classes ​

.l-closeClass
Base close button with X icon via CSS mask.

CSS custom properties ​

--sizedefault:36pxCustom property
Button size.
--icon-colorCustom property
Icon color.
--icon-sizedefault:24pxCustom property
Icon size.
--ring-colorCustom property
Hover ring color (ring appearance only).
--ring-ticknessCustom property
Hover ring thickness (ring appearance only).