Button

Create distinct, actionable buttons with options for icons and customization. Explore various designs, colors, and sizes to ensure a great user experience and accessibility.

Using Buttons

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

Here's a basic button example with no extra styles.

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).

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).

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.

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.

Optionally, use our border-radius utility classes (e.g. .border-radius-pill) on .button selectors.

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.

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 :hover and :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 --disperse to .button class. Chained together, the full class is .button--disperse. By default, this class makes the button full-width of its parent.

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).

Icon-only buttons are transparent by default. Like our other buttons, color can be applied with background-color and text color utility classes.

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.

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.

Customize .button--icon-over-text buttons With relevant CSS variables or utility classes.

Related CSS Variables

Further customize by redefining any of their related CSS variables as shown below.