Photo by Karl Anderson
Distinct, actionable styles for text and icon buttons.
The Button Selector
Buttons within Natura11y require a
.button utility class on an
<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.
Add color to a
.button selector with our theme color utilities. These classes apply the button's appropriate text color automatically (Figure 2).
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
block. This breaks the vertical centering of the icon within the button (See buttons with text and icon below).
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.
Button Border Radius
.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.
Optionally, use our border-radius utility classes (e.g.
.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.
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 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
:focus states. Further still, it provides a small margin to separate the text from the icon.
Dispersing the text and icon
Create a button where the text and icon sit on opposing sides. Add the chain modifier class
.button--has-icon class. Chained together, the full class is
.button--has-icon--disperse. By default, this class makes the button full-width of its parent.
For icon-only buttons, apply the
.button--icon--only modifier class to the
Icon-only buttons require a single child selector. A
<span> with its combined icon classes (just like the text and icon buttons described above).
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
Icon Over Text Buttons
Position a prominent icon over smaller text. To do this, append the
.button--icon-over-text modifier class to a
.button selector. This button arrangement, inclusive of both the text and the icon, has a fixed width which you can customize to suit your needs. By allowing the text to be marginally broader than the icon, the text can extend to a new line when it exceeds the available width.
.button--icon-over-text buttons With relevant CSS variables or utility classes.
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
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.
.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.