Foundation - Close Button



The Close button is used when you want something to go away by clicking on it. Close button is a <button> element, which uses the .close-button class. The multiplication symbol (×) is used as the X icon which will be enclosed within the aria-hidden = "true" attribute, so the X icon will not be read by screen readers. To clarify the purpose of the button, it is labeled with aria-label.

Clicking on close button will not close the element, but it can be used with Toggler, Reveal, Off-canvas and other plugins that includes open/close actions.


The following example demonstrates how to use close button in Foundation.

      <title>Close Button</title>
      <link rel="stylesheet" href="" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src=""></script>
      <script src="" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>


      <div class = "callout">
         <button class = "close-button" aria-label = "Close alert" type = "button">
            <span aria-hidden = "true">×</span>
         <p>This is an example of close button!</p>

         $(document).ready(function() {


Let us carry out the following steps to see how the above given code works −

  • Save the above given html code foundation_close_button.html file.

  • Open this HTML file in a browser, an output is displayed as shown below.

Sass Reference


The following table lists the SASS variables in project's settings file that makes this component's default styles to get customized.

Sr.No. Name & Description Type Default Value


It represents the close button default position. The first value and second value should be right or left and top or bottom respectively.

List right top


It represents right (or left) offset for a close button.

Number 1rem


It represents top (or bottom) offset for a close button.

Number 0.5rem


It represents the close button's default font size.

Number 2em


It represents the close button's line-height, affecting the spacing of elements.

Number 1


It represents the close button's default color.

Color $dark-gray


It represents the close button's default color when hovered.

Color $black


To build this component's final CSS output, the following mixins can be used. To build your own class structure using Foundation components, you can use the mixins yourself.


@include close-button;

By using the styles in settings variables it adds close button's styles.