Overview

Foundation 6 comes with several different types of buttons that can provide you with different functionality. However, the styling options inside every button are the same. Every button has all of the same style options that you see on this page.

Here is a list of many things that buttons can be configured to do.

  • Link to a URL
  • Trigger a pre-formatted email
  • Download a file
  • Link to a section of your webpage
  • Open a Lightbox, Dropdown, Off Canvas
  • Open to a Tab or Accordion section
  • Submit or reset a form
  • Easily integrate with 3rd party stacks

Button Styles

Below are some of the out of the box styles that can easily be set in every button stack with a simple setting change. However, with the power of swatches, you can really style a button in an infinite amount of ways.

Button Sizes

Buttons have the following preset sizes available. Using swatches you can easily customse the sizing to your liking.

Button Tooltips

You can add toolips to any button. This can give the user more information about what a button can do for them. The tooltip position can be easily configured through the settings. The auto positioning will automatically position the tooltip to ensure that it can always be seen no matter where the button is on the page. Tooltip styles can be configured with swatches as well.

Button Groups

Button Groups allow you to conveniently merge multiple buttons into one cohessive component. Button Groups have all of the same styles and sizing options as all other buttons.

Hamburger

The hamburger button provides you with a standard 3 bar hamburger. It can be used for all of the same functionality as a button in order to open various Foundation 6 components. You have the ability to customize the color and size of the bars.

Close Button

The humble close button can be used anywhere you need something to go away on click. For example, to close a Lightbox, Off Canvas, Dropdown or any other "closable" Foundation 6 component. The example below will close a Callout.

The Site Styles stack is the one stack that will manage off of the styles for your site and how to behave globally.

Video Tutorials

Below are video tutorials that are relevant to the stacks used on this page.

Loading...