Information This site is moving

The Pattern Library is moving to its new home on the Summit design system site.

Go to the Summit site
Pattern Library (ver. 1.5)

Note

This page is archived under version 1.5 and is available for reference purposes only. The latest version of Pattern Library is 2.

Buttons

Refer to the buttons usage page for detailed usage guidelines.

These button classes can be applied to both <button> and <a> elements. <button> elements should be used to trigger in-page functionality while <a> elements should be used for linking to pages.

Primary buttons







Fluid width primary buttons





Code 


<!-- Primary buttons -->
<button class="cui btn-sm primary">Small primary <span class="cicon-angle-right" aria-hidden="true"></span></button>
<button class="cui btn-md primary">Medium primary <span class="cicon-angle-right" aria-hidden="true"></span></button>
<button class="cui btn-lg primary">Large primary <span class="cicon-angle-right" aria-hidden="true"></span></button>
<button class="cui btn-xl primary">Extra large primary <span class="cicon-angle-right" aria-hidden="true"></span></button>

<!-- Fluid width primary buttons -->
<button class="cui btn-sm primary btn-fluid">Small primary <span class="cicon-angle-right" aria-hidden="true"></span></button>
<button class="cui btn-md primary btn-fluid">Medium primary <span class="cicon-angle-right" aria-hidden="true"></span></button>
<button class="cui btn-lg primary btn-fluid">Large primary <span class="cicon-angle-right" aria-hidden="true"></span></button>
<button class="cui btn-xl primary btn-fluid">Extra large primary <span class="cicon-angle-right" aria-hidden="true"></span></button>

Secondary buttons

These utility buttons have a transparent background.







Fluid width secondary buttons







Solid secondary buttons

These utility buttons have a solid background.







Fluid width solid secondary buttons





Code 


<!-- Secondary buttons -->
<button class="cui btn-sm utility-btn">Small utility </button>
<button class="cui btn-md utility-btn">Medium utility </button>
<button class="cui btn-lg utility-btn">Large utility </button>
<button class="cui btn-xl utility-btn">Extra Large utility </button>

<!-- Fluid width secondary buttons -->
<button class="cui btn-sm utility-btn btn-fluid">Small utility</button>
<button class="cui btn-md utility-btn btn-fluid">Medium utility</button>
<button class="cui btn-lg utility-btn btn-fluid">Large utility</button>
<button class="cui btn-xl utility-btn btn-fluid">Extra Large utility</button>

<!-- Solid secondary buttons -->
<button class="cui btn-sm utility-btn-solid">Small utility solid</button>
<button class="cui btn-md utility-btn-solid">Medium utility solid</button>
<button class="cui btn-lg utility-btn-solid">Large utility solid</button>
<button class="cui btn-xl utility-btn-solid">Extra Large utility solid</button>

<!-- Fluid width solid secondary buttons -->
<button class="cui btn-sm utility-btn-solid btn-fluid">Small utility solid</button>
<button class="cui btn-md utility-btn-solid btn-fluid">Medium utility solid</button>
<button class="cui btn-lg utility-btn-solid btn-fluid">Large utility solid</button>
<button class="cui btn-xl utility-btn-solid btn-fluid">Extra Large utility solid</button>

Text buttons

Use text buttons for general user interactions.









Code 


<!-- Primary text buttons -->
<button class="cui btn-sm primary-text">Small primary text button</button>
<button class="cui btn-md primary-text">Medium primary text button</button>
<button class="cui btn-lg primary-text">Large primary text button</button>
<button class="cui btn-xl primary-text">Extra large primary text button</button>

<!-- Secondary text buttons -->
<button class="cui btn-sm secondary-text">Small secondary text button</button>
<button class="cui btn-md secondary-text">Medium secondary text button</button>
<button class="cui btn-lg secondary-text">Large secondary text button</button>
<button class="cui btn-xl secondary-text">Extra large secondary text button</button>

Disabled buttons







Fluid width disabled buttons





Code 


<!-- Disabled buttons -->
<button class="cui btn-sm disabled" disabled>Small disabled</button>
<button class="cui btn-md disabled" disabled>Medium disabled</button>
<button class="cui btn-lg disabled" disabled>Large disabled</button>

<!-- Fluid width disabled buttons -->
<button class="cui btn-sm disabled btn-fluid" disabled>Small disabled</button>
<button class="cui btn-md disabled btn-fluid" disabled>Medium disabled</button>
<button class="cui btn-lg disabled btn-fluid" disabled>Large disabled</button>

Usage

When present, this code specifies that the button should be disabled.

A disabled button is unusable and un-clickable.

The disabled button can be a Boolean attribute; it can be set to keep a user from clicking on the button until some other condition has been met (like selecting a checkbox, etc.). In this case, a JavaScript could remove the disabled value when the condition has been met, rendering the button usable.

Icon buttons

Code 


<button class="cui btn-sm icon-only primary">user<span class="cicon cicon-user" aria-hidden="true"></span></button>
<button class="cui btn-md icon-only primary">calendar<span class="cicon cicon-calendar" aria-hidden="true"></span></button>
<button class="cui btn-lg icon-only primary">print<span class="cicon cicon-print" aria-hidden="true"></span></button>

Mega buttons



Mega button with fluid width:

Code 


<!-- Mega buttons -->
<button class="cui btn-mega primary"><span class="cicon-table top"></span>Mega button icon top</button>
<button class="cui btn-mega primary">Mega button icon bottom<span class="cicon-calendar bottom"></span></button>

<!-- Mega button with fluid width -->
<button class="cui btn-mega btn-mega-fluid primary">
    <span class="text">Responsive mega button</span>
    <span class="cicon-calendar bottom"></span>
</button>