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.

The Dropdown button behave like a normal button. However, it simply adds a caret to the button that can visually inform the used that the button will trigger some sort of dropdown type panel. This dropdown could contain links or any type of content that you see fit.

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.

Share Sheets

You can trigger an native OS Share Sheet from a button. You can customize the customize the url, title and text that gets sent along with the share action. You can even send files! Check out the share picture demo for an example.

By default, if your browser does not support the share sheet (currently Firefox and Chrome), then the button is hidden from view. This behavior is configurable.

Share Foundation 6

Video Tutorials

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

Loading...