Button - Standard

Last updated: 9/20/21

Button - Standard is the secondary button defined by the primary cyan color

Base

Use the base class pier-button-standard to create a default standard button

HTML markup

<button class="pier-button-standard">
    <i class="pier-button-hero__icon fas fa-check"></i>Button Text
</button>

<button class="pier-button-standard">
    <i class="pier-button-hero__icon fas fa-check"></i>Button Text
</button>

Sizes

Use the modifier classes pier-button-standard--xs, pier-button-standard--sm, pier-button-standard--md, or pier-button-standard--lg to change the size of the button-standard.

HTML markup

<button class="pier-button-standard pier-button-standard--xs -m-h-2">
    Button Text</button
><button class="pier-button-standard pier-button-standard--sm -m-h-2">
    Button Text</button
><button class="pier-button-standard pier-button-standard--md -m-h-2">
    Button Text</button
><button class="pier-button-standard pier-button-standard--lg -m-h-2">
    Button Text
</button>

<button class="pier-button-standard pier-button-standard--xs -m-h-2">
    Button Text</button
><button class="pier-button-standard pier-button-standard--sm -m-h-2">
    Button Text</button
><button class="pier-button-standard pier-button-standard--md -m-h-2">
    Button Text</button
><button class="pier-button-standard pier-button-standard--lg -m-h-2">
    Button Text
</button>

Disabled

Use the modifier class pier-button-standard--disabled to change the state of the standard button to disabled.

HTML markup

<button class="pier-button-standard pier-button-standard--disabled" disabled="">
    Button Text
</button>

<button class="pier-button-standard pier-button-standard--disabled" disabled="">
    Button Text
</button>

Pill

Use the modifier class pier-button-standard--pill to change the state of the standard button to pill.

HTML markup

<button class="pier-button-standard pier-button-standard--pill">
    Button Text
</button>

<button class="pier-button-standard pier-button-standard--pill">
    Button Text
</button>

Secondary

Use the modifier class pier-button-standard--secondary to change the state of the standard button to secondary.

HTML markup

<button class="pier-button-standard pier-button-standard--secondary">
    Button Text
</button>

<button class="pier-button-standard pier-button-standard--secondary">
    Button Text
</button>

Dark

Use the modifier class pier-button-standard--dark to change the style of the standard button for dark UI themes.

HTML markup

<button class="pier-button-standard pier-button-standard--dark -m-h-2">
    Button Text</button
><button
    class="
        pier-button-standard
        pier-button-standard--secondary
        pier-button-standard--dark
        -m-h-2
    "
>
    Button Text
</button>

<button class="pier-button-standard pier-button-standard--dark -m-h-2">
    Button Text</button
><button
    class="
        pier-button-standard
        pier-button-standard--secondary
        pier-button-standard--dark
        -m-h-2
    "
>
    Button Text
</button>

Error

Use the modifier class pier-button-standard--error to change the state of the standard button to error.

HTML markup

<button class="pier-button-standard pier-button-standard--error">
    Button Text
</button>

<button class="pier-button-standard pier-button-standard--error">
    Button Text
</button>

Group

Use the modifier classes pier-button-standard--cap-left to cap the left border radius to 0, pier-button-standard--cap-rightto cap the right border radius to 0, pier-button-standard--capto cap both sides to a border radius of 0

HTML markup

<button class="pier-button-standard pier-button-standard--cap-right">
    Button Text</button
><button class="pier-button-standard pier-button-standard--cap">
    Button Text</button
><button class="pier-button-standard pier-button-standard--cap-left">
    Button Text
</button>

<button class="pier-button-standard pier-button-standard--cap-right">
    Button Text</button
><button class="pier-button-standard pier-button-standard--cap">
    Button Text</button
><button class="pier-button-standard pier-button-standard--cap-left">
    Button Text
</button>

Block

Use the modifier class pier-button-standard--block to change the state of the standard button to block.

HTML markup

<button class="pier-button-standard pier-button-standard--block -m-b-4">
    Button Block
</button>

<button class="pier-button-standard pier-button-standard--block -m-b-4">
    Button Block
</button>

Abstracts Components Utilities Attributions

Pier Design System

Button - Standard

Base

HTML markup

Sizes

HTML markup

Disabled

HTML markup

Pill

HTML markup

Secondary

HTML markup

Dark

HTML markup

Error

HTML markup

Group

HTML markup

Block

HTML markup