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;
}