Proxyclick Proxyclick logo Hello

Buttons

The button is one of the most common interface element. It's often used to create call to action on Hubspot. It is also used as the base element of some modules like a pagination.

Base

This is a button

.c-button

The button component can size and color variants that can be mixed together. You should always include the base class .c-button.

Size variants R

Small button

.c-button .c-button--s

Medium button (default)

.c-button .c-button--m

Large button

.c-button .c-button--l

Colors

Default colors

Default button
.c-button
Primary button
.c-button .c-button--primary
Warning button
.c-button .c-button--warning
Primary warning button
.c-button .c-button--primary-warning
Danger button
.c-button .c-button--danger
Primary Danger button
.c-button .c-button--primary-danger

Inverse colors

Default button
.c-button .c-button--inverse
Primary button
.c-button .c-button--primary-inverse

Customized colors

.c-button c-button--facebook

A link button take the same space as a button but is displayed like a link. It offers a larger tap zone than a hypertext link and is displayed aligned when used next to other buttons.

This is a button This is a link button This is a link button This is a link button

.c-button .c-button--link

States

Disabled

Loading

Icons can be added before or after the label using the Icon component with and extra c-button__icon class. The variant class c-button--icon-onlymust be added to the button if it contains an icon without label.

Small button always rely on 16px icons set.

Get more help Get more help Get more help

Medium and large buttons rely on 24px icons set.

Get more help Get more help Get more help

Get more help Get more help Get more help

Fluid R

Fluid buttons expand to the width of their container while inline buttons are sized based on their content (default).

Fluid button

.c-button .c-button--fluid

Inline button (default)

.c-button .c-button--inline

This is a responsive class so you can make the button fluid only for specific screen sizes:

Fluid on mobile

.c-button .c-button--fluid .c-button--inline@medium

With the class c-button--fluid the button will look fluid from small screen. We then add a class c-button--inline@medium to size it back to its natural width (inline-block) on medium and larger screens. Resize your browser window to see the responsiveness.