Button

Buttons are convenient tools when you need more traditional actions. To that end, Foundation has many easy to use button styles that you can customize or override to fit your needs.

Basics

A basic button can be created with minimal markup. Because buttons can be used for many purposes, it's important to use the right tag.

Use the <a> tag if the button is a link to another page, or a link to an anchor within a page. Generally anchors don't require JavaScript to work.
Use the <button> tag if the button performs an action that changes something on the current page. <button> elements almost always require JavaScript to function.

Watch this part in video

Add the attribute type="button" to <button> elements, unless the button submits a form, in which case you should add the class `.submit` and remove type="button"

<!-- Anchors (links) -->
<a href="about.html" class="button">Learn More</a>
<a href="#features" class="button">View All Features</a>

<!-- Buttons (actions) -->
<button class="submit success button">Save</button>
<button type="button" class="alert button">Delete</button>

Learn More View All Features

Sizing

Additional classes can be added to your button to change its size and shape.

Watch this part in video

<a class="button tiny" href="#">So Tiny</a>
<a class="button small" href="#">So Small</a>
<a class="button" href="#">So Basic</a>
<a class="button large" href="#">So Large</a>
<a class="button expanded" href="#">Such Expand</a>
<a class="button small expanded" href="#">Wow, Small Expand</a>

So Tiny So Small So Basic So Large Such Expand Wow, Small Expand

Responsive Expanded buttons

If you are using the Sass version, you can activate these additional responsive button expand classes by changing the $button-responsive-expanded variable to true. (It is false by default to reduce CSS file size.)

For CSS download users, you can get the CSS here and add it to your stylesheet.

<a class="button small small-only-expanded" href="#">Wow, Expand only on small viewport</a>
<a class="button small medium-only-expanded" href="#">Expand only on medium viewport</a>
<a class="button small large-only-expanded" href="#">Expand only on large viewport</a>

<a class="button small medium-expanded" href="#">Wow, Expand on medium and larger</a>
<a class="button small large-expanded" href="#">Expand on large and larger</a>

<a class="button small medium-down-expanded" href="#">Expand on medium and smaller</a>
<a class="button small large-down-expanded" href="#">Expand on large and smaller</a>

Wow, Expand only on small viewport Expand only on medium viewport Expand only on large viewport Wow, Expand on medium and larger Expand on large and larger Expand on medium and smaller Expand on large and smaller

Coloring

Add color classes to give buttons additional meaning.

Watch this part in video

<a class="button primary" href="#">Primary</a>
<a class="button secondary" href="#">Secondary</a>
<a class="button success" href="#">Success</a>
<a class="button alert" href="#">Alert</a>
<a class="button warning" href="#">Warning</a>

Primary Secondary Success Alert Warning

Custom Colors

If you're using the Sass version of Foundation, you can customize the button classes by editing the $button-palette map in your settings file. The button palette defaults to $foundation-palette.

If you don't need certain colors from the default palette, simply remove them from the list.

$button-palette: map-remove($foundation-palette, (
    primary,
    secondary
));

Or you can add more colors to the default palette.

$button-palette: map-merge($foundation-palette, (
    purple: #bb00ff
));

Or you can define your own custom button palette.

$button-palette: (
    black: #000000,
    red: #ff0000,
    purple: #bb00ff
);

Text Colors

The text color for each button class is determined by either $button-color or $button-color-alt, whichever settings variable has more contrast.

