Buttons

Buttons allow users to take actions, and make choices, with a single tap. Material 3 buttons are categorized by their emphasis and role.

Highly interactive!

Material 3 Variants

M3 Common Scales

Standard Material buttons are 40px in height. They use a pill shape and a 500-weight label.

40px height standard!

HTML Implementation

HTML

<!-- M3 Filled -->
<button class="btn btn-primary rounded-pill px-4" type="button">Filled</button>

<!-- M3 Tonal -->
<button class="btn btn-tonal rounded-pill px-4" type="button">Tonal</button>

<!-- M3 Outlined -->
<button class="btn btn-outline-primary rounded-pill px-4" type="button">Outlined</button>

<!-- M3 Text -->
<button class="btn btn-link text-primary fw-bold text-decoration-none" type="button">Text</button>

Floating Action Buttons

M3 FABs use a large rounded corner (12px to 16px) instead of a circle. They are now fully responsive and scale appropriately on smaller screens.

Responsive scaling!

FAB Implementation

HTML

<!-- Standard FAB -->
<button class="btn btn-fab shadow-sm">
  <i class="material-icons">add</i>
</button>

<!-- Extended FAB -->
<button class="btn btn-fab btn-fab-extended shadow-sm">
  <i class="material-icons">edit</i>
  <span>Compose</span>
</button>