</> cf-buttons docs

view the repository

Theme variables

  • The following color and sizing variables are exposed, allowing you to easily override them before compiling.

Colors

  • @btn-text
@btn-bg
@btn-bg-hover
@btn-bg-active
@btn__secondary-text
@btn__secondary-bg
@btn__secondary-bg-hover
@btn__secondary-bg-active
@btn__warning-text
@btn__warning-bg
@btn__warning-bg-hover
@btn__warning-bg-active
@btn__disabled-text
@btn__disabled-bg
@btn__disabled-outline

Sizing

  • @btn-font-size
@btn-v-padding
@btn-v-padding-modifier-ie
@super-btn-font-size
  • @btn-v-padding-modifier-ie is used to fix the vertical padding bug in IE for <button>'s and <inputs>'s across various .btn styles. We should revisit this after adding normalize.css to see if this is still needed.

Default button

  • Note that the .visited, .hover, .focus, .active classes are for demonstration purposes only and should not be used in production.

Default state

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

Hovered state

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

Focused state

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

Active state

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

Secondary button

  • Note that the .visited, .hover, .focus, .active classes are for demonstration purposes only and should not be used in production.

Default state

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

Hovered state

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

Focused state

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

Active state

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

Destructive action button

  • Note that the .visited, .hover, .focus, .active classes are for demonstration purposes only and should not be used in production.

Default state

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

Hovered state

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

Focused state

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

Active state

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

Disabled button

  • Disabled buttons do not contain separate hover and active states since they should not be interacted with.
  • Note that the .focus class is for demonstration purposes only and should not be used in production.

Default/hovered/active state

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

Focused state

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

Super button

Default state

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

Hovered state

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

Focused state

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

Active state

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

Button with icons

Button icon left

Anchor Tag

Anchor Tag

Anchor Tag

Anchor Tag 
<a href="#" class="btn">
    <span class="btn_icon__left cf-icon cf-icon-left"></span>
    Anchor Tag
</a>
<button class="btn" title="Test button">
    <span class="btn_icon__left cf-icon cf-icon-left"></span>
    Button Tag
</button>
<br>
<br>
<a href="#" class="btn btn__secondary">
    <span class="btn_icon__left cf-icon cf-icon-left"></span>
    Anchor Tag
</a>
<button class="btn btn__secondary" title="Test button">
    <span class="btn_icon__left cf-icon cf-icon-left"></span>
    Button Tag
</button>
<br>
<br>
<a href="#" class="btn btn__warning">
    <span class="btn_icon__left cf-icon cf-icon-left"></span>
    Anchor Tag
</a>
<button class="btn btn__warning" title="Test button">
    <span class="btn_icon__left cf-icon cf-icon-left"></span>
    Button Tag
</button>
<br>
<br>
<a href="#" class="btn btn__disabled">
    <span class="btn_icon__left cf-icon cf-icon-left"></span>
    Anchor Tag
</a>
<button class="btn btn__disabled" title="Test button">
    <span class="btn_icon__left cf-icon cf-icon-left"></span>
    Button Tag
</button>
<button class="btn" disabled title="Test button">
    <span class="btn_icon__left cf-icon cf-icon-left"></span>
    Button Tag w/ disabled attr
</button>

Button icon right

Anchor Tag

Anchor Tag

Anchor Tag

Anchor Tag 
<a href="#" class="btn">
    Anchor Tag
    <span class="btn_icon__right cf-icon cf-icon-right"></span>
</a>
<button class="btn" title="Test button">
    Button Tag
    <span class="btn_icon__right cf-icon cf-icon-right"></span>
</button>
<br>
<br>
<a href="#" class="btn btn__secondary">
    Anchor Tag
    <span class="btn_icon__right cf-icon cf-icon-right"></span>
</a>
<button class="btn btn__secondary" title="Test button">
    Button Tag
    <span class="btn_icon__right cf-icon cf-icon-right"></span>
</button>
<br>
<br>
<a href="#" class="btn btn__warning">
    Anchor Tag
    <span class="btn_icon__right cf-icon cf-icon-right"></span>
</a>
<button class="btn btn__warning" title="Test button">
    Button Tag
    <span class="btn_icon__right cf-icon cf-icon-right"></span>
</button>
<br>
<br>
<a href="#" class="btn btn__disabled">
    Anchor Tag
    <span class="btn_icon__right cf-icon cf-icon-right"></span>
</a>
<button class="btn btn__disabled" title="Test button">
    Button Tag
    <span class="btn_icon__right cf-icon cf-icon-right"></span>
</button>
<button class="btn" disabled title="Test button">
    Button Tag w/ disabled attr
    <span class="btn_icon__right cf-icon cf-icon-right"></span>
</button>

Just an icon

Search 
<a href="#" class="btn">
    <span class="u-visually-hidden">Search</span>
    <span class="cf-icon cf-icon-search"></span>
</a>
<button class="btn" title="Test button">
    <span class="u-visually-hidden">Search</span>
    <span class="cf-icon cf-icon-search"></span>
