Scroll to content

Buttons

Primary

.btn .btn-primary

Default

Small

.btn-sm · smaller padding and font size

With icon

With icon small

.btn-sm

Secondary

.btn .btn-secondary

Default

Small

.btn-sm · smaller padding and font size

With icon

With icon small

.btn-sm

Link

.btn .btn-link

Default

Small

.btn-sm · smaller padding and font size

With icon

With icon small

.btn-sm

Secondary link

.btn .btn-link-secondary

Default

Small

.btn-sm · smaller padding and font size

With icon

With icon small

.btn-sm

Icon button

.btn .btn-icon

Default

Default
Active
Disabled

With circle

.btn-icon--circle

Default
Active
Disabled

Opaque

.btn-icon--opaque

Default
Active
Disabled

With background

.btn-icon--bg

Default
Active
Disabled

Menu

.btn-menu · the hamburger

Default
Active

Sizing

XXS (12px)

.icon-xxs

XS (16px)

.icon-xs

MD (24px)

.icon-md

LG (32px)

.icon-lg

XL (40px)

.icon-xl

XXL (48px)

.icon-xxl

3XL (96px)

.icon-3xl

Secondary icon button

.btn .btn-icon-secondary

Default

Default
Active
Disabled

With circle

.btn-icon--circle

Default
Active
Disabled

Opaque

.btn-icon--opaque

Default
Active
Disabled

With background

.btn-icon--bg

Default
Active
Disabled

Menu

.btn-menu · the hamburger

Default
Active

Sizing

XXS (12px)

.icon-xxs

XS (16px)

.icon-xs

MD (24px)

.icon-md

LG (32px)

.icon-lg

XL (40px)

.icon-xl

XXL (48px)

.icon-xxl

3XL (96px)

.icon-3xl

Primary

.btn .btn-primary

Default

Small

.btn-sm · smaller padding and font size

With icon

With icon small

.btn-sm

Secondary

.btn .btn-secondary

Default

Small

.btn-sm · smaller padding and font size

With icon

With icon small

.btn-sm

Link

.btn .btn-link

Default

Small

.btn-sm · smaller padding and font size

With icon

With icon small

.btn-sm

Secondary link

.btn .btn-link-secondary

Default

Small

.btn-sm · smaller padding and font size

With icon

With icon small

.btn-sm

Icon button

.btn .btn-icon

Default

Default
Active
Disabled

With circle

.btn-icon--circle

Default
Active
Disabled

Opaque

.btn-icon--opaque

Default
Active
Disabled

With background

.btn-icon--bg

Default
Active
Disabled

Menu

.btn-menu · the hamburger

Default
Active

Sizing

XXS (12px)

.icon-xxs

XS (16px)

.icon-xs

MD (24px)

.icon-md

LG (32px)

.icon-lg

XL (40px)

.icon-xl

XXL (48px)

.icon-xxl

3XL (96px)

.icon-3xl

Secondary icon button

.btn .btn-icon-secondary

Default

Default
Active
Disabled

With circle

.btn-icon--circle

Default
Active
Disabled

Opaque

.btn-icon--opaque

Default
Active
Disabled

With background

.btn-icon--bg

Default
Active
Disabled

Menu

.btn-menu · the hamburger

Default
Active

Sizing

XXS (12px)

.icon-xxs

XS (16px)

.icon-xs

MD (24px)

.icon-md

LG (32px)

.icon-lg

XL (40px)

.icon-xl

XXL (48px)

.icon-xxl

3XL (96px)

.icon-3xl

Badges

Default

.badge

Default With icon Link Link active Link disabled Link with icon

.badge-sm · the same badge one step smaller

Default With icon Link Link active Link disabled Link with icon

Primary

.badge .badge-primary

Default With icon Link Link active Link disabled Link with icon

.badge-sm · the same badge one step smaller

Default With icon Link Link active Link disabled Link with icon

Subtle

.badge .badge-subtle

Default With icon Link Link active Link disabled Link with icon

.badge-sm · the same badge one step smaller

Default With icon Link Link active Link disabled Link with icon

Default

.badge

Default With icon Link Link active Link disabled Link with icon

.badge-sm · the same badge one step smaller

Default With icon Link Link active Link disabled Link with icon

Primary

.badge .badge-primary

Default With icon Link Link active Link disabled Link with icon

.badge-sm · the same badge one step smaller

Default With icon Link Link active Link disabled Link with icon

Subtle

.badge .badge-subtle

Default With icon Link Link active Link disabled Link with icon

.badge-sm · the same badge one step smaller

Default With icon Link Link active Link disabled Link with icon