Buttons

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

html

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

html

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

html

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

html

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

html

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

Elevated buttons

Add .elevated-[1 to 10] to create Elevated buttons.

CODE

html

<button type="button" class="btn btn-primary elevated-1">
  Elevated 1
</button>

html

<button type="button" class="btn btn-primary elevated-10">
  Elevated 10
</button>

Button Link

CODE

html

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

html

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

Outlined Buttons

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

CODE

html

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

html

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

html

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

html

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

Text Buttons

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

CODE

html

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

html

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

html

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

html

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

Color options

Default

CODE

html

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

html

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

html

<button type="button" class="btn btn-tertiary m-1">
  Tertiary
</button>

html

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

html

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

html

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

html

<button type="button" class="btn btn-info m-1">
  Info
</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>

Outlined

CODE

html

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

html

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

html

<button type="button" class="btn btn-outline-tertiary m-1">
  Tertiary
</button>

html

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

html

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

html

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

html

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

html

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

html

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

Text

CODE

html

<button type="button" class="btn btn-outline-primary border-0 m-1">
  Primary
</button>

html

<button type="button" class="btn btn-outline-secondary border-0 m-1">
  Secondary
</button>

html

<button type="button" class="btn btn-outline-tertiary border-0 m-1">
  Tertiary
</button>

html

<button type="button" class="btn btn-outline-success border-0 m-1">
  Success
</button>

html

<button type="button" class="btn btn-outline-danger border-0 m-1">
  Danger
</button>

html

<button type="button" class="btn btn-outline-warning border-0 m-1">
  Warning
</button>

html

<button type="button" class="btn btn-outline-info border-0 m-1">
  Info
</button>

html

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

html

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

Ripple effect

Ripple effect requires Javascript. Click to view Javascript.

Learn more about Ripple.

CODE

html

<button type="button" class="btn btn-primary m-1">
  Primary
  <span class="ripple-surface"></span>
</button>

html

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

html

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

html

<button type="button" class="btn btn-outline-primary border-0 m-1">
  Primary
  <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

CODE

html

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

html

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

html

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

html

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

html

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

Vertical Button group

CODE

html

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

html

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

html

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

html

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

html

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

Theme Builder

Personalize Material Style to reflect your product's brand identity.

CONTENTS