# 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)

check Enabled
check Enabled
check Enabled
Red
Blue
Orange

Segmented Buttons (radio)

check Enabled
check Enabled
check Enabled
7 D
14 D
28 D

    <!-- 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>

### Search

## Theme Settings

### Light & Dark

### Theme Colors

### Layouts