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

CSS

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

Square

CSS

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

Circle

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-appearanceAttribute

ring · square · circle

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

--sizeName

Button size (default: 36px)

--icon-colorName

Icon color

--icon-sizeName

Icon size (default: 24px)

--ring-colorName

Hover ring color (ring appearance only)

--ring-ticknessName

Hover ring thickness (ring appearance only)