components

Buttons

Buttons are used to signal user actions.

  • Sizes
    X-SMALL .lp__btn_xs
    SMALL .lp__btn_sm
    Medium .lp__btn_md
    Large .lp__btn_lg
    Color variations
    PRIMARY DISABLED .disabled PRIMARY ENABLED .lp__btn_primary PRIMARY HOVER .hover PRIMARY ACTIVE .active
    SECONDARY DISABLED .disabled SECONDARY ENABLED .lp__btn_secondary SECONDARY HOVER .hover SECONDARY ACTIVE .active
    SECONDARY DISABLED .disabled SECONDARY ENABLED .lp__btn_secondary_orange SECONDARY HOVER .hover SECONDARY ACTIVE .active
    SECONDARY DISABLED.disabled SECONDARY ENABLED .lp__btn_secondary_blue SECONDARY HOVER .hover SECONDARY ACTIVE .active
    Style variations
    CTA White CTA Blue CTA Gray
    PRIMARY INVERSE PRIMARY INVERSE HOVER
    PRIMARY GHOST INVERSE PRIMARY GHOST INVERSE HOVER
    PRIMARY GHOST BTN PRIMARY GHOST HOVER BTN 
    <div class="primary-btn">
    <a href="#" class="lp__btn lp__btn_xs lp__btn_primary">X-SMALL</a>
    <a href="#" class="lp__btn lp__btn_sm lp__btn_primary">SMALL</a>
    <a href="#" class="lp__btn lp__btn_md lp__btn_primary">Medium</a>
    <a href="#" class="lp__btn lp__btn_lg lp__btn_primary">Large</a>
</div>
<div class="primary-btn">
    <a href="#" class="lp__btn lp__btn_sm lp__btn_primary">Primary Enabled</a>
    <a href="#" class="lp__btn lp__btn_sm lp__btn_primary hover">Primary Hover</a>
    <a href="#" class="lp__btn lp__btn_sm lp__btn_primary active">Primary Active</a>
</div>
<div class="secondary-btn">
    <a href="#" class="lp__btn lp__btn_sm lp__btn_secondary">Secondary Enabled</a>
    <a href="#" class="lp__btn lp__btn_sm lp__btn_secondary hover">Secondary Hover</a>
    <a href="#" class="lp__btn lp__btn_sm lp__btn_secondary active">Secondary Active</a> 
</div>
<div class="secondary-btn">
    <a href="#" class="lp__btn lp__btn_xs lp__cta_btn lp__cta_btn_white ">CTA White</a>
    <a href="#" class="lp__btn lp__btn_xs lp__cta_btn lp__cta_btn_blue">CTA Blue</a>
    <a href="#" class="lp__btn lp__btn_xs lp__cta_btn lp__cta_btn_gray">CTA Gray</a>
</div>
<div class="secondary-btn">
    <a href="#" class="lp__btn lp__btn_sm lp__btn_primary_inverse">Primary Inverse</a>
    <a href="#" class="lp__btn lp__btn_sm lp__btn_primary_inverse hover">Primary Inverse hover</a>
    <a href="#" class="lp__btn lp__btn_sm lp__btn_primary_ghost_inverse">Primary Ghost Inverse</a>
    <a href="#" class="lp__btn lp__btn_sm lp__btn_primary_ghost_inverse hover">Primary Ghost Inverse hover</a>
    <a href="#" class="lp__btn lp__btn_sm lp__btn_primary_ghost">Primary Ghost Btn</a>
    <a href="#" class="lp__btn lp__btn_sm lp__btn_primary_ghost hover">Primary Ghost Hover Btn</a>
</div>
  • Use:

    When providing a user with the option to take an action or change the state of a page.


    Don't use:

    In the place of a link. Buttons are not to be used as a standard navigational element. A button press can be used to navigate a user to a different page, but only if presented as a call to action.


    Visual Style:

    The size, style, and color of a button should communicate a clear hierarchy. Buttons that are are the primarily interactive element on a page should always have a color that contrasts the background, and should be placed so that they are highly visible. Buttons within a page that present a less important call to action should still have high contrast for visibility. Buttons which are incorporated into a component where the button is secondary to the content being presented, the button should contrast less with the background as to not detract from the focal content. A common example of this is that listings of featured or recent content are often coupled with a button that calls the user to see more of the same type of content. These buttons should be relatively low contrast. Buttons that call a user to see view more of some type of content should include a chevron at the end (e.g. "View All Blogs >").


    Behavior:

    Each button has state variations to help users to how they should and how they are interacting with a button. This includes a Disabled, Primary, Hover, and Active states. For all buttons, Hover and Active state are the same. Some buttons that do not appear in forms do not have a Disabled state. Disabled states are used almost exclusively for forms.


    Editorial:

    If possible, labels buttons so that they describe the action being taken, or the result of that action. Use the same terms to describe the action in both the button and any supporting instructional copy. When two buttons offer a split choice, it is best to label as "(action)" and "Don't (action)". This can help with localization.

  • World Bank Home: