Foundation - Close Button

Quiz

Description

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.

Example

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

<html>
   <head>
      <title>Close Button</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>

   </head>

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

      
      <script>
         $(document).ready(function() {
            $(document).foundation();
         })
      </script>
   </body>
</html>

Output

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

Variables

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
1	$closebutton-position 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
2	$closebutton-offset-horizontal It represents right (or left) offset for a close button.	Number	1rem
3	$closebutton-offset-vertical It represents top (or bottom) offset for a close button.	Number	0.5rem
4	$closebutton-size It represents the close button's default font size.	Number	2em
5	$closebutton-lineheight It represents the close button's line-height, affecting the spacing of elements.	Number	1
6	$closebutton-color It represents the close button's default color.	Color	$dark-gray
7	$closebutton-color-hover It represents the close button's default color when hovered.	Color	$black

Mixins

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.

CLOSE-BUTTON

@include close-button;

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

foundation_basic_controls.htm

Print Page