Buttons

Buttons help people initiate actions, from sending an email, to sharing a document, to liking a post.

Common buttons

There are five types of common buttons: elevated, filled, filled tonal, outlined, and text.

Elevated Buttons

Filled Buttons

Tonal Buttons

Outlined Buttons

Text Buttons

            
<!-- btn elevated -->
<button class="btn-elevated relative inline-flex flex-row items-center justify-center gap-x-2 py-2.5 px-6 rounded-[6.25rem] shadow-lg text-sm tracking-[.00714em] font-medium bg-surface-100 hover:bg-surface-200 focus:bg-surface-400 text-primary-600 dark:bg-surfacedark-100 dark:hover:bg-surfacedark-200 dark:focus:bg-surfacedark-400 dark:text-primary-200">
  Enabled
</button>
<button class="btn-elevated relative inline-flex flex-row items-center justify-center gap-x-2 py-2.5 px-6 rounded-[6.25rem] shadow-lg text-sm tracking-[.00714em] font-medium bg-surface-100 hover:bg-surface-200 focus:bg-surface-400 text-primary-600 dark:bg-surfacedark-100 dark:hover:bg-surfacedark-200 dark:focus:bg-surfacedark-400 dark:text-primary-200">
  <span class="material-symbols-outlined">add</span>
  Enabled
</button>
<button class="btn relative inline-flex flex-row items-center justify-center gap-x-2 py-2.5 px-6 rounded-[6.25rem] hover:shadow-md text-sm tracking-[.00714em] font-medium" disabled>
  <span class="material-symbols-outlined">add</span>
  Disabled
</button>

<!-- btn filled -->
<button class="btn relative inline-flex flex-row items-center justify-center gap-x-2 py-2.5 px-6 rounded-[6.25rem] hover:shadow-md text-sm tracking-[.00714em] font-medium bg-primary-600 text-white dark:bg-primary-200 dark:text-primary-800">
  Enabled
</button>
<button class="btn relative inline-flex flex-row items-center justify-center gap-x-2 py-2.5 px-6 rounded-[6.25rem] hover:shadow-md text-sm tracking-[.00714em] font-medium bg-primary-600 text-white dark:bg-primary-200 dark:text-primary-800">
  <span class="material-symbols-outlined">add</span>
  Enabled
</button>
<button class="btn relative inline-flex flex-row items-center justify-center gap-x-2 py-2.5 px-6 rounded-[6.25rem] hover:shadow-md text-sm tracking-[.00714em] font-medium" disabled>
  <span class="material-symbols-outlined">add</span>
  Disabled
</button>

<!-- btn tonal -->
<button class="btn-tonal relative inline-flex flex-row items-center justify-center gap-x-2 py-2.5 px-6 rounded-[6.25rem] text-sm tracking-[.00714em] font-medium hover:shadow bg-secondary-100 text-primary-900 dark:bg-secondary-700 dark:text-secondary-100">
  Enabled
</button>
<button class="btn-tonal relative inline-flex flex-row items-center justify-center gap-x-2 py-2.5 px-6 rounded-[6.25rem] text-sm tracking-[.00714em] font-medium hover:shadow bg-secondary-100 text-primary-900 dark:bg-secondary-700 dark:text-secondary-100">
  <span class="material-symbols-outlined">add</span>
  Enabled
</button>
<button class="btn relative inline-flex flex-row items-center justify-center gap-x-2 py-2.5 px-6 rounded-[6.25rem] hover:shadow-md text-sm tracking-[.00714em] font-medium" disabled>
  <span class="material-symbols-outlined">add</span>
  Disabled
</button>

<!-- btn outlined -->
<button class="btn-outline relative inline-flex flex-row items-center justify-center gap-x-2 py-2.5 px-6 rounded-[6.25rem] text-sm tracking-[.00714em] font-medium border border-gray-500 text-primary-600 dark:border-gray-400 dark:text-primary-200">
  Enabled
