Close button

An icon button for dismissing notifications, dialogs, chips, and similar interactive elements.

@layer components

Context tokens

Introduction

.close-button is a minimal icon button that signals dismissal. The close icon renders automatically through CSS — no child elements are required. The icon color adapts to the nearest context class.

Basic structure

Apply .close-button to a <button> element.

<button type="button" class="close-button" aria-label="Close"></button>

Always include an aria-label attribute — without it the button has no accessible label.

For environments where CSS may not load, it is possible to include × (×) as fallback text content. The close icon still renders normally when CSS is available — the text is visually hidden — but × provides a visible label without it. The aria-label attribute remains necessary because the text is hidden under normal conditions.

<button type="button" class="close-button" aria-label="Close">×</button>
<button type="button" class="close-button" aria-label="Close">Close</button>

Sizes

Apply .small or .large to match surrounding component sizes. The --cx-close-button-size custom property accepts any length value for one-off custom dimensions.

<button type="button" class="close-button small" aria-label="Close"></button>
<button type="button" class="close-button" aria-label="Close"></button>
<button type="button" class="close-button large" aria-label="Close"></button>
<span class="vr mx-medium"></span>
<button type="button" class="close-button" style="--cx-close-button-size: 2rem;" aria-label="Close"></button>

Disabled state

Add the disabled attribute to prevent interaction. Disabled close buttons render at reduced opacity with pointer-events: none and user-select: none applied.

<button type="button" class="close-button" disabled aria-label="Close"></button>

Contextual colors

The close button inherits its icon color from the nearest context class. Both default and solid context variants are supported.

<div class="context info p-xsmall d-flex align-items-center">
  <button type="button" class="close-button" aria-label="Close"></button>
  <button type="button" class="close-button" disabled aria-label="Close"></button>
</div>
<div class="context info solid p-xsmall d-flex align-items-center">
  <button type="button" class="close-button" aria-label="Close"></button>
  <button type="button" class="close-button" disabled aria-label="Close"></button>
</div>
<div class="context warning p-xsmall d-flex align-items-center">
  <button type="button" class="close-button" aria-label="Close"></button>
  <button type="button" class="close-button" disabled aria-label="Close"></button>
</div>
<div class="context warning solid p-xsmall d-flex align-items-center">
  <button type="button" class="close-button" aria-label="Close"></button>
  <button type="button" class="close-button" disabled aria-label="Close"></button>
</div>

Custom icon

The button supports a child <svg> element when the CSS-managed icon needs to be replaced. Place the SVG directly inside the button — the default CSS icon is suppressed automatically when a child element is present.

<button type="button" class="close-button large" aria-label="Close">
  <svg class="icon" aria-hidden="true"><use href="#xmark-circle-solid"></use></svg>
</button>

To change the default icon globally, modify the $close-button-icon Sass variable in the theme.

Positioning

When used inside a component like a notification or dialog, the close button is positioned by that component's layout. For standalone placement in a custom container, CSS position utilities control where the button appears.

This is a notification!

This is a contextual div.

<div class="notification success">
  <p class="message">This is a notification!</p>
  <button type="button" class="close-button" data-cx-dismiss="notification" aria-label="Close"></button>
</div>
<div class="context success border rounded px-medium py-small position-relative">
  This is a contextual div.
  <button type="button" class="close-button position-absolute end-0 me-medium" aria-label="Close"></button>
</div>

CSS

The Close button component can be customized through Sass variables at compile time.

Custom properties

The Close button component exposes CSS custom properties to control its appearance at runtime.

--size: var(--close-button-size, #{$close-button-medium-size});
--icon: var(--close-button-icon, #{svg-icon($close-button-icon)});
--icon-color: var(--close-button-fg-color, #{$close-button-fg-color});
--bg-color: var(--close-button-bg-color, #{$close-button-bg-color});
--idle-opacity: var(--close-button-idle-opacity, #{$close-button-idle-opacity});
--hover-opacity: var(--close-button-hover-opacity, #{$close-button-hover-opacity});
--focus-opacity: var(--close-button-focus-opacity, #{$close-button-focus-opacity});
--disabled-opacity: var(--close-button-disabled-opacity, #{$close-button-disabled-opacity});

Sass variables

The Close button component uses Sass variables in scss/config/_defaults.scss to define its defaults.

$close-button-medium-size:        1.25rem;
$close-button-large-size:         1.5rem;
$close-button-small-size:         1rem;
$close-button-fg-color:           var(--fg-color);
$close-button-bg-color:           transparent;
$close-button-fg-hover:           var(--fg-color);
$close-button-bg-hover:           transparent;
$close-button-icon:               "<svg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'><path d='M18.621 3.64a1.205 1.205 0 0 1 1.758 0c.508.47.508 1.29 0 1.758L13.777 12l6.602 6.64c.508.47.508 1.29 0 1.758a1.205 1.205 0 0 1-1.758 0l-6.601-6.601-6.641 6.601a1.205 1.205 0 0 1-1.758 0 1.205 1.205 0 0 1 0-1.757L10.223 12 3.62 5.398a1.205 1.205 0 0 1 0-1.757 1.205 1.205 0 0 1 1.758 0l6.64 6.601 6.602-6.601Z'/></svg>";
$close-button-idle-opacity:       .5;
$close-button-hover-opacity:      .75;
$close-button-focus-opacity:      1;
$close-button-disabled-opacity:   .25;