Button

Buttons are one of the most common and generally applicable form components and should be used inside forms to manage data, as links to other pages or actions, or to prompt state or informational changes.

Default button

The default button uses a white fill with a gray border and slightly rounded corners. It serves as the default button in addition to the brand primary button. Create a default button by adding .hc-button .hc-button--primary to a <button> element (or most other elements).

HTML

Expand Edit in Playground Copy


<button type="button" class="hc-button hc-button--primary">
    Primary
</button>
<button type="button" class="hc-button hc-button--secondary">
    Secondary
</button>
<button type="button" class="hc-button hc-button--tertiary">
    Tertiary
</button>
<button type="button" class="hc-button hc-button--primary hc-button--disabled">
    disabled
</button>

Button states

Primary - Primary state button is used to indicate the primary action. Avoid using more than one primary button at a time.
Secondary - Secondary state buttons are used for the indication of an action with lower priority and creation of hierarchy between the primary and the secondary option.
Tertiary - Tertiary state buttons are used for low priority actions and are not meant to be used for primary or submit actions.
Disabled - Set disable button to indicate the button cannot be selected. Preferably a tooltip will appear on hover indicting the reason of the disabled state.

Button sizes

There are 3 button sizes, two of which require classname modifiers. The default size should be used in the majority of cases, except when a limited exception or design need dictates otherwise.

Size	Class	Use case
Base	--	Default button size, used for normal actions, CTAs, and common use cases
Small	.button--sm	Tables with many repeated actions, many buttons in a small area
Large	.button--lg	More critical CTAs that require focus, larger UI element requires a larger button

HTML

Expand Edit in Playground Copy


<button type="button" class="hc-button hc-button--primary hc-button--sm">
    Small
</button>
<button type="button" class="hc-button hc-button--primary">
    Base
</button>
<button type="button" class="hc-button hc-button--primary hc-button--lg">
    Large
</button>

Button with icons

Add an icon to either the left or right of the text label for automatic icon placement. No additional classes are needed, just add an .hc-icon to the left and/or right of the button’s label. Note that for filled buttons, the icon will switch to a solid style.

Adding the .hc-button--icon to a <button> element will produce a square button intended to hold only an icon.

HTML

Expand Edit in Playground Copy


<button type="button" class="hc-button hc-button--primary">
    <i class="hc-icon hc-icon--user"></i> 
    With Left Icon
</button>
<button type="button" class="hc-button hc-button--primary">
    With Right Icon
    <i class="hc-icon hc-icon--chevron-down"></i> 
</button>
<button type="button" class="hc-button hc-button--boost hc-button--primary hc-button--icon">
    <i class="hc-icon hc-icon--settings"></i> 
</button>

Brand primary button

The brand primary button uses a fill with slightly rounded corners and should generally be used whenever you have a primary action requiring a button. Create a brand primary button by adding .button .button--platform name .button--primary to a <button> element.

Connect button states

HTML

Expand Edit in Playground Copy


<button type="button" class="hc-button hc-button--connect hc-button--primary">
    Primary
</button>
<button type="button" class="hc-button hc-button--connect hc-button--secondary">
    Secondary
</button>
<button type="button" class="hc-button hc-button--connect hc-button--tertiary">
    Tertiary
</button>
<button type="button" class="hc-button hc-button--connect hc-button--primary hc-button--disabled">
    disabled
</button>

Boost button states

HTML

Expand Edit in Playground Copy


<button type="button" class="hc-button hc-button--boost hc-button--primary">
    Primary
</button>
<button type="button" class="hc-button hc-button--boost hc-button--secondary">
    Secondary
</button>
<button type="button" class="hc-button hc-button--boost hc-button--tertiary">
    Tertiary
</button>
<button type="button" class="hc-button hc-button--boost hc-button--primary hc-button--disabled">
    disabled
</button>

Attend button states

HTML

Expand Edit in Playground Copy


<button type="button" class="hc-button hc-button--attend hc-button--primary">
    Primary
</button>
<button type="button" class="hc-button hc-button--attend hc-button--secondary">
    Secondary
</button>
<button type="button" class="hc-button hc-button--attend hc-button--tertiary">
    Tertiary
</button>
<button type="button" class="hc-button hc-button--attend hc-button--primary hc-button--disabled">
    disabled
</button>

Semantic button

The semantic button leans on the a primary button properties and should generally be used to indicate a positive or negative output. whenever you have a primary action requiring a button.

Create a semantic button by adding .hc-button .hc-button--primary to a <button> element, and the one of the following semantic classes.

Success

Create a success button by appending .hc-button--success:

HTML

Expand Edit in Playground Copy


<button type="button" class="hc-button hc-button--success hc-button--primary">
    Primary
     <i class="hc-icon hc-icon--chevron-down"></i>
</button>
<button type="button" class="hc-button hc-button--success hc-button--secondary">
    Secondary
     <i class="hc-icon hc-icon--chevron-down"></i>
</button>
<button type="button" class="hc-button hc-button--success hc-button--tertiary">
    Tertiary
     <i class="hc-icon hc-icon--chevron-down"></i>
</button>
<button type="button" class="hc-button hc-button--success hc-button--primary hc-button--disabled">
    disabled
</button>

Danger

Create a danger/destructive action button by appending .hc-button--danger:

HTML

Expand Edit in Playground Copy


<button type="button" class="hc-button hc-button--danger hc-button--primary">
    Primary
</button>
<button type="button" class="hc-button hc-button--danger hc-button--secondary">
    Secondary
</button>
<button type="button" class="hc-button hc-button--danger hc-button--tertiary">
    Tertiary
</button>
<button type="button" class="hc-button hc-button--danger hc-button--primary hc-button--disabled">
    disabled
</button>