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.