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
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.
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.
Dropdowns can contain any content that you want. You can even have entire column layouts if you need to.
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 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.
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.
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.
Below are video tutorials that are relevant to the stacks used on this page.