Closeable

🧭 When to Use a Close Button

Use a close button when:

• An element can be dismissed by the user (e.g. alerts, overlays)

• A modal, drawer, or flyout should offer an exit without completing an action

• A tag, chip, or toast should be manually removable

Avoid using close buttons for critical actions like deletion or navigation. They should always be non-destructive and reversible unless paired with a confirmation.

🎨 Types (Visual Style)

TypeUse CaseTransparentNo background, blends into the surface. Best for subtle UI like tags or overlays.FillIncludes a background (circle or rounded square). More visible and great for modals, drawers, or elevated surfaces.

📏 Sizes

SizeContextDefaultIdeal for tags, chips, and small alertsMediumBest for modals, drawers, and larger UI componentsLargeUse sparingly—primarily in immersive experiences or full-screen views

All sizes maintain consistent padding and icon scaling.

🎯 Statuses (Interaction States)

StateDescriptionDefaultStatic visual for idle stateHoverSlight color change or background appears for visual feedbackFocusVisible ring or outline for keyboard users (WCAG-compliant)

✅ Ensure close buttons are easy to identify without relying on color alone.

♿ Accessibility Considerations

🔍 Design

• Minimum touch target: Ensure at least 24x24px touch/clickable area, even for small UIs.

• Positioning: Consistently place close buttons in the top-right or alongside dismissible elements.

• Tooltip (optional): Add tooltips like “Close” or “Dismiss” for clarity, especially if no supporting label is near.

🧑‍💻 Code (if implemented)

• Use semantic <button aria-label="Close"> for screen readers.

• Ensure it’s keyboard-accessible (Tab to focus, Enter or Space to activate).

• Add aria-hidden="true" to decorative icons inside the button so screen readers don’t read the “x” character.

✅ Best Practices

• Don’t overload the interface with close buttons. Use them only when dismissing an element is expected or essential.

• Always ensure that using the close button does not result in data loss unless the user has already committed to an action.

• When used in overlays or modals, the close button should be a secondary escape mechanism alongside pressing the Esc key or clicking outside the content area.