Button

Btn

.btn

Btn - Icon

Btn - Icon only

Btn - Disabled

Btn - Link

.btn - Link

Btn - Link + Icon

.btn.cta

<button class="btn">Button</button>
<!-- Button with icon -->
<button class="btn"><span aria-hidden="true" class="icon icon-plus-circle me-s"></span>Icon</button>
<!-- Disabled button -->
<button class="btn" disabled>Disabled</button>
<!-- Link styled as button -->
<a href="#" class="btn">Button Link</a>
<!-- Link styled as button with icon -->
<a href="#" class="btn"><span aria-hidden="true" class="icon icon-plus-circle"></span></a>
<!-- Button with special cta class -->
<button class="btn cta">Button CTA</button>

Danger

.btn-danger

Danger - Icon

Danger - Icon only

Danger - Disabled

Danger - Link

.btn-danger - Link

Danger - Link + Icon

.btn-danger.cta

<button class="btn-danger">Button</button>
<!-- Button with icon -->
<button class="btn-danger"><span aria-hidden="true" class="icon icon-plus-circle me-s"></span>Icon</button>
<!-- Disabled button -->
<button class="btn-danger" disabled>Disabled</button>
<!-- Link styled as button -->
<a href="#" class="btn-danger">Button Link</a>
<!-- Link styled as button with icon -->
<a href="#" class="btn-danger"><span aria-hidden="true" class="icon icon-plus-circle"></span></a>
<!-- Button with special cta class -->
<button class="btn-danger cta">Button CTA</button>

Info

.btn-info

Info - Icon

Info - Icon only

Info - Disabled

Info - Link

.btn-info - Link

Info - Link + Icon

.btn-info.cta

<button class="btn-info">Button</button>
<!-- Button with icon -->
<button class="btn-info"><span aria-hidden="true" class="icon icon-plus-circle me-s"></span>Icon</button>
<!-- Disabled button -->
<button class="btn-info" disabled>Disabled</button>
<!-- Link styled as button -->
<a href="#" class="btn-info">Button Link</a>
<!-- Link styled as button with icon -->
<a href="#" class="btn-info"><span aria-hidden="true" class="icon icon-plus-circle"></span></a>
<!-- Button with special cta class -->
<button class="btn-info cta">Button CTA</button>

Large

.btn-large

Large - Icon

Large - Icon only

Large - Disabled

Large - Link

.btn-large - Link

Large - Link + Icon

.btn-large.cta

<button class="btn-large">Button</button>
<!-- Button with icon -->
<button class="btn-large"><span aria-hidden="true" class="icon icon-plus-circle me-s"></span>Icon</button>
<!-- Disabled button -->
<button class="btn-large" disabled>Disabled</button>
<!-- Link styled as button -->
<a href="#" class="btn-large">Button Link</a>
<!-- Link styled as button with icon -->
<a href="#" class="btn-large"><span aria-hidden="true" class="icon icon-plus-circle"></span></a>
<!-- Button with special cta class -->
<button class="btn-large cta">Button CTA</button>

.btn-link

Link - Icon

Link - Icon only

Link - Disabled

Link - Link

.btn-link - Link

Link - Link + Icon

.btn-link.cta

<button class="btn-link">Button</button>
<!-- Button with icon -->
<button class="btn-link"><span aria-hidden="true" class="icon icon-plus-circle me-s"></span>Icon</button>
<!-- Disabled button -->
<button class="btn-link" disabled>Disabled</button>
<!-- Link styled as button -->
<a href="#" class="btn-link">Button Link</a>
<!-- Link styled as button with icon -->
<a href="#" class="btn-link"><span aria-hidden="true" class="icon icon-plus-circle"></span></a>
<!-- Button with special cta class -->
<button class="btn-link cta">Button CTA</button>

Primary

.btn-primary

Primary - Icon

Primary - Icon only

Primary - Disabled

Primary - Link

.btn-primary - Link

Primary - Link + Icon

.btn-primary.cta

<button class="btn-primary">Button</button>
<!-- Button with icon -->
<button class="btn-primary"><span aria-hidden="true" class="icon icon-plus-circle me-s"></span>Icon</button>
<!-- Disabled button -->
<button class="btn-primary" disabled>Disabled</button>
<!-- Link styled as button -->
<a href="#" class="btn-primary">Button Link</a>
<!-- Link styled as button with icon -->
<a href="#" class="btn-primary"><span aria-hidden="true" class="icon icon-plus-circle"></span></a>
<!-- Button with special cta class -->
<button class="btn-primary cta">Button CTA</button>

Secondary

.btn-secondary

Secondary - Icon

Secondary - Icon only

Secondary - Disabled

Secondary - Link

.btn-secondary - Link

Secondary - Link + Icon

.btn-secondary.cta

<button class="btn-secondary">Button</button>
<!-- Button with icon -->
<button class="btn-secondary"><span aria-hidden="true" class="icon icon-plus-circle me-s"></span>Icon</button>
<!-- Disabled button -->
<button class="btn-secondary" disabled>Disabled</button>
<!-- Link styled as button -->
<a href="#" class="btn-secondary">Button Link</a>
<!-- Link styled as button with icon -->
<a href="#" class="btn-secondary"><span aria-hidden="true" class="icon icon-plus-circle"></span></a>
<!-- Button with special cta class -->
<button class="btn-secondary cta">Button CTA</button>

Small

.btn-small

Small - Icon

Small - Icon only

Small - Disabled

Small - Link

.btn-small - Link

Small - Link + Icon

.btn-small.cta

<button class="btn-small">Button</button>
<!-- Button with icon -->
<button class="btn-small"><span aria-hidden="true" class="icon icon-plus-circle me-s"></span>Icon</button>
<!-- Disabled button -->
<button class="btn-small" disabled>Disabled</button>
<!-- Link styled as button -->
<a href="#" class="btn-small">Button Link</a>
<!-- Link styled as button with icon -->
<a href="#" class="btn-small"><span aria-hidden="true" class="icon icon-plus-circle"></span></a>
<!-- Button with special cta class -->
<button class="btn-small cta">Button CTA</button>

Success

.btn-success

Success - Icon

Success - Icon only

Success - Disabled

Success - Link

.btn-success - Link

Success - Link + Icon

.btn-success.cta

<button class="btn-success">Button</button>
<!-- Button with icon -->
<button class="btn-success"><span aria-hidden="true" class="icon icon-plus-circle me-s"></span>Icon</button>
<!-- Disabled button -->
<button class="btn-success" disabled>Disabled</button>
<!-- Link styled as button -->
<a href="#" class="btn-success">Button Link</a>
<!-- Link styled as button with icon -->
<a href="#" class="btn-success"><span aria-hidden="true" class="icon icon-plus-circle"></span></a>
<!-- Button with special cta class -->
<button class="btn-success cta">Button CTA</button>

Warning

.btn-warning

Warning - Icon

Warning - Icon only

Warning - Disabled

Warning - Link

.btn-warning - Link

Warning - Link + Icon

.btn-warning.cta

<button class="btn-warning">Button</button>
<!-- Button with icon -->
<button class="btn-warning"><span aria-hidden="true" class="icon icon-plus-circle me-s"></span>Icon</button>
<!-- Disabled button -->
<button class="btn-warning" disabled>Disabled</button>
<!-- Link styled as button -->
<a href="#" class="btn-warning">Button Link</a>
<!-- Link styled as button with icon -->
<a href="#" class="btn-warning"><span aria-hidden="true" class="icon icon-plus-circle"></span></a>
<!-- Button with special cta class -->
<button class="btn-warning cta">Button CTA</button>