Close Button

The close button is a ghost icon button used to dismiss elements like alerts, dialogs, or popovers.

Examples

Basic Close Button

Use a small ghost icon .ro-btn with an aria-label for accessibility.

<button class="ro-btn ro-variant-ghost ro-shape-icon ro-size-sm" aria-label="Close">
  <i class="ro-icon ro-icon-x-small"></i>
</button>

Preview

Inverted on Colored Surfaces

On dark or colored backgrounds, use .ro-color-scheme-inverted so hover and focus states remain visible.

<button class="ro-btn ro-variant-ghost ro-color-scheme-inverted ro-shape-icon ro-size-sm" aria-label="Close">
  <i class="ro-icon ro-icon-x-small"></i>
</button>

Preview

In a Component

Place the close button in an actions area, such as .ro-alert-actions or .ro-toast-header-actions.

<div class="ro-alert ro-color-scheme-danger">
  <i class="ro-alert-icon ro-icon ro-icon-info-circle"></i>
  <div class="ro-alert-content">
    <div class="ro-alert-header">
      <p class="ro-alert-title">Error alert</p>
      <div class="ro-alert-actions">
        <button class="ro-btn ro-variant-ghost ro-color-scheme-inverted ro-shape-icon ro-size-sm" aria-label="Close">
          <i class="ro-icon ro-icon-x-small"></i>
        </button>
      </div>
    </div>
    <p class="ro-alert-body">Something went wrong.</p>
  </div>
</div>

Preview

Error alert

Something went wrong.

Properties

Class	Description
.ro-variant-ghost	Transparent background with hover state.
.ro-shape-icon	Square icon-only button.
.ro-size-sm	Compact size for inline dismiss actions.
.ro-color-scheme-inverted	Light foreground for use on dark or accent backgrounds.

In overlays

Class	Description
.ro-overlay-close	Absolute overlay dismiss control (40×40). Used in popovers and modals.
.ro-popover-close	Close control positioned in a popover header.
.ro-btn.ro-toast-close	Toast dismiss button. See Toasts.

Deprecated

The legacy .ro-close class is no longer shipped in @ringover/styles. Use a ghost icon button as shown above. See the Migration guide.