# Bottom App Bar

There's one type of bottom app bar in Material. This component provides access to up to four icon buttons as well as a floating action button (FAB).

    <!-- bottom app bar -->
    <div class="w-full text-sm flex flex-row space-x-2 items-center justify-center">
      <div class="flex flex-row justify-between items-center py-3 pl-1 pr-4 gap-2 w-full lg:w-[412px] bg-surface-200 dark:bg-surfacedark-200">
        <div class="flex flex-row gap-2 items-center">
          <button class="material-symbols-outlined relative !inline-flex !items-center justify-center w-12 h-12 gap-x-2 py-2.5 px-6 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">archive</button>
          <button class="material-symbols-outlined relative !inline-flex !items-center justify-center w-12 h-12 gap-x-2 py-2.5 px-6 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">label</button>
          <button class="material-symbols-outlined relative !inline-flex !items-center justify-center w-12 h-12 gap-x-2 py-2.5 px-6 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">delete</button>
        </div>

        <button class="flex justify-center items-center w-14 h-14 rounded-2xl bg-secondary-100 dark:bg-secondary-700 hover:shadow-md">
          <span class="material-symbols-outlined">add</span>
        </button>
      </div>
    </div>

### Search

## Theme Settings

### Light & Dark

### Theme Colors

### Layouts