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 lsdfdfsdafd gap-2 pdskdmsdnjw jkuthslatgh">
  <div class="flex lsdfdfsdafd qesolakmsjd pdskdmsdnjw py-3 ps-1 pe-4 gap-2 w-full lg:w-[412px] bg-surface-200 dark:bg-surfacedark-200">
    <div class="flex lsdfdfsdafd gap-2 pdskdmsdnjw">
      <button class="material-symbols-outlined relative !inline-flex !pdskdmsdnjw jkuthslatgh 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 !pdskdmsdnjw jkuthslatgh 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 !pdskdmsdnjw jkuthslatgh 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 jkuthslatgh pdskdmsdnjw 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>