Skip to content
This repository has been archived by the owner on Jul 10, 2020. It is now read-only.

Latest commit

 

History

History
621 lines (493 loc) · 18.3 KB

usage.md

File metadata and controls

621 lines (493 loc) · 18.3 KB
Raw

The cf-buttons component provides extensions to the basic button styles for Capital Framework.

cf-core and cf-icons components are all dependencies of this component.

NOTE: If you use cf-buttons.less directly, be sure to run the file through Autoprefixer, or your compiled Capital Framework CSS will not work perfectly in older browsers.

Table of contents

Variables

Theme variables for setting the color and sizes throughout the project. Overwrite them in your own project by duplicating the variable @key: value.

Color variables

Color variables referenced in comments are from cf-core cf-brand-colors.less.

// .btn
@btn-text:                      @white;
@btn-bg:                        @pacific;
@btn-bg-hover:                  @dark-pacific;
@btn-bg-active:                 @navy;

// .btn__secondary
@btn__secondary-text:           @white;
@btn__secondary-bg:             @gray;
@btn__secondary-bg-hover:       @dark-gray;
@btn__secondary-bg-active:      @black;

// .btn__warning
@btn__warning-text:             @white;
@btn__warning-bg:               @red;
@btn__warning-bg-hover:         @dark-red;
@btn__warning-bg-active:        @dark-gray;

// .btn__disabled
@btn__disabled-text:            @gray;
@btn__disabled-bg:              @gray-20;
@btn__disabled-outline:         @gray-20;

Sizing variables

// .btn
@btn-font-size:                 @base-font-size-px;
@btn-border-radius-size:        4px;
@btn-v-padding:                 8px;
@btn-h-padding:                 14px;
@btn-v-padding-modifier-ie:     0.8;

// .btn__super
@btn__super-font-size:          18px;

Atoms

Default Button

The default button is an atom in our atomic design standards. You can apply the a-btn class to a link, button and submit input field to receive the atomic button styles.

For accessibility reasons, use the semantic <button> instead of a link when possible.

Default state

Anchor Tag Button Tag 

<a href="#" class="a-btn" title="Test button">Anchor Tag</a>
<button class="a-btn" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="a-btn">

Hovered state

Anchor Tag Button Tag 

<a href="#" class="a-btn hover" title="Test button">Anchor Tag</a>
<button class="a-btn hover" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="a-btn hover">

Focused state

Anchor Tag Button Tag 

<a href="#" class="a-btn focus" title="Test button">Anchor Tag</a>
<button class="a-btn focus" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="a-btn focus">

Active state

Anchor Tag Button Tag 

<a href="#" class="a-btn active" title="Test button">Anchor Tag</a>
<button class="a-btn active" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="a-btn active">

Secondary button

Default state

Anchor Tag Button Tag 

<a href="#" class="a-btn a-btn__secondary">Anchor Tag</a>
<button class="a-btn a-btn__secondary" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="a-btn a-btn__secondary">

Hovered state

Anchor Tag Button Tag 

<a href="#" class="a-btn a-btn__secondary hover">Anchor Tag</a>
<button class="a-btn a-btn__secondary hover" title="Test button">
    Button Tag
</button>
<input type="submit" value="Input Tag" class="a-btn a-btn__secondary hover">

Focused state

Anchor Tag Button Tag 

<a href="#" class="a-btn a-btn__secondary focus">Anchor Tag</a>
<button class="a-btn a-btn__secondary focus" title="Test button">
    Button Tag
</button>
<input type="submit" value="Input Tag" class="a-btn a-btn__secondary focus">

Active state

Anchor Tag Button Tag 

<a href="#" class="a-btn a-btn__secondary active">Anchor Tag</a>
<button class="a-btn a-btn__secondary active" title="Test button">
    Button Tag
</button>
<input type="submit" value="Input Tag" class="a-btn a-btn__secondary active">

Destructive action button

Default state

