1. Components
  2. Buttons

Button

The primary way to perform actions in an Orchid site or app.

Default button orc-c-btn

The primary way to perform actions in an Orchid site or app.

Small button orc-c-btn--small

Decreases the button and text size.

Centered button orc-c-btn--center

Horizontally centers the button.

Icon before text button

Places an + icon to the left of the button text.

Icon after text button

Places an + icon to the right of the button text.

Icon only button

Button description

Purple button orc-c-btn--purple

Button description

Dark gray button orc-c-btn--dark-gray

Applies a dark gray background to the button.

White button orc-c-btn--white

Applies a white background to the button.

Bare button orc-c-btn--bare

Removes any background or border unless the button is hovered over.

Text button orc-c-btn--text

Removes any text style, background image, border, or padding.

Loading button is-loading

Indicates that the action is loading.

  • 
    
    <button class="orc-c-btn ">
    
        <div class="orc-c-btn__inner">
    
    
                <span class="orc-c-btn__text orc-js-btn-text">Button</span>
    
    
    
    
        </div><!--end orc-c-btn__inner-->
    
    </button>
    <!-- end orc-c-btn -->
  • 
    
    <button class="orc-c-btn orc-c-btn--small">
    
        <div class="orc-c-btn__inner">
    
    
                <span class="orc-c-btn__text orc-js-btn-text">Button</span>
    
    
    
    
        </div><!--end orc-c-btn__inner-->
    
    </button>
    <!-- end orc-c-btn -->
  • 
    
    <button class="orc-c-btn orc-c-btn--center">
    
        <div class="orc-c-btn__inner">
    
    
                <span class="orc-c-btn__text orc-js-btn-text">Button</span>
    
    
    
    
        </div><!--end orc-c-btn__inner-->
    
    </button>
    <!-- end orc-c-btn -->
  • 
    
    <button class="orc-c-btn ">
    
        <div class="orc-c-btn__inner">
    
            <svg class="orc-c-btn__icon ">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#plus"></use>
            </svg>
    
                <span class="orc-c-btn__text orc-js-btn-text">Button</span>
    
    
    
    
        </div><!--end orc-c-btn__inner-->
    
    </button>
    <!-- end orc-c-btn -->
  • 
    
    <button class="orc-c-btn ">
    
        <div class="orc-c-btn__inner">
    
    
                <span class="orc-c-btn__text orc-js-btn-text">Button</span>
    
            <svg class="orc-c-btn__icon ">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#plus"></use>
            </svg>
    
    
    
        </div><!--end orc-c-btn__inner-->
    
    </button>
    <!-- end orc-c-btn -->
  • 
    
    <button class="orc-c-btn ">
    
        <div class="orc-c-btn__inner">
    
            <svg class="orc-c-btn__icon ">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#plus"></use>
            </svg>
    
    
    
    
    
        </div><!--end orc-c-btn__inner-->
    
    </button>
    <!-- end orc-c-btn -->
  • 
    
    <button class="orc-c-btn orc-c-btn--purple">
    
        <div class="orc-c-btn__inner">
    
    
                <span class="orc-c-btn__text orc-js-btn-text">Button</span>
    
    
    
    
        </div><!--end orc-c-btn__inner-->
    
    </button>
    <!-- end orc-c-btn -->
  • 
    
    <button class="orc-c-btn orc-c-btn--dark-gray">
    
        <div class="orc-c-btn__inner">
    
    
                <span class="orc-c-btn__text orc-js-btn-text">Button</span>
    
    
    
    
        </div><!--end orc-c-btn__inner-->
    
    </button>
    <!-- end orc-c-btn -->
  • 
    
    <button class="orc-c-btn orc-c-btn--white">
    
        <div class="orc-c-btn__inner">
    
    
                <span class="orc-c-btn__text orc-js-btn-text">Button</span>
    
    
    
    
        </div><!--end orc-c-btn__inner-->
    
    </button>
    <!-- end orc-c-btn -->
  • 
    
    <button class="orc-c-btn orc-c-btn--bare">
    
        <div class="orc-c-btn__inner">
    
    
                <span class="orc-c-btn__text orc-js-btn-text">Button</span>
    
    
    
    
        </div><!--end orc-c-btn__inner-->
    
    </button>
    <!-- end orc-c-btn -->
  • 
    
    <button class="orc-c-btn orc-c-btn--text">
    
        <div class="orc-c-btn__inner">
    
    
                <span class="orc-c-btn__text orc-js-btn-text">Button</span>
    
    
    
    
        </div><!--end orc-c-btn__inner-->
    
    </button>
    <!-- end orc-c-btn -->
  • 
    
    <button class="orc-c-btn orc-is-loading">
    
        <div class="orc-c-btn__inner">
    
    
                <span class="orc-c-btn__text orc-js-btn-text">Button</span>
    
    
    
            <img  class="orc-c-loader orc-is-loading" src="..&#x2F;..&#x2F;images&#x2F;loader-cherries.svg" alt= />
    
    
        </div><!--end orc-c-btn__inner-->
    
    </button>
    <!-- end orc-c-btn -->

Usage

When to use

Use a button when there is one prioritized call to action.

When to consider an alternative

If the user has a choice to make, with each choice requiring an interactive next step, use a button group.

Class Name Description
orc-c-btn
Required

Apply to the containing HTML element. Used with a <button> tag when adding some sort of action, unless it is simply linking somewhere else, then an <a> tag is used.

orc-c-btn--small
Modifier

Add to the orc-c-btn element to decrease the button size and font size. This is the size smaller than the default button.

orc-c-btn--centered
Modifier

Add to the orc-c-btn element to horizontally center the button within its container.

orc-c-btn--purple
Modifier

Add to the orc-c-btn element to change the background of the button to purple.

orc-c-btn--dark-gray
Modifier

Add to the orc-c-btn element to change the background of the button to dark gray.

orc-c-btn--white
Modifier

Add to the orc-c-btn element to change the background to white and the button text to purple.

orc-c-btn--bare
Modifier

Add to the orc-c-btn element to remove any sort of background or border unless hovered over.

orc-c-btn--text
Modifier

Add to the orc-c-btn element to remove the uppercase font and the padding.

is-loading
Modifier

Add to the orc-c-btn element along with the proper loading SVG to show a loading state. This should be applied using JavaScript.

orc-c-btn__inner
Recommended

Add within orc-c-btn__inner since some browsers do not accept display: flex on a <button> element. display: flex helps place the text and icon side-by-side.

orc-c-btn__icon

Icon within a button. When orc-c-btn__icon is used but orc-c-btn__text is not, a title attribute must be applied to the button to let the user know what this button represents.

orc-js-btn-icon
JS

Add to first orc-c-btn__icon element to trigger the swapping of button icons. This along with and additional orc-c-btn__icon with a orc-js-btn-swap-icon class allows the JavaScript to swap between icons depending on the state of a button (i.e. A menu button’s open and closed state)

orc-js-btn-swap-icon
JS

Add to an additional orc-c-btn__icon element to trigger the swapping of button icons. This along with orc-js-btn-icon allows the JavaScript to swap between icons depending on the state of a button.

u-is-hidden

Utility class aded to orc-c-btn__icon with orc-js-btn-swap-icon class to hide this from visibility until JavaScript toggles the icon to be visible.

orc-c-btn__text
Recommended

Text of the button.

orc-js-btn-text
JS

Add to orc-c-btn__text to allow JavaScript to toggle the button text depending on the state of the button (i.e. Menu toggle button)

orc-c-loader

The SVG image that needs to be added if a button is in an is-loading state.