CloseButton Overlay: Free Buttons Component by ahmad madhoun

A modern, accessible "Close" button for overlays, modals, and drawers—fully customizable, theme-aware, and packed with smooth micro-interactions. Includes corner placement, keyboar

About this Component

This CloseButton component is a modern, highly customizable solution designed for overlays, modals, drawers, and similar UI surfaces. It prioritizes accessibility, seamless UX, and design flexibility, making it a standout choice for polished product interfaces.see Live real Example here

Key Features:

Fully Customizable: Effortlessly adjust size, visual style (subtle, ghost, or solid), corner placement (top/bottom, left/right), colors, icon weight, and z-index to fit any theme or layout needs.

Responsive Corner Placement: Pin this button to any screen corner with pixel offset controls. RTL support automatically mirrors placement for right-to-left languages.

Accessibility First: ARIA labels, full keyboard navigation, hotkey display, and focus management ensure an inclusive experience for all users.

Smooth Micro-Interactions: Animations for hover, press, and close transitions feel silky smooth and context-appropriate, while users with reduced motion preferences get an optimized experience.

Keyboard Support: Optionally closes overlays on Escape keypress (with visual tooltip/hotkey display for power users), and robust event handler support (onClose, onClick, onCloseStart, onCloseEnd).

Visual Feedback: On hover and press, the button adapts its style for tactile feedback. Tooltips (optional) appear for better clarity, and focus styling aids keyboard users.

Performance & Robustness: Updates are managed with React’s startTransition for responsive state changes, with guard clauses to prevent accidental interaction when disabled or mid-closing.