Anchor Tag Button Tag 

<a href="#" class="a-btn a-btn__warning">Anchor Tag</a>
<button class="a-btn a-btn__warning" title="Test button">
    Button Tag
</button>
<input type="submit" value="Input Tag" class="a-btn a-btn__warning">

Hovered state

Anchor Tag Button Tag 

<a href="#" class="a-btn a-btn__warning hover">Anchor Tag</a>
<button class="a-btn a-btn__warning hover" title="Test button">
    Button Tag
</button>
<input type="submit" value="Input Tag" class="a-btn a-btn__warning hover">

Focused state

Anchor Tag Button Tag 

<a href="#" class="a-btn a-btn__warning focus">Anchor Tag</a>
<button class="a-btn a-btn__warning focus" title="Test button">
    Button Tag
</button>
<input type="submit" value="Input Tag" class="a-btn a-btn__warning focus">

Active state

Anchor Tag Button Tag 

<a href="#" class="a-btn a-btn__warning active">Anchor Tag</a>
<button class="a-btn a-btn__warning active" title="Test button">
    Button Tag
</button>
<input type="submit" value="Input Tag" class="a-btn a-btn__warning active">

Disabled button

Default/hovered/active state

Anchor Tag Button Tag Button Tag w/ disabled attr 

<a href="#" class="a-btn a-btn__disabled">Anchor Tag</a>
<button class="a-btn a-btn__disabled" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="a-btn a-btn__disabled">
<button class="a-btn" disabled title="Test button">
    Button Tag w/ disabled attr
</button>

Focused state

Anchor Tag Button Tag Button Tag w/ disabled attr 

<a href="#" class="a-btn a-btn__disabled focus">Anchor Tag</a>
<button class="a-btn a-btn__disabled focus" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="a-btn a-btn__disabled focus">
<button class="a-btn focus" disabled title="Test button">
    Button Tag w/ disabled attr
</button>

Super button

Default state

Anchor Tag Button Tag 

<a href="#" class="a-btn a-btn__super">Anchor Tag</a>
<button class="a-btn a-btn__super" title="Test button">Button Tag</button>
<input type="submit" value="Input Tag" class="a-btn a-btn__super">

Hovered state

Anchor Tag Button Tag 

<a href="#" class="a-btn a-btn__super hover">Anchor Tag</a>
<button class="a-btn a-btn__super hover" title="Test button">
    Button Tag
</button>
<input type="submit" value="Input Tag" class="a-btn a-btn__super hover">

Focused state

Anchor Tag Button Tag 

<a href="#" class="a-btn a-btn__super focus">Anchor Tag</a>
<button class="a-btn a-btn__super focus" title="Test button">
    Button Tag
</button>
<input type="submit" value="Input Tag" class="a-btn a-btn__super focus">

Active state

Anchor Tag Button Tag 

<a href="#" class="a-btn a-btn__super active">Anchor Tag</a>
<button class="a-btn a-btn__super active" title="Test button">
    Button Tag
</button>
<input type="submit" value="Input Tag" class="a-btn a-btn__super active">

Full-width buttons on x-small screens

Reduce screen size to see these in action

Anchor Tag

Button Tag 
<a href="#" class="a-btn a-btn__full-on-xs">Anchor Tag</a>
<button class="a-btn a-btn__full-on-xs" title="Test button">
    Button Tag
</button>
<input type="submit" value="Input Tag" class="a-btn a-btn__full-on-xs">

Button links

Default state

Button Link Secondary Button Link Warning Button Link

<button href="#" class="a-btn a-btn__link">Button Link</button>
<button href="#" class="a-btn a-btn__link a-btn__secondary">
    Secondary Button Link
</button>
<button href="#" class="a-btn a-btn__link a-btn__warning">Warning Button Link</button>

Hovered state

Button Link Secondary Button Link Warning Button Link

