Buttons

• src
• buttons
• buttons.scss

Class list

Description

A .buttons is meant to have only two kinds of immediate children, a .button or a .reveal-wrapper. Use the .buttons class on a block level element such as a div.

Example

<div class="buttons">
    <button class="button">one</button>
    <button class="button">two</button>
    <button class="button">three</button>
</div>

Use themes or the .outlined class on the individual buttons, as you normally would.

Flex utility class

Using the .flex utility class on a .buttons causes each button to become equal in width.

<div class="buttons flex">
    <button class="button">one</button>
    <button class="button">two</button>
    <button class="button">three</button>
</div>

Border radius utility classes

Using the .r-round or .r-0 utility classes on a .buttons will affect the first and last children of the .buttons.

<div class="buttons r-round">
    <button class="button">one</button>
    <button class="button">two</button>
    <button class="button">three</button>
</div>
<div class="buttons r-0">
    <button class="button">one</button>
    <button class="button">two</button>
    <button class="button">three</button>
</div>

Font size scaling

Using one of the font-size utility classes on a .buttons will cause each immediate child .button or .reveal-wrapper to inherit that font-size.

<div class="buttons h6">
    <button class="button">one</button>
    <button class="button">two</button>
    <button class="button">three</button>
</div>
<div class="buttons h5">
    <button class="button">one</button>
    <button class="button">two</button>
    <button class="button">three</button>
</div>
<div class="buttons h4">
    <button class="button">one</button>
    <button class="button">two</button>
    <button class="button">three</button>
</div>
<div class="buttons h3">
    <button class="button">one</button>
    <button class="button">two</button>
    <button class="button">three</button>
</div>
<div class="buttons h2">
    <button class="button">one</button>
    <button class="button">two</button>
    <button class="button">three</button>
</div>
<div class="buttons h1">
    <button class="button">one</button>
    <button class="button">two</button>
    <button class="button">three</button>
</div>

Reveal wrapper

As you'll see once you get to the dropdown component, a reveal wrapper can be used to reveal some content. The structure for using a .reveal-wrapper in a .buttons is as follows.

<div class="buttons">
    <div class="reveal-wrapper">
        <button class="button reveal-trigger-focus">reveal</button>
        <div class="popover reveal-target">
            <p>I've been revealed!</p>
        </div>
    </div>
    <button class="button">two</button>
    <button class="button">three</button>
</div>