Button [Close]

Overview

The Close Button is a purpose-built dismiss trigger used across modals, drawers, alerts, toasts, and overlays. Instead of repurposing a generic icon button, it gives every dismissible surface a consistent, recognizable exit point, with 2 semantic variants, 4 appearance styles, and 6 sizes.

When should you use them?

Use a close button on any surface a user needs to dismiss: a modal, drawer, alert, toast, or overlay. A dedicated close control signals clearly that the element can be closed, instead of leaving users guessing whether a generic icon will work.

How should you use them?

• Use the close button only for dismissing, not for other actions like cancel or back.
• Place it in a consistent position (typically top-right) so users always know where to find it.
• Match the appearance to the surface: Ghost or Soft on light cards, Inverse on dark overlays.
• Pick the size to fit the container: XS for inline alerts, 2XL for full-screen overlays.
• Give it an accessible label like 'Close dialog', since it's an icon-only control.
• Keep it keyboard-focusable, and allow Escape to dismiss where appropriate.