![](/v1/static/6ae6643700428bf2a53e1182a56e9d81/6a9ae/buttons.jpg)
Photo by Karl Anderson on Unsplash
Buttons
Distinct, actionable styles for text and icon buttons.
Like our navigation links, buttons include visible hover and focus states for keyboard users.
Icon buttons include for screen readers, and visible tooltips for sighted users.
The Button Selector
Buttons within Natura11y require a .button
utility class on an <a>
or <button>
tag, shown in Figure 1. By default, .button
selectors inherit text color and font size from their parent.
The example below is a generic .button
selector with no other styles yet applied.
<a class="button" href="#1">
Button
</a>
<button class="button">
Button
</button>
Coloring Buttons
Add color to a .button
selector with our theme color utilities. These classes apply the button's appropriate text color automatically (Figure 2).
<a class="button theme-primary" href="#1">
Button
</a>
<a class="button theme-secondary" href="#1">
Button
</a>
<a class="button theme-dark" href="#1">
Button
</a>
Full-width Buttons
For buttons that span the width of their parent, add the .width-100 size utility class (Figure 3).
Do not use .display-block
for full-width buttons. Buttons have a display property of flex (for vertical centering text with icons). Using use .display-block
changes the buttons display property from flex
to block
. This breaks the vertical centering of the icon within the button (See buttons with text and icon below).
<a class="button width-100 theme-primary" href="#1">
Button
</a>
Outlined Buttons
Create a button with an outline instead of a fill. Add the outline modifier class .button--outline
to the .button
selector. The outline width is a 2x multiple of your theme's body border width.
The outline color inherits the button's text color. You can change the color using our text color utility classes.
<a class="button button--outline" href="#1">
Button
</a>
<a class="button button--outline text-color-link" href="#1">
Button
</a>
Button Border Radius
Globally, all .button
selectors have a border radius. This value is set with the :root
scoped CSS Variable --button-border-radius
(see Figure 5). Learn how to customize CSS Variables.
/* Globally remove border radius in CSS */
:root {
--button-border-radius: 0;
}
Optionally, use our border-radius utility classes (e.g. .border-radius-pill
) on .button
selectors.
<a class="button theme-primary border-radius-pill" href="#1">
Button
</a>
Sizing Buttons
With Natura11y, .button
selectors inherit their font size. Padding is set with relative (em) sizes. This allows you to resize multiple buttons at once. Use our font size utility classes, or declare your own CSS values.
The example below applies the .font-size-sm
utility class to a <ul>
containing buttons. Each button within this <ul>
becomes smaller with this single declaration.
<ul class="nav nav--horizontal font-size-sm">
<li>
<a class="button theme-primary" href="#1">
Button
</a>
</li>
<li>
<a class="button theme-primary" href="#1">
Button
</a>
</li>
<li>
<a class="button theme-primary" href="#1">
Button
</a>
</li>
</ul>
Text and Icon Buttons
Add an icon to a .button
selector with the .button--has-icon
modifier class (Figure 7). Buttons with icons require two child selectors.
The first child is is a <span>
with its combined icon classes. The second child is a <span>
with a .button__text
class. This holds the button's text. Further, the .button__text
selector is our target for underlining the text on :hover
and :focus
states. Further still, it provides a small margin to separate the text from the icon.
<a class="button button--has-icon theme-primary" href="#1">
<span class="icon icon-edit"></span>
<span class="button__text">Button</span>
</a>
<a class="button button--has-icon button--outline" href="#1">
<span class="icon icon-delete"></span>
<span class="button__text">Delete</span>
</a>
Dispersing the text and icon
Create a button where the text and icon sit on opposing sides. Add the chain modifier class --disperse
to .button--has-icon
class. Chained together, the class is .button--has-icon--disperse
. By default, this class makes the button full-width of its parent.
<a class="button button--has-icon--disperse theme-dark" href="#1">
<span class="button__text">Button</span>
<span class="icon icon-arrow-right"></span>
</a>
Icon-only Buttons
For icon-only buttons, apply the .button--icon--only
modifier class to the .button
selector.
Icon-only buttons require a single child selector. A <span>
with its combined icon classes (just like the text and icon buttons described above).
<a class="button button--icon-only" href="#1" aria-label="Home">
<span class="icon icon-home" aria-hidden="true"></span>
</a>
Icon-only buttons are transparent by default. Like our other buttons, color can be applied with background-color and text color utility classes.
<a class="button button--icon-only theme-primary" href="#1" aria-label="Home">
<span class="icon icon-home" aria-hidden="true"></span>
</a>
Do not use the title
attribute to describe the button(on its hover state). Instead apply the aria-label
attribute (see Figure 10). Icon-only buttons with the aria-label attribute offer a custom visible tooltip. The core
javascript file (natura11y.js) adds these tooltips to the DOM when the document loads.
The Button Group
Need a horizontal list of buttons? You can place mixed button types (text and icon) within the .nav
component. You would need to include the .nav--horizonal
modifier class. We designed the .nav
component mostly for response text navigation. For legibility and cognitive accessibility, a healthy space is present between each item within the .nav
component.
This is not always your best option for horizontal buttons. Particularly for grouping icon-only buttons (or mixed icon and text buttons) along the horizontal axis.
The .button-group
selector aligns buttons horizontally while giving them the same height. The value of --button-icon-size
determines the height of .button-group
. All buttons within .button-group
stretch to fit this height.
<div class="button-group">
<a class="button button--outline" href="#1">
Sign In
</a>
<a class="button button--icon-only" href="#1" aria-label="Language">
<span class="icon icon-language" aria-hidden="true"></span>
</a>
<a class="button button--icon-only" href="#1" aria-label="Search">
<span class="icon icon-search" aria-hidden="true"></span>
</a>
</div>
Related CSS Variables
Further customize Buttons by redefining any of their related CSS variables as shown below.
:root {
--button-padding-x: 1em;
--button-padding-y: 0.75em;
--button-font-weight: var(--body-font-weight-bold);
--button-text-transform: initial;
--button-letter-spacing: normal;
--button-text-transform: initial;
--button-border-radius: 0.25em;
--button-outline-border-width: calc( var(--default-border-width) * 2);
--button-icon-only-size: 2.25em;
}