Skip to contentSkip to footer
Brown mushrooms on ground

Photo: Karl Anderson

Button

Introduction

Create distinct, actionable buttons with options for icons, color, sizing, and customization.

Using buttons

To use buttons in Natura11y, add .button to an <a> or <button> element. Buttons inherit the text color and font size of their parent element by default.

Button
HTML
<!-- Link styled as a button -->
<a class="button" href="#1">
  Button
</a>


<!-- Button element -->
<button class="button" type="button">
  Button
</button>


<!-- Text span for underline on hover/focus -->
<a class="button" href="#1">
  <span class="text">Button</span>
</a>
Figure 1
Figure 1 notes
LinesDetails
2

The .button class is required on the <a> or <button> element.

13

Optionally wrap the button text in <span class="text"> to add a visible underline when the button is hovered or focused.

Coloring buttons

Add color to a .button selector with theme color utilities. These classes apply the button’s appropriate text color automatically.

HTML
<a class="button theme-primary" href="#1">
  Primary
</a>


<a class="button theme-secondary" href="#1">
  Secondary
</a>


<a class="button theme-dark" href="#1">
  Dark
</a>
Figure 2

Full-width buttons

For buttons that span the width of their parent, add the .width-100 utility. Do not use .display-block; buttons use flex for vertical centering, especially when icons are present.

HTML
<a class="button theme-primary width-100" href="#1">
  Button
</a>
Figure 3

Outlined buttons

Create a button with an outline instead of a fill. Add .button--outline to the .button selector. The outline color inherits from the button’s current text color.

HTML
<a class="button button--outline" href="#1">
  Button
</a>


<a class="button button--outline text-color-link" href="#1">
  Button
</a>
Figure 4

Button border radius

Globally, all .button selectors have a border radius set with --button-border-radius. You can also use border-radius utility classes directly on .button selectors.

HTML
<a class="button theme-primary border-radius-0" href="#1">
  Button
</a>


<a class="button theme-secondary border-radius-pill" href="#1">
  Button
</a>
Figure 5

Sizing buttons

Buttons inherit font size. Padding uses relative units, so resizing a parent with a font-size utility resizes the buttons inside it.

HTML
<ul class="nav nav--horizontal font-size-sm">
  <li>
    <a class="button" href="#1">Button</a>
  </li>
  <li>
    <a class="button" href="#1">Button</a>
  </li>
  <li>
    <a class="button" href="#1">Button</a>
  </li>
</ul>
Figure 6

Text and icon buttons

To include an icon in a button, add an icon element as a child of .button. Icons can appear before or after the text.

HTML
<a class="button theme-primary" href="#1">
  <span class="icon icon-edit" aria-hidden="true"></span>
  <span class="text">Edit</span>
</a>


<a class="button button--outline" href="#1">
  <span class="text">Delete</span>
  <span class="icon icon-delete" aria-hidden="true"></span>
</a>
Figure 7

Disperse buttons

Create a button where the text and icon sit on opposing sides. Add .button--disperse to the .button selector. This modifier makes the button full-width of its parent by default.

HTML
<a class="button button--disperse text-color-link" href="#1">
  <span class="text">Button</span>
  <span class="icon icon-arrow-right" aria-hidden="true"></span>
</a>
Figure 8

Icon-only buttons

For icon-only buttons, apply .button--icon-only to the .button selector. Icon-only buttons require an accessible name with aria-label and the icon should be hidden from assistive technology with aria-hidden="true".

HTML
<a class="button button--icon-only" href="#1" aria-label="Home">
  <span class="icon icon-home" aria-hidden="true"></span>
</a>


<a class="button button--icon-only theme-primary" href="#1" aria-label="Print">
  <span class="icon icon-print" aria-hidden="true"></span>
</a>
Figure 9

Icon over text buttons

Position a prominent icon over smaller text with .button--icon-over-text. The icon and text use .button__icon and .button__text child elements.

HTML
<button class="button button--icon-over-text" type="button">


  <span class="button__icon">
    <span class="icon icon-home" aria-hidden="true"></span>
  </span>


  <span class="button__text">Home</span>


</button>
Figure 10
Figure 10 notes
LinesDetails
1

Add .button--icon-over-text to the button element.

3-5

Use .button__icon for the icon area. Theme and border radius utilities can be added here.

7

Use .button__text for the text below the icon.

Color

Icon