5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:Tab3,

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.

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.

5a:[["$","$L5d",null,{"post":{"id":"019ab6b0-aab4-755e-bac9-49bdd9968501","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"6fb7a007-c022-4ff2-b2f9-820aa08c012e","name":"madhoundes","slug":"ahmad-madhoun","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/33030/Zoho-Profile-Avatar-ahmed-6SZCm05NhRAbYdmsTLsQesSq0Jr2gM.png","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"FToBwwuoethQLcxJpbg6","resolved":true,"title":"CloseButton Overlay","body":"$5e","bodyJson":null,"introduction":"","slug":"closebutton-overlay","author":{"framerUserId":"6fb7a007-c022-4ff2-b2f9-820aa08c012e","name":"madhoundes","slug":"ahmad-madhoun","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/33030/Zoho-Profile-Avatar-ahmed-6SZCm05NhRAbYdmsTLsQesSq0Jr2gM.png","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/FToBwwuoethQLcxJpbg6/closebutton-overlay-XV11qYJ6tVJmpPmYBiMKlDnuGS5H2b","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-11-11T04:23:05.201Z","updatedAt":"2025-11-24T16:19:19.286Z","publishedAt":"2025-11-24T16:27:02.708Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://re.chujiqiqi.com/m/CloseButton-QrX6.js@9rSv49jnBXBi3b6Qq9dQ","previewUrl":"https://multidisciplinary-premise-700624.framer.app/see-in-action","price":null,"paymentUrl":null,"workshop":true,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"9rSv49jnBXBi3b6Qq9dQ","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-11-24T16:27:02.708Z","updatedAt":"2025-11-24T16:27:02.708Z","reported":false}}],"$L5f"]

Suggested for you