</button>
  • For accessibility please use the .u-visually-hidden utility class to add hidden text for screen readers.

Button group modifiers

Default buttons in a button group

Anchor 1 Anchor 2 Anchor 3 



<a href="#" class="btn btn__grouped-first">Anchor 1</a>
<a href="#" class="btn btn__grouped">Anchor 2</a>
<a href="#" class="btn btn__grouped-last">Anchor 3</a>
<br>
<br>
<button class="btn btn__grouped-first" title="Test button">Button 1</button>
<button class="btn btn__grouped" title="Test button">Button 2</button>
<button class="btn btn__grouped-last" title="Test button">Button 3</button>
<br>
<br>
<input type="button" value="Input 1" class="btn btn__grouped-first">
<input type="button" value="Input 2" class="btn btn__grouped">
<input type="button" value="Input 3" class="btn btn__grouped-last">

Super buttons in a button group

Anchor 1 Anchor 2 Anchor 3 



<a href="#" class="btn btn__grouped-first btn__super">Anchor 1</a>
<a href="#" class="btn btn__grouped btn__super">Anchor 2</a>
<a href="#" class="btn btn__grouped-last btn__super">Anchor 3</a>
<br>
<br>
<button class="btn btn__grouped-first btn__super" title="Test button">Button 1</button>
<button class="btn btn__grouped btn__super" title="Test button">Button 2</button>
<button class="btn btn__grouped-last btn__super" title="Test button">Button 3</button>
<br>
<br>
<input type="button" value="Input 1" class="btn btn__grouped-first btn__super">
<input type="button" value="Input 2" class="btn btn__grouped btn__super">
<input type="button" value="Input 3" class="btn btn__grouped-last btn__super">

Compound button

  • This pattern requires combining .btn__grouped modifiers with the .btn__compound-action modifier.
  • Note that the .visited, .hover, .focus, .active classes are for demonstration purposes only and should not be used in production.

All button styles

Anchor



Anchor



Anchor



Anchor





Anchor 

<a href="#" class="btn btn__grouped-first">Anchor</a>
<a href="#" class="btn btn__grouped-last btn__compound-action">
    <span class="cf-icon cf-icon-down btn__grouped-last"></span>
</a>
<br>
<br>
<button class="btn btn__grouped-first" title="Test button">Button</button>
<button class="btn btn__grouped-last btn__compound-action" title="Test button">
    <span class="cf-icon cf-icon-down btn__grouped-last"></span>
</button>
<br>
<br>
<a href="#" class="btn btn__grouped-first btn__secondary">Anchor</a>
<a href="#" class="btn btn__grouped-last btn__secondary btn__compound-action">
    <span class="cf-icon cf-icon-down btn__grouped-last"></span>
</a>
<br>
<br>
<button class="btn btn__grouped-first btn__secondary" title="Test button">Button</button>
<button class="btn btn__grouped-last btn__secondary btn__compound-action" title="Test button">
    <span class="cf-icon cf-icon-down btn__grouped-last"></span>
</button>
<br>
<br>
<a href="#" class="btn btn__grouped-first btn__warning">Anchor</a>
<a href="#" class="btn btn__grouped-last btn__warning btn__compound-action">
    <span class="cf-icon cf-icon-down btn__grouped-last"></span>
</a>
<br>
<br>
<button class="btn btn__grouped-first btn__warning" title="Test button">Button</button>
<button class="btn btn__grouped-last btn__warning btn__compound-action" title="Test button">
    <span class="cf-icon cf-icon-down btn__grouped-last"></span>
</button>
<br>
<br>
<a href="#" class="btn btn__grouped-first btn__disabled">Anchor</a>
<a href="#" class="btn btn__grouped-last btn__disabled btn__compound-action">
    <span class="cf-icon cf-icon-down btn__grouped-last"></span>
</a>
<br>
<br>
<button class="btn btn__grouped-first btn__disabled" title="Test button">Button</button>
<button class="btn btn__grouped-last btn__disabled btn__compound-action" title="Test button">
    <span class="cf-icon cf-icon-down btn__grouped-last"></span>
</button>
<br>
<br>
<button class="btn btn__grouped-first" disabled title="Test button">Button w/ disabled attr</button>
<button class="btn btn__grouped-last btn__compound-action" disabled title="Test button">
    <span class="cf-icon cf-icon-down btn__grouped-last"></span>
</button>
<br>
<br>
<a href="#" class="btn btn__grouped-first btn__super">Anchor</a>
<a href="#" class="btn btn__grouped-last btn__super btn__compound-action">
    <span class="cf-icon cf-icon-down btn__grouped-last"></span>
</a>
<br>
<br>
<button class="btn btn__grouped-first btn__super" title="Test button">Button</button>
<button class="btn btn__grouped-last btn__super btn__compound-action" title="Test button">
    <span class="cf-icon cf-icon-down btn__grouped-last"></span>
</button>