The default settings meet WCAG 2.0 level AA contrast requirements. Be sure to [check the contrast](https://webaim.org/resources/contrastchecker/) when changing color variables. To give all buttons the same color text, set `$button-color` and `$button-color-alt` to the same value — but know that doing so may decrease accessibility.

Hollow Style

Add the .hollow class to a button to give it a hollow style. Change the $button-fill variable in your settings file to hollow to make this the default style. Changing this setting will remove the .hollow class from your CSS.

<button class="hollow button" href="#">Primary</button>
<button class="hollow button secondary" href="#">Secondary</button>
<button class="hollow button success" href="#">Success</button>
<button class="hollow button alert" href="#">Alert</button>
<button class="hollow button warning" href="#">Warning</button>
<button class="hollow button" href="#" disabled>Disabled</button>

Disabled Buttons

The .disabled class will give buttons a faded appearance. The class is a purely visual style, and won't actually disable a control. For <button> elements, you can add the disabled attribute to both disable and style it. If you want to disable a link, you should add the aria-disabled attribute to mark it as disabled for assistive technology.

Watch this part in video

<a class="button disabled" href="#" aria-disabled>Disabled</a>
<button type="button" class="button primary" disabled>Disabled</button>
<button type="button" class="button secondary" disabled>Disabled</button>
<button type="button" class="button success" disabled>Disabled</button>
<button type="button" class="button alert" disabled>Disabled</button>
<button type="button" class="button warning" disabled>Disabled</button>

Disabled

Alternatively, you can also use disabled hollow buttons.

<a class="button hollow disabled" href="#" aria-disabled>Disabled</a>
<button type="button" class="button hollow primary" disabled>Disabled</button>
<button type="button" class="button hollow secondary" disabled>Disabled</button>
<button type="button" class="button hollow success" disabled>Disabled</button>
<button type="button" class="button hollow alert" disabled>Disabled</button>
<button type="button" class="button hollow warning" disabled>Disabled</button>

Disabled

Clear Style

Add the .clear class to a button to give it a clear style. Change the $button-fill variable in your settings file to clear to make this the default style. Changing this setting will remove the .clear class from your CSS.

Watch this part in video

<a class="clear button" href="#">Primary</a>
<a class="clear button secondary" href="#">Secondary</a>
<a class="clear button success" href="#">Success</a>
<a class="clear button alert" href="#">Alert</a>
<a class="clear button warning" href="#">Warning</a>
<a class="clear button" href="#" disabled>Disabled</a>

Primary Secondary Success Alert Warning Disabled

This is especially useful as a secondary action button. This way you get proper spacing and line-height. Example:

Add a dropdown arrow to your button with the .dropdown class.

This doesn't add dropdown functionality automatically. To do that, you can attach our Dropdown plugin.

<button class="dropdown button tiny">Dropdown Button</button>
<button class="dropdown button small">Dropdown Button</button>
<button class="dropdown button">Dropdown Button</button>
<button class="dropdown button large">Dropdown Button</button>
<button class="dropdown button expanded">Dropdown Button</button>

Accessibility

Make sure that the text of the button is descriptive. If for some reason, your button contains no readable text (for example, just a symbol or icon), add screen reader-only text to the button to clarify its purpose. The symbol or icon should be wrapped in an element with the attribute aria-hidden="true", to prevent screen readers from trying to pronounce the symbol.

Use the .show-for-sr class to define screen reader-only text.

<button class="button" type="button">
  <!-- Screen readers will see "close" -->
  <span class="show-for-sr">Close</span>
  <!-- Visual users will see the X, but not the "Close" text -->
  <span aria-hidden="true"><i class="fi-x"></i></span>
</button>

Sass Reference

Variables

The default styles of this component can be customized using these Sass variables in your project's settings file.

Name	Type	Default Value	Description
`$button-font-family`	Font	`inherit`	Font family for button elements.
`$button-font-weight`	Font-Weight	`null`	Font weight for button elements. Ignored if null (default)
`$button-padding`	List	`0.85em 1em`	Padding inside buttons.
`$button-margin`	List	`0 0 $global-margin 0`	Margin around buttons.
`$button-fill`	Keyword	`solid`	Default fill for buttons. Can either be `solid` or `hollow`.
`$button-background`	Color	`$primary-color`	Default background color for buttons.
`$button-background-hover`	Color	`scale-color($button-background, $lightness: -15%)`	Background color on hover for buttons.
`$button-color`	List	`$white`	Font color for buttons.
`$button-color-alt`	List	`$black`	Alternative font color for buttons.
`$button-radius`	Number	`$global-radius`	Border radius for buttons, defaulted to global-radius.
`$button-border`	List	`1px solid transparent`	Border for buttons, transparent by default
`$button-hollow-border-width`	Number	`1px`	Border width for hollow outline buttons
`$button-sizes`	Map	`tiny: 0.6rem small: 0.75rem default: 0.9rem large: 1.25rem`	Sizes for buttons.
`$button-palette`	Map	`$foundation-palette`	Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on.
`$button-opacity-disabled`	List	`0.25`	opacity for a disabled button.
`$button-background-hover-lightness`	Number	`-20%`	Background color lightness on hover for buttons.
`$button-hollow-hover-lightness`	Number	`-50%`	Color lightness on hover for hollow buttons.
`$button-transition`	List	`background-color 0.25s ease-out, color 0.25s ease-out`	transitions for buttons.
`$button-responsive-expanded`	Boolean	`false`	Additional responsive classes for .expanded

Mixins

We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.

button-expand

@include button-expand($expand);

Expands a button to make it full-width.

Parameter	Type	Default Value	Description
`$expand`	Boolean	`true`	Set to `true` to enable the expand behavior. Set to `false` to reverse this behavior.

button-fill

@include button-fill($fill);

Sets the base styles of a hollow or clear button filling according to $fill. See mixin button-fill-style for the filling styles.

Parameter	Type	Default Value	Description
`$fill`	Keyword	`$button-fill`	Type of filling between `hollow` and `clear`. `solid` has no effects.

button-fill-style

@include button-fill-style($fill, $background, $background-hover, $color);

Sets the visual styles of a solid/hollow/clear button filling according to $fill. See mixins button-style, button-hollow-style and button-clear-style for effects of visual styling parameters.

Parameter	Type	Default Value	Description
`$fill`	Keyword	`$button-fill`	Type of filling between `hollow` and `clear`.
`$background`	Color	`$button-background`	-
`$background-hover`	Color	`$button-background-hover`	-
`$color`	Color	`$button-color`	-

button-style

@include button-style($background, $background-hover, $color);

Sets the visual style of a button.

Parameter	Type	Default Value	Description
`$background`	Color	`$button-background`	Background color of the button.
`$background-hover`	Color	`$button-background-hover`	Background color of the button on hover. Set to `auto` to have the mixin automatically generate a hover color.
`$color`	Color	`$button-color`	Text color of the button. Set to `auto` to automatically generate a color based on the background color.

button-hollow

@include button-hollow;

Sets the base styles of a hollow button. See mixin button-hollow-style for the filling styles.

button-hollow-style

@include button-hollow-style($color, $hover-lightness, $border-width);

Sets the visual style of a hollow button.

Parameter	Type	Default Value	Description
`$color`	Color	`$button-background`	Text and border color of the button.
`$hover-lightness`	Color	`$button-hollow-hover-lightness`	Color lightness on hover.
`$border-width`	Color	`$button-hollow-border-width`	Border width of the button.

button-clear

@include button-clear;

Sets the base styles of a clear button. See mixin button-clear-style for the filling styles.

button-clear-style

@include button-clear-style($color, $hover-lightness);

Sets the visual style of a clear button.

Parameter	Type	Default Value	Description
`$color`	Color	`$button-background`	Text color of the button.
`$hover-lightness`	Color	`$button-hollow-hover-lightness`	Color lightness on hover.

button-disabled

@include button-disabled($opacity);

Adds disabled styles to a button by fading the element and reseting the cursor.

Parameter	Type	Default Value	Description
`$opacity`	Number	`$button-opacity-disabled`	Opacity of the disabled button.

@include button-dropdown($size, $color, $offset);

Adds a dropdown arrow to a button.

Parameter	Type	Default Value	Description
`$size`	Number	`0.4em`	Size of the arrow. We recommend using an `em` value so the triangle scales when used inside different sizes of buttons.
`$color`	Color	`white`	Color of the arrow.
`$offset`	Number	`$button-padding`	Distance between the arrow and the text of the button. Defaults to whatever the right padding of a button is.

button

@include button($expand, $background, $background-hover, $color, $style);

Adds all styles for a button. For more granular control over styles, use the individual button mixins.

Parameter	Type	Default Value	Description
`$expand`	Boolean	`false`	Set to `true` to make the button full-width.
`$background`	Color	`$button-background`	Background color of the button.
`$background-hover`	Color	`$button-background-hover`	Background color of the button on hover. Set to `auto` to have the mixin automatically generate a hover color.
`$color`	Color	`$button-color`	Text color of the button. Set to `auto` to automatically generate a color based on the background color.
`$style`	Keyword	`solid`	Set to `hollow` to create a hollow button. The color defined in `$background` will be used as the primary color of the button.

Basics

Sizing

Responsive Expanded buttons

Coloring

Custom Colors

Text Colors

Hollow Style

Disabled Buttons

Clear Style

Dropdown Arrows

Accessibility

Sass Reference

Variables

Mixins

button-expand

button-fill

button-fill-style

button-style

button-hollow

button-hollow-style

button-clear

button-clear-style

button-disabled

button-dropdown

button