<button href="#" class="a-btn a-btn__link hover">Button Link</button>
<button href="#" class="a-btn a-btn__link a-btn__secondary hover">
    Secondary Button Link
</button>
<button href="#" class="a-btn a-btn__link a-btn__warning hover">Warning Button Link</button>

Focus state

Button Link Secondary Button Link Warning Button Link

<button href="#" class="a-btn a-btn__link focus">Button Link</button>
<button href="#" class="a-btn a-btn__link a-btn__secondary focus">
    Secondary Button Link
</button>
<button href="#" class="a-btn a-btn__link a-btn__warning focus">Warning Button Link</button>

Active state

Button Link Secondary Button Link Warning Button Link

<button href="#" class="a-btn a-btn__link active">Button Link</button>
<button href="#" class="a-btn a-btn__link a-btn__secondary active">
    Secondary Button Link
</button>
<button href="#" class="a-btn a-btn__link a-btn__warning active">Warning Button Link</button>

Icon buttons

Due to inherent whitespace created between inline elements, whitespace must be removed between the icon and its wrapping span element.

Button with icon on the left

{% include icons/error.svg %} Close {% include icons/error.svg %} Close Secondary button {% include icons/error.svg %} Close Warning button {% include icons/error.svg %} Close Disabled button 
<button class="a-btn">
    <span class="a-btn_icon
                 a-btn_icon__on-left">{% raw %}{% include icons/error.svg %}{% endraw %}</span>
    Close
</button>

<button class="a-btn a-btn__secondary">
    <span class="a-btn_icon
                 a-btn_icon__on-left">{% raw %}{% include icons/error.svg %}{% endraw %}</span>
    Close
</button>

<button class="a-btn a-btn__warning">
    <span class="a-btn_icon
                 a-btn_icon__on-left">{% raw %}{% include icons/error.svg %}{% endraw %}</span>
    Close
</button>

<button class="a-btn a-btn__disabled">
    <span class="a-btn_icon
                 a-btn_icon__on-left">{% raw %}{% include icons/error.svg %}{% endraw %}</span>
    Close
</button>

Button with icon on the right

Close {% include icons/error.svg %} Close {% include icons/error.svg %} Secondary button Close {% include icons/error.svg %} Warning button Close {% include icons/error.svg %} Disabled button 
<button class="a-btn">
    Close
    <span class="a-btn_icon
                 a-btn_icon__on-right">{% raw %}{% include icons/error.svg %}{% endraw %}</span>
</button>

<button class="a-btn a-btn__secondary">
    Close
    <span class="a-btn_icon
                 a-btn_icon__on-right">{% raw %}{% include icons/error.svg %}{% endraw %}</span>
</button>

<button class="a-btn a-btn__warning">
    Close
    <span class="a-btn_icon
                 a-btn_icon__on-right">{% raw %}{% include icons/error.svg %}{% endraw %}</span>
</button>

<button class="a-btn a-btn__disabled">
    Close
    <span class="a-btn_icon
                 a-btn_icon__on-right">{% raw %}{% include icons/error.svg %}{% endraw %}</span>
</button>

Button with an animated icon

Icon font is being deprecated. This pattern needs to be reworked, but is outside the scope of the initial svg icon work.

Submit your complaint 
<button class="a-btn">
    Submit your complaint
    <span class="a-btn_icon
                 a-btn_icon__on-right
                 cf-icon
                 cf-icon__after
                 cf-icon-update
                 cf-icon__spin"></span>
</button>

Molecules

Button group

With default buttons

Yes No Maybe So 
<div class="m-btn-group">
    <button class="a-btn">Yes</button>
    <button class="a-btn">No</button>
    <button class="a-btn">Maybe So</button>
</div>

With super buttons

Yes No Maybe So 
<div class="m-btn-group">
    <button class="a-btn a-btn__super">Yes</button>
    <button class="a-btn a-btn__super">No</button>
    <button class="a-btn a-btn__super">Maybe So</button>
</div>