Close Button

The close button is a specialized icon button used for dismissing elements like alerts, dialogs, or popovers. It provides a consistent and recognizable way for users to close content.

Examples

Basic Close Button

Use the .ro-close class on a <button> element. It’s designed to contain an icon, which should be included within the button.

<button class="ro-close" aria-label="Close">
<i class="ro-icon ro-icon-x-small"></i>
</button>

Preview

White Variant

For use on dark or colored backgrounds where the default hover effect may not be visible, add the .ro-bg-white class. This ensures the hover state has appropriate contrast.

<button class="ro-close ro-bg-white" aria-label="Close">
<i class="ro-icon ro-icon-x-small"></i>
</button>

Preview

In a Component

The close button is typically positioned absolutely within a parent component, such as the header of a card or dialog.

<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">This is a error alert</p>
            <div class="ro-alert-actions">
              <button class="ro-close" aria-label="Close notification"><i class="ro-icon ro-icon-x-small"></i></button>
            </div>
        </div>
        <p class="ro-alert-body">This message communicates a error status.</p>
      </div>
    </div>

Preview

This is a error alert

This message communicates a error status.

---

Properties

Close button variants are controlled via a modifier class.

Class	Default	Description
.ro-bg-white	(none)	Changes the hover background color to be suitable for dark or colored surfaces.