Bottom app bar

Bottom app bars display navigation and key actions at the bottom of mobile and tablet screens

Usage

Bottom app bars provide access to up to four actions, including the floating action button (FAB).

Instalation

Copy and paste the following code into your project.

import * as React from 'react'

import { cn } from '@/lib/utils'

const BottomAppBar = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      'bottom-bar fixed inset-x-0 bottom-0 z-30 flex h-20 w-full items-center gap-2 bg-surfaceContainer pl-3 pr-4 text-onSuccessContainer shadow-md',
      className
    )}
    {...props}
  />
))
BottomAppBar.displayName = 'BottomAppBar'

export { BottomAppBar }

Update the import paths to match your project setup.

Examples

Bottom App Bar

import { BottomAppBar } from '@/components/ui/bottom-app-bar'
import { Fab } from '@/components/ui/fab'
import { Icon } from '@/components/ui/icon'
import { IconButton } from '@/components/ui/icon-button'

export const DefaultBottomAppBar = () => {
  return (
    <BottomAppBar>
      <IconButton variant="standard">
        <Icon symbol="check_box" />
      </IconButton>
      <IconButton variant="standard">
        <Icon symbol="brush" />
      </IconButton>
      <IconButton variant="standard">
        <Icon symbol="mic" />
      </IconButton>
      <IconButton variant="standard">
        <Icon symbol="image" />
      </IconButton>
      <Fab className="ml-auto shadow-none hover:shadow-none">
        <Fab.Icon>
          <Icon symbol="add" />
        </Fab.Icon>
      </Fab>
    </BottomAppBar>
  )
}

arrow_back Lists Navigation bar arrow_forward