---
title: "CloseButton Overlay — Free Framer component · Best of Framer"
description: "Free Framer component · by madhoundes · Buttons. This CloseButton component is a modern, highly customizable solution designed for overlays, modals, drawers, and similar UI surfaces."
canonical: "https://framer.elliotli.dev/component/closebutton-overlay"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/CloseButton Overlay

# CloseButton Overlay

[View on Framer](https://framer.com/marketplace/components/closebutton-overlay/?via=elliot-li)

![CloseButton Overlay preview image 1](https://framer.elliotli.dev/og/component/closebutton-overlay/8e5858e0d7a89fdf/1600x1200.jpg)

## Summary

This CloseButton component is a modern, highly customizable solution designed for overlays, modals, drawers, and similar UI surfaces.

## Description

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](https://multidisciplinary-premise-700624.framer.app/see-in-action)

**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.
    

-   **Design System Ready**: Theme-aware with accent and icon color props, plus sizing presets matching popular design systems (S/M/L).
    

**Usage Recommendations:**

-   Place at overlay or modal edges, selecting a variant to match your UI’s mood (subtle for minimal, solid for emphasis).
    

-   Add accessible labels for every context.
    

-   Leverage callbacks (onCloseStart, onCloseEnd, onClose) to integrate with analytics, UX flows, or layered navigation structures.
    

-   Perfect for apps that need an elegant, frictionless user exit mechanism, without sacrificing customization or accessibility.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #6026

## Details

- **Author**: madhoundes
- **Published**: 2025-11-24
- **Updated**: 2025-11-24
- **Added**: 2025-11-11
- **Categories**: Buttons

## More like this

-   [Liquid Blob Button](/component/liquid-blob-button) — Oddframe · Free — Interactive Liquid Blob CTA Button
-   [Pixel Face Toggle](/component/pixel-face-toggle) — Zac Nielson · $9 — Dark mode switch with a pixel face
-   [Liquid Hover Media](/component/liquid-hover-media) — Bardia Madani · $5 — Fluid media distortion on hover
-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow