Button Figma Code Connected

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 thin gray border and slightly rounded corners. It’s been designed to visually get out of the way and should be the main button you use, particularly when the screen has a lot of buttons.

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 default button
</button>

Button states

Various states can be applied as classes depending on the context for the button.

Primary - Primary action. Avoid using more than one primary button at a time in a given component/section.
Secondary - Actions with lower priority; creates a hierarchy between the primary and the secondary options.
Tertiary - Low priority actions, not meant to be used for primary or “submit” actions. Note that default tertiary buttons have a transparent background and will operate like text.
Disabled - Indicates the button cannot be used. Preferably a tooltip will appear on hover indicting the reason of the disabled state.

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 sizes

There are three button sizes, two of which require class name 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>

Adding 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--primary hc-button--icon">
    <i class="hc-icon hc-icon--settings"></i> 
</button>

Theme colors

You can apply theme treatment to the primary, secondary, and tertiary buttons in a number of different ways. These are great for CTAs or when you want to add some of the app’s color.

There are two ways to create themed buttons:

Theme: The preferred method as of v0.2.22 is to use the data-hc-theme data attribute on the <body> element. Simply add the app name as the value for this attribute, like this: <body data-hc-theme="boost">. For each button that you’d like to use the brand variation, simply append .hc-theme and it will inherit the body’s app/theme.
Direct class name: You can force a specific theme color on a button regardless of what theme the body element has, or if it has no data-hc-theme value set at all. Append the theme class directly to the button: .hc-button--primary .hc-button--boost.

As always, you can override and unset a theme by adding .hc-theme--default to the element as well.

Theme approach

Setting a data attribute on the <body> element called data-hc-theme to be one of the app names will change the branding theme to that app, affecting branded buttons (among other components). Read more about this on the Themes documentation page.

Simply append .hc-theme to any button alongside a primary, secondary, or tertiary class and the theming will be handled automatically.

Theme:

HTML

Expand Edit in Playground Copy


<!-- controls for demo purposes -->
<div class="w-1/2 mx-auto flex flex-row items-center gap-2">
    <span class="whitespace-nowrap">Theme:</span>
    <select class="hc-select" onchange="document.getElementById('docs').dataset.hcTheme=this.value">
        <option value="ss">Default</option>
        <option value="attend">Attend</option>
        <option value="boost">Boost</option>
        <option value="connect">Connect</option>
        <option value="forms">Forms &amp; Flows</option>
    </select>
</div>
<!-- theme button markup -->
<div class="flex flex-row justify-center items-center gap-4">
    <button type="button" class="hc-button hc-theme hc-button--primary">
        <i class="hc-icon hc-icon--settings"></i>
        Primary
    </button>
    <button type="button" class="hc-button hc-theme hc-button--secondary">
        <i class="hc-icon hc-icon--settings"></i>
        Secondary
    </button>
    <button type="button" class="hc-button hc-theme hc-button--tertiary">
        Tertiary
    </button>
    <button type="button" class="hc-button hc-theme hc-button--primary hc-button--disabled">
        disabled
    </button>
</div>

Important Note

Previously the theme was applied with the component-specific class, .hc-button--brand. This has been replaced as of v0.3.0 to standardize theme variations with .hc-theme.

Direct class name

Alternatively, you can create a branded button by directly applying a class name to any button state. For instance, adding .hc-theme--boost will force the Boost theme onto that button.

Note that this will override any theme that may be operating on the screen so please use this intentionally.

Attend

Boost

Connect

Forms & Flows

HTML

Expand Edit in Playground Copy


<div class="flex flex-col md:flex-row items-center justify-center gap-2 md:gap-4">
    <span class="w-32 text-center md:text-right md:pr-2">
        Attend
    </span>
    <button type="button" class="hc-button hc-theme--attend hc-button--primary">
        <i class="hc-icon hc-icon--district"></i>
        Primary
    </button>
    <button type="button" class="hc-button hc-theme--attend hc-button--secondary">
        <i class="hc-icon hc-icon--district"></i>
        Secondary
    </button>
    <button type="button" class="hc-button hc-theme--attend hc-button--tertiary">
        Tertiary
    </button>
    <button type="button" class="hc-button hc-theme--attend hc-button--primary hc-button--disabled">
        Disabled
    </button>
</div>
<div class="flex flex-col md:flex-row items-center justify-center gap-2 md:gap-4">
    <span class="w-32 text-center md:text-right md:pr-2">
        Boost
    </span>
    <button type="button" class="hc-button hc-theme--boost hc-button--primary">
        <i class="hc-icon hc-icon--rocket"></i>
        Primary
    </button>
    <button type="button" class="hc-button hc-theme--boost hc-button--secondary">
        <i class="hc-icon hc-icon--rocket"></i>
        Secondary
    </button>
    <button type="button" class="hc-button hc-theme--boost hc-button--tertiary">
        Tertiary
    </button>
    <button type="button" class="hc-button hc-theme--boost hc-button--primary hc-button--disabled">
        Disabled
    </button>
</div>
<div class="flex flex-col md:flex-row items-center justify-center gap-2 md:gap-4">
    <span class="w-32 text-center md:text-right md:pr-2">
        Connect
    </span>
    <button type="button" class="hc-button hc-theme--connect hc-button--primary">
        <i class="hc-icon hc-icon--megaphone"></i>
        Primary
    </button>
    <button type="button" class="hc-button hc-theme--connect hc-button--secondary">
        <i class="hc-icon hc-icon--megaphone"></i>
        Secondary
    </button>
    <button type="button" class="hc-button hc-theme--connect hc-button--tertiary">
        Tertiary
    </button>
    <button type="button" class="hc-button hc-theme--connect hc-button--primary hc-button--disabled">
        Disabled
    </button>
</div>
<div class="flex flex-col md:flex-row items-center justify-center gap-2 md:gap-4">
    <span class="w-32 text-center md:text-right md:pr-2">
        Forms &amp; Flows
    </span>
    <button type="button" class="hc-button hc-theme--forms hc-button--primary">
        <i class="hc-icon hc-icon--megaphone"></i>
        Primary
    </button>
    <button type="button" class="hc-button hc-theme--forms hc-button--secondary">
        <i class="hc-icon hc-icon--megaphone"></i>
        Secondary
    </button>
    <button type="button" class="hc-button hc-theme--forms hc-button--tertiary">
        Tertiary
    </button>
    <button type="button" class="hc-button hc-theme--forms hc-button--primary hc-button--disabled">
        Disabled
    </button>
</div>

Semantic variants

Semantic buttons are similar to branded buttons but use the semantic color schemes to indicate success, information, warning, or danger. Use these when you need to indicate this type of semantic state, like the positive creation of something or the negative destruction of an item.

Create a semantic button by appending .hc-button--success, .hc-button--info, .hc-button--warning, or .hc-button--danger to a primary, secondary, or tertiary button.

Success

Info

Warning

Danger

HTML

Expand Edit in Playground Copy


<div class="flex flex-col md:flex-row items-center justify-center gap-2 md:gap-4">
    <span class="w-24 text-center md:text-right md:pr-2">
        Success
    </span>
    <button type="button" class="hc-button hc-button--success hc-button--primary">
        <i class="hc-icon hc-icon--check-circle"></i>
        Primary
    </button>
    <button type="button" class="hc-button hc-button--success hc-button--secondary">
        <i class="hc-icon hc-icon--check-circle"></i>
        Secondary
    </button>
    <button type="button" class="hc-button hc-button--success hc-button--tertiary">
        Tertiary
    </button>
    <button type="button" class="hc-button hc-button--success hc-button--primary hc-button--disabled">
        Disabled
    </button>
</div>
<div class="flex flex-col md:flex-row items-center justify-center gap-2 md:gap-4">
    <span class="w-24 text-center md:text-right md:pr-2">
        Info
    </span>
    <button type="button" class="hc-button hc-button--info hc-button--primary">
        <i class="hc-icon hc-icon--info-circle"></i>
        Primary
    </button>
    <button type="button" class="hc-button hc-button--info hc-button--secondary">
        <i class="hc-icon hc-icon--info-circle"></i>
        Secondary
    </button>
    <button type="button" class="hc-button hc-button--info hc-button--tertiary">
        Tertiary
    </button>
    <button type="button" class="hc-button hc-button--info hc-button--primary hc-button--disabled">
        Disabled
    </button>
</div>
<div class="flex flex-col md:flex-row items-center justify-center gap-2 md:gap-4">
    <span class="w-24 text-center md:text-right md:pr-2">
        Warning
    </span>
    <button type="button" class="hc-button hc-button--warning hc-button--primary">
        <i class="hc-icon hc-icon--warning-circle"></i>
        Primary
    </button>
    <button type="button" class="hc-button hc-button--warning hc-button--secondary">
        <i class="hc-icon hc-icon--warning-circle"></i>
        Secondary
    </button>
    <button type="button" class="hc-button hc-button--warning hc-button--tertiary">
        Tertiary
    </button>
    <button type="button" class="hc-button hc-button--warning hc-button--primary hc-button--disabled">
        Disabled
    </button>
</div>
<div class="flex flex-col md:flex-row items-center justify-center gap-2 md:gap-4">
    <span class="w-24 text-center md:text-right md:pr-2">
        Danger
    </span>
    <button type="button" class="hc-button hc-button--danger hc-button--primary">
        <i class="hc-icon hc-icon--warning-triangle"></i>
        Primary
    </button>
    <button type="button" class="hc-button hc-button--danger hc-button--secondary">
        <i class="hc-icon hc-icon--warning-triangle"></i>
        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>
</div>

Split button

Split buttons offer a primary button on the left with a secondary button, often a chevron to open a dropdown, on the right. They’re separated by a small line to indicate that there are two separate actions present.

Create a split button by placing buttons inside of an element with class .hc-button-split. The inner buttons can use any of the existing button classes but it’s recommended to keep them similar (i.e., don’t place primary and secondary buttons next to each other).

HTML

Expand Edit in Playground Copy


<div class="hc-button-split">
  <button type="button" class="hc-button hc-button--primary">
    <i class="hc-icon hc-icon--download hc-icon--20"></i>
    Save changes
  </button>
  <button type="button" class="hc-button hc-button--icon hc-button--primary" aria-label="Open menu">
    <i class="hc-icon hc-icon--chevron-down hc-icon--20"></i>
  </button>
</div>
<div class="hc-button-split">
  <button type="button" class="hc-button hc-button--primary hc-button--boost">
    <i class="hc-icon hc-icon--download hc-icon--20"></i>
    Save changes
  </button>
  <button type="button" class="hc-button hc-button--icon hc-button--primary hc-button--boost" aria-label="Open menu">
    <i class="hc-icon hc-icon--chevron-down hc-icon--20"></i>
  </button>
</div>

Segment buttons

Segment buttons present the user with a number of options as buttons, with one taking a selected state. These are similar in a way to a radio group where only one choice may be selected a time and conveying the user’s choice.

Buttons must be placed within a block-level element with class .hc-button-segment. They can take any button variant class as well, but again should be uniform.

HTML

Expand Edit in Playground Copy


<div class="hc-button-segment">
    <button type="button" class="hc-button hc-button--primary">
        First
    </button>
    <button type="button" class="hc-button hc-button--primary hc-button--selected">
        Selected
    </button>
    <button type="button" class="hc-button hc-button--primary">
        Third
    </button>
    <button type="button" class="hc-button hc-button--primary" disabled>
        Disabled
    </button>
</div>
<div class="hc-button-segment">
    <button type="button" class="hc-button hc-button--secondary hc-button--boost">
        My forms
    </button>
    <button type="button" class="hc-button hc-button--secondary hc-button--boost hc-button--selected">
        All forms
    </button>
    <button type="button" class="hc-button hc-button--secondary hc-button--boost">
        Other's forms
    </button>
</div>