</button>
<button class="btn-outline relative inline-flex flex-row items-center justify-center gap-x-2 py-2.5 px-6 rounded-[6.25rem] text-sm tracking-[.00714em] font-medium border border-gray-500 text-primary-600 dark:border-gray-400 dark:text-primary-200">
  <span class="material-symbols-outlined">add</span>
  Enabled
</button>
<button class="btn-outline relative inline-flex flex-row items-center justify-center gap-x-2 py-2.5 px-6 rounded-[6.25rem] text-sm tracking-[.00714em] font-medium border border-neutral-200 dark:border-neutral-400 dark:text-neutral-400" disabled>
  <span class="material-symbols-outlined">add</span>
  Disabled
</button>

<!-- btn text -->
<button class="relative inline-flex flex-row items-center justify-center gap-x-2 py-2.5 px-6 rounded-[6.25rem] text-sm tracking-[.00714em] font-medium text-primary-600 hover:bg-surface-200 focus:bg-surface-400 dark:text-primary-200 dark:hover:bg-surfacedark-200 dark:focus:bg-surfacedark-400">
  Enabled
</button>
<button class="relative inline-flex flex-row items-center justify-center gap-x-2 py-2.5 px-6 rounded-[6.25rem] text-sm tracking-[.00714em] font-medium text-primary-600 hover:bg-surface-200 focus:bg-surface-400 dark:text-primary-200 dark:hover:bg-surfacedark-200 dark:focus:bg-surfacedark-400">
  <span class="material-symbols-outlined">add</span>
  Enabled
</button>
<button class="relative inline-flex flex-row items-center justify-center gap-x-2 py-2.5 px-6 rounded-[6.25rem] text-sm tracking-[.00714em] font-medium text-neutral-400" disabled>
  <span class="material-symbols-outlined">add</span>
  Disabled
</button>

Floating Action buttons

The FAB represents the most important action on a screen. Extended FABs help people take primary actions. They're wider than FABs to accommodate a text label and larger target area.

Floating Action buttons (Fabs)

              
<!-- fabs small -->
<button class="fabs relative inline-flex flex-row items-center justify-center w-10 h-10 gap-x-2 p-2 rounded-xl overflow-hidden shadow-lg text-sm tracking-[.00714em] font-medium bg-primary-100 dark:bg-primary-700 dark:text-primary-100">
  <span class="material-symbols-outlined !text-lg">edit</span>
</button>

<!-- fabs medium -->
<button class="fabs relative inline-flex flex-row items-center justify-center w-14 h-14 gap-x-2 p-2 rounded-2xl overflow-hidden shadow-lg text-sm tracking-[.00714em] font-medium bg-primary-100 dark:bg-primary-700 dark:text-primary-100">
  <span class="material-symbols-outlined">edit</span>
</button>

<!-- fabs extended  -->
<button class="fabs relative inline-flex flex-row items-center justify-center h-14 gap-x-3 p-4 pr-8 rounded-2xl overflow-hidden shadow-lg text-sm tracking-[.00714em] font-medium bg-primary-100 dark:bg-primary-700 dark:text-primary-100">
  <span class="material-symbols-outlined">edit</span>
  Compose
</button>

<!-- fabs large -->
<button class="fabs relative inline-flex flex-row items-center justify-center w-24 h-24 gap-x-2 p-2 rounded-[28px] overflow-hidden shadow-xl text-sm tracking-[.00714em] font-medium bg-primary-100 dark:bg-primary-700 dark:text-primary-100">
  <span class="material-symbols-outlined !text-4xl">edit</span>
</button>

Icon buttons

Icon buttons help people take supplementary actions with a single tap.

Icon buttons

              
<!-- default -->
<button class="material-symbols-outlined relative !inline-flex !items-center justify-center w-12 h-12 p-2.5 rounded-[6.25rem] text-sm tracking-[.00714em] text-center font-medium hover:bg-surface-300 focus:bg-surface-400 dark:text-primary-200 dark:hover:bg-surfacedark-300 dark:focus:bg-surfacedark-400">settings</button>

