Close button

Introduction

The close button component provides a consistent, accessible way to dismiss or close interactive elements such as modals, notifications, and alerts. Designed to be immediately recognizable, the close button maintains a consistent appearance across your interface while supporting various sizes and contextual styling.

Basic usage

Add the .close-button class to any <button> element to create a close button with the default X icon.

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

Custom icon

By default, the close button displays the X icon automatically through CSS. You can override this by including your own SVG icon:

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

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

Sizes

Apply .small or .large classes to adjust close buttons to match component sizes. Use the --cx-close-button-size CSS variable to set custom dimensions when the predefined sizes don't meet your needs.

<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 visually indicate that the close action is unavailable. Disabled close buttons have reduced opacity and cannot be interacted with.

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

The disabled state applies pointer-events: none and user-select: none to prevent hover and active states from triggering.

Contextual colors

Close buttons automatically adapt to their parent's context color, ensuring proper contrast in different color schemes.

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

You can override colors using the component's CSS variables:

• --cx-close-button-color: Sets the normal state color
• --cx-close-button-hover-color: Sets the hover state color

Positioning

When integrated into components like modals or notifications, close buttons are typically positioned automatically. For custom layouts, use position utilities to place the close button:

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

CSS

This component can be customized using CSS variables, allowing for styles to be modified dynamically on the page. These CSS variables are part of Chassis CSS's design token system, giving design teams control over component appearance. See the design tokens page for more details.

Custom properties

These CSS variables control the component's appearance and can be modified dynamically on the page. Components use cascading variables, allowing seamless variations in size, color, and style without redundant style declarations through component inheritance and the context class system.

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

Sass variables

These Sass variables control the component's appearance and can be modified in the project's variables file before compilation.

$close-button-medium-size:        1.25rem;
$close-button-large-size:         1.5rem;
$close-button-small-size:         1rem;
$close-button-padding-x:          var(--#{$prefix}space-2xsmall);
$close-button-padding-y:          var(--#{$prefix}space-2xsmall);
$close-button-fg-color:           var(--#{$prefix}fg-main);
$close-button-bg-color:           transparent;
$close-button-fg-hover:           var(--#{$prefix}icon-main);
$close-button-bg-hover:           transparent;
$close-button-icon:               svg-icon("<svg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'><path d='M19.148 17.56c.422.468.422 1.169 0 1.59-.468.467-1.171.467-1.593 0l-5.532-5.561-5.578 5.56c-.468.468-1.172.468-1.593 0-.47-.42-.47-1.121 0-1.588L10.43 12 4.852 6.44c-.47-.468-.47-1.169 0-1.59a1.03 1.03 0 0 1 1.546 0l5.625 5.608 5.579-5.56a1.03 1.03 0 0 1 1.546 0c.47.42.47 1.12 0 1.588L13.57 12z' /></svg>");
$close-button-focus-shadow:       $focus-ring-box-shadow;
$close-button-idle-opacity:       .5;
$close-button-hover-opacity:      .75;
$close-button-focus-opacity:      1;
$close-button-disabled-opacity:   .25;