Foundation for Sites6.3.1 changelog
Component List

Close Button

The humble close button can be used anywhere you need something to go away on click.

A close button is a <button> element with the class .close-button. We use the multiplication symbol (&times;) as the X icon. This icon is wrapped in a <span> with the attribute aria-hidden="true", so screen readers don't read the X icon.

The button is also labeled with aria-label to clarify what the button's purpose is.

Watch this part in video

edit on codepen button 
<div class="callout">
  <button class="close-button" aria-label="Close alert" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
  <p>Look at this close button!</p>
</div>

Look at this close button!

Making Closable

The close button on its own doesn't close elements, but you can use it with Toggler, Reveal, Off-canvas, and other plugins that have open and close behaviors.

Any element can be used as a close trigger, not just close button. Adding the attribute data-close to any element within the callout will turn it into a close trigger.

The below example pairs the callout with the close button component and data-closable attribute to create a dismissible alert box.

Watch this part in video

edit on codepen button 
<div class="callout" data-closable>
  <p>You can so totally close this!</p>
  <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="success callout" data-closable="slide-out-right">
  <p>You can close me too, and I close using a Motion UI animation.</p>
  <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
    <span aria-hidden="true">&times;</span>
  </button>
</div>

You can so totally close this!

You can close me too, and I close using a Motion UI animation.

Sass Reference

Variables

The default styles of this component can be customized using these Sass variables in your project's settings file.

NameTypeDefault ValueDescription
$closebutton-position List right top

Default position of the close button. The first value should be right or left, and the second value should be top or bottom.
$closebutton-offset-horizontal Number or Map small: 0.66rem
medium: 1rem

Right (or left) offset(s) for a close button.
$closebutton-offset-vertical Number or Map small: 0.33em
medium: 0.5rem

Top (or bottom) offset(s) for a close button.
$closebutton-size Number or Map small: 1.5em
medium: 2em

Default font size(s) of the close button.
$closebutton-lineheight Number 1

The line-height of the close button. It affects the spacing of the element.
$closebutton-color Color $dark-gray

Default color of the close button.
$closebutton-color-hover Color $black

Default color of the close button when being hovered on.

Mixins

We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.

close-button-size

@include close-button-size($size);

Sets the size and position of a close button.

ParameterTypeDefault ValueDescription
$size Keyword medium

The size to use. Set to small to create a small close button. The 'medium' values defined in $closebutton-* variables will be used as the default size and position of the close button.

close-button

@include close-button;

Adds styles for a close button, using the styles in the settings variables.

Functions