<!-- filled -->
<button class="material-symbols-outlined btn relative !inline-flex !items-center flex-row justify-center w-12 h-12 p-2.5 rounded-[6.25rem] hover:shadow-md text-sm tracking-[.00714em] font-medium bg-primary-600 text-white dark:bg-primary-200 dark:text-primary-800">settings</button>

<!-- tonal -->
<button class="material-symbols-outlined btn-tonal relative !inline-flex !items-center flex-row justify-center w-12 h-12 p-2.5 rounded-[6.25rem] text-sm tracking-[.00714em] font-medium hover:shadow bg-secondary-100 text-primary-900 dark:bg-secondary-700 dark:text-secondary-100">settings</button>

<!-- outlined -->
<button class="material-symbols-outlined btn-outline relative !inline-flex !items-center flex-row justify-center w-12 h-12 p-2.5 rounded-[6.25rem] text-sm tracking-[.00714em] font-medium border border-gray-500 text-primary-600 dark:border-gray-400 dark:text-primary-200">settings</button>

Segmented buttons

Segmented buttons help people select options, switch views, or sort elements. You must add the class .active to .segmented-item to make it active. Use javascript or your favorite framework to add classes.

Segmented Buttons (checkbox)

Segmented Buttons (radio)

              
<!-- btn segmented checkbox  -->
<div class="btn-segmented inline-flex flex-row justify-center items-center">
  <div class="segmented-item active [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 h-10 btn-outline relative inline-flex flex-row items-center justify-center gap-x-2 py-2.5 px-6 text-sm tracking-[.00714em] font-medium border border-gray-500 text-primary-600 dark:border-gray-400 dark:text-primary-200">
    <input id="check1" type="checkbox" class="z-10 opacity-0 absolute inset-0" value="1" checked>
    <label class="flex items-center gap-3" for="check1">
      <span class="material-symbols-outlined check-icon">check</span>
      Enabled
    </label>
  </div>
  <div class="segmented-item [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 h-10 btn-outline relative inline-flex flex-row items-center justify-center gap-x-2 py-2.5 px-6 text-sm tracking-[.00714em] font-medium border border-gray-500 text-primary-600 dark:border-gray-400 dark:text-primary-200">
    <input id="check2" type="checkbox" class="z-10 opacity-0 absolute inset-0" value="1">
    <label class="flex items-center gap-3" for="check2">
      <span class="material-symbols-outlined check-icon">check</span>
      Enabled
    </label>
  </div>
  <div class="segmented-item [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 h-10 btn-outline relative inline-flex flex-row items-center justify-center gap-x-2 py-2.5 px-6 text-sm tracking-[.00714em] font-medium border border-gray-500 text-primary-600 dark:border-gray-400 dark:text-primary-200">
    <input id="check3" type="checkbox" class="z-10 opacity-0 absolute inset-0" value="1">
    <label class="flex items-center gap-3" for="check3">
      <span class="material-symbols-outlined check-icon">check</span>
      Enabled
    </label>
  </div>
</div>

<!-- btn segmented small checkbox -->
<div class="btn-segmented inline-flex flex-row items-center">
  <div class="segmented-item [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 h-8 btn-outline relative inline-flex flex-row items-center justify-center gap-x-2 py-2 px-4 text-sm tracking-[.00714em] font-medium border border-gray-500 text-primary-600 dark:border-gray-400 dark:text-primary-200  active">
    <input id="check21" type="checkbox" class="z-10 opacity-0 absolute inset-0" value="1" checked="">
    <label class="flex items-center gap-3" for="check21">
      Red
    </label>
  </div>
  <div class="segmented-item [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 h-8 btn-outline relative inline-flex flex-row items-center justify-center gap-x-2 py-2 px-4 text-sm tracking-[.00714em] font-medium border border-gray-500 text-primary-600 dark:border-gray-400 dark:text-primary-200">
    <input id="check22" type="checkbox" class="z-10 opacity-0 absolute inset-0" value="2">
    <label class="flex items-center gap-3" for="check22">
      Blue
    </label>
  </div>
  <div class="segmented-item [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 h-8 btn-outline relative inline-flex flex-row items-center justify-center gap-x-2 py-2 px-4 text-sm tracking-[.00714em] font-medium border border-gray-500 text-primary-600 dark:border-gray-400 dark:text-primary-200">
    <input id="check23" type="checkbox" class="z-10 opacity-0 absolute inset-0" value="2">
    <label class="flex items-center gap-3" for="check23">
      Orange
    </label>
  </div>
</div>

<!-- btn segmented radio  -->
<div class="btn-segmented inline-flex flex-row justify-center items-center">
  <div class="segmented-item active [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 h-10 btn-outline relative inline-flex flex-row items-center justify-center gap-x-2 py-2.5 px-6 text-sm tracking-[.00714em] font-medium border border-gray-500 text-primary-600 dark:border-gray-400 dark:text-primary-200">
    <input id="check4" type="radio" name="radios" class="z-10 opacity-0 absolute inset-0" value="1" checked>
    <label class="flex items-center gap-3" for="check1">
      <span class="material-symbols-outlined check-icon">check</span>
      Enabled
    </label>
  </div>
  <div class="segmented-item [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 h-10 btn-outline relative inline-flex flex-row items-center justify-center gap-x-2 py-2.5 px-6 text-sm tracking-[.00714em] font-medium border border-gray-500 text-primary-600 dark:border-gray-400 dark:text-primary-200">
    <input id="check5" type="radio" name="radios" class="z-10 opacity-0 absolute inset-0" value="2">
    <label class="flex items-center gap-3" for="check2">
      <span class="material-symbols-outlined check-icon">check</span>
      Enabled
    </label>
  </div>
  <div class="segmented-item [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 h-10 btn-outline relative inline-flex flex-row items-center justify-center gap-x-2 py-2.5 px-6 text-sm tracking-[.00714em] font-medium border border-gray-500 text-primary-600 dark:border-gray-400 dark:text-primary-200">
    <input id="check6" type="radio" name="radios" class="z-10 opacity-0 absolute inset-0" value="3">
    <label class="flex items-center gap-3" for="check3">
      <span class="material-symbols-outlined check-icon">check</span>
      Enabled
    </label>
  </div>
</div>

<!-- btn segmented small radio -->
<div class="btn-segmented inline-flex flex-row items-center">
  <div class="segmented-item [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 h-8 btn-outline relative inline-flex flex-row items-center justify-center gap-x-2 py-2 px-4 text-sm tracking-[.00714em] font-medium border border-gray-500 text-primary-600 dark:border-gray-400 dark:text-primary-200  active">
    <input id="check17" type="radio" name="radiosmall" class="z-10 opacity-0 absolute inset-0" value="1" checked="">
    <label class="flex items-center gap-3" for="check17">
      7 D
    </label>
  </div>
  <div class="segmented-item [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 h-8 btn-outline relative inline-flex flex-row items-center justify-center gap-x-2 py-2 px-4 text-sm tracking-[.00714em] font-medium border border-gray-500 text-primary-600 dark:border-gray-400 dark:text-primary-200">
    <input id="check18" type="radio" name="radiosmall" class="z-10 opacity-0 absolute inset-0" value="2">
    <label class="flex items-center gap-3" for="check18">
      14 D
    </label>
  </div>
  <div class="segmented-item [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 h-8 btn-outline relative inline-flex flex-row items-center justify-center gap-x-2 py-2 px-4 text-sm tracking-[.00714em] font-medium border border-gray-500 text-primary-600 dark:border-gray-400 dark:text-primary-200">
    <input id="check28" type="radio" name="radiosmall" class="z-10 opacity-0 absolute inset-0" value="2">
    <label class="flex items-center gap-3" for="check28">
      28 D
    </label>
  </div>
</div>