Buttons

Buttons allow users to take actions, and make choices, with a single tap.

html

<button type="button" class="btn btn-purple m-1">
  Default
</button>

html

<button type="button" class="btn btn-purple m-1">
  With Icon <i class="bi bi-star-fill"></i>
</button>

html

<button type="button" class="btn btn-purple btn-lg m-1">
  Large
</button>

html

<button type="button" class="btn btn-purple btn-sm m-1">
  Small
</button>

html

<button type="button" class="btn btn-purple m-1" disabled>
  Disabled
</button>

Color options

html

<button type="button" class="btn btn-primary m-1">
  Primary | Blue
</button>

html

<button type="button" class="btn btn-secondary m-1">
  Secondary | Gray
</button>

html

<button type="button" class="btn btn-success m-1">
  Success | Green
</button>

html

<button type="button" class="btn btn-info m-1">
  Info | Cyan
</button>

html

<button type="button" class="btn btn-warning m-1">
  Warning | Yellow
</button>

html

<button type="button" class="btn btn-danger m-1">
  Danger | Red
</button>

html

<button type="button" class="btn btn-light m-1">
  Light
</button>

html

<button type="button" class="btn btn-dark m-1">
  Dark
</button>

html

<button type="button" class="btn btn-indigo m-1">
  Indigo
</button>

html

<button type="button" class="btn btn-purple m-1">
  Purple
</button>

html

<button type="button" class="btn btn-pink m-1">
  Pink
</button>

html

<button type="button" class="btn btn-orange m-1">
  Orange
</button>

html

<button type="button" class="btn btn-teal m-1">
  Teal
</button>

Button Link

html

<button type="button" class="btn btn-link m-1">
  Link
</button>

Outlined Buttons

Add .btn-outline-[color] to create Outlined buttons.

html

<button type="button" class="btn btn-outline-pink m-1">
  Icon <i class="bi bi-star-fill"></i>
</button>

html

<button type="button" class="btn btn-outline-pink btn-lg m-1">
  Large
</button>

html

<button type="button" class="btn btn-outline-pink btn-sm m-1">
  Small
</button>

html

<button type="button" class="btn btn-outline-pink m-1" disabled>
  Disabled
</button>

Text Buttons

Add .border-0 to Outlined buttons to create Text buttons.

html

<button type="button" class="btn btn-outline-green border-0 m-1">
  Icon <i class="bi bi-star-fill"></i>
</button>

html

<button type="button" class="btn btn-outline-green border-0 btn-lg m-1">
  Large
</button>

html

<button type="button" class="btn btn-outline-green border-0 btn-sm m-1">
  Small
</button>

html

<button type="button" class="btn btn-outline-green border-0 m-1" disabled>
  Disabled
</button>

Ripple effect

Ripple effect requires Javascript. Click to view Javascript.

Learn more about Ripple.

html

<button type="button" class="btn btn-success m-1">
  Success | Green
  <span class="ripple-surface"></span>
</button>

html

<button type="button" class="btn btn-warning m-1">
  Warning | Yellow
  <span class="ripple-surface"></span>
</button>

html

<button type="button" class="btn btn-outline-purple m-1">
  Outlined Button
  <span class="ripple-surface"></span>
</button>

html

<button type="button" class="btn btn-outline-pink border-0 m-1">
  Text Button
  <span class="ripple-surface"></span>
</button>

Javascript for ripple

// Initialize Ripple
const rippleSurface = Array.prototype.slice.call(document.querySelectorAll('.ripple-surface'))
rippleSurface.map(s => {
  return new mdc.ripple.MDCRipple(s)
})

Horizontal Button group

html

<div class="btn-group m-1">
  <button type="button" class="btn btn-indigo">Button</button>
  <button type="button" class="btn btn-indigo">Button</button>
</div>

html

<div class="btn-group m-1">
  <button type="button" class="btn btn-indigo">
    Icon <i class="bi bi-star-fill"></i>
  </button>
  <button type="button" class="btn btn-indigo">
    Icon <i class="bi bi-star-fill"></i>
  </button>
</div>

html

<div class="btn-group m-1">
  <button type="button" class="btn btn-indigo btn-lg">Large</button>
  <button type="button" class="btn btn-indigo btn-lg">Large</button>
</div>

html

<div class="btn-group m-1">
  <button type="button" class="btn btn-indigo btn-sm">Small</button>
  <button type="button" class="btn btn-indigo btn-sm">Small</button>
</div>

html

<div class="btn-group m-1">
  <button type="button" class="btn btn-indigo" disabled>Disabled</button>
  <button type="button" class="btn btn-indigo" disabled>Disabled</button>
</div>

Vertical Button group

html

<div class="btn-group-vertical m-1">
  <button type="button" class="btn btn-indigo">Button</button>
  <button type="button" class="btn btn-indigo">Button</button>
</div>

html

<div class="btn-group-vertical m-1">
  <button type="button" class="btn btn-indigo">
    Icon <i class="bi bi-star-fill"></i>
  </button>
  <button type="button" class="btn btn-indigo">
    Icon <i class="bi bi-star-fill"></i>
  </button>
</div>

html

<div class="btn-group-vertical m-1">
  <button type="button" class="btn btn-indigo btn-lg">Large</button>
  <button type="button" class="btn btn-indigo btn-lg">Large</button>
</div>

html

<div class="btn-group-vertical m-1">
  <button type="button" class="btn btn-indigo btn-sm">Small</button>
  <button type="button" class="btn btn-indigo btn-sm">Small</button>
</div>

html

<div class="btn-group-vertical m-1">
  <button type="button" class="btn btn-indigo" disabled>Disabled</button>
  <button type="button" class="btn btn-indigo" disabled>Disabled</button>
</div>

CONTENTS