AppBar

Beta

Top application bar with configurable start, content, and end slots.

Installation

npm install @xaui/native

Import

import { AppBar, AppBarStartContent, AppBarContent, AppBarEndContent } from '@xaui/native/app-bar'

Basic Usage

Minimal example showing the component with its default configuration.

import { AppBar } from '@xaui/native/app-bar'

export function Example() {
  return <AppBar />
}

Basic

Title centred with a back button on the left.

import { AppBar, AppBarStartContent, AppBarContent } from '@xaui/native/app-bar'
import { IconButton } from '@xaui/native/button'
import { Typography } from '@xaui/native/typography'
import { ArrowBackIcon } from '@xaui/icons/arrow-back'

export function BasicExample() {
  return (
    <AppBar>
      <AppBarStartContent>
        <IconButton icon={<ArrowBackIcon />} onPress={() => {}} />
      </AppBarStartContent>
      <AppBarContent>
        <Typography variant="titleMedium">Home</Typography>
      </AppBarContent>
    </AppBar>
  )
}

With End Actions

Action buttons on the right using AppBarEndContent.

import { AppBar, AppBarStartContent, AppBarContent, AppBarEndContent } from '@xaui/native/app-bar'
import { IconButton } from '@xaui/native/button'
import { Typography } from '@xaui/native/typography'
import { MenuIcon } from '@xaui/icons/menu'
import { NotificationsIcon } from '@xaui/icons/notifications'
import { SettingsIcon } from '@xaui/icons/settings'

export function WithActionsExample() {
  return (
    <AppBar>
      <AppBarStartContent>
        <IconButton icon={<MenuIcon />} onPress={() => {}} />
      </AppBarStartContent>
      <AppBarContent>
        <Typography variant="titleMedium">Dashboard</Typography>
      </AppBarContent>
      <AppBarEndContent>
        <IconButton icon={<NotificationsIcon />} onPress={() => {}} />
        <IconButton icon={<SettingsIcon />} onPress={() => {}} />
      </AppBarEndContent>
    </AppBar>
  )
}

Floating Variant

Detached pill-shaped bar with an elevation shadow.

import { AppBar, AppBarStartContent, AppBarContent, AppBarEndContent } from '@xaui/native/app-bar'
import { IconButton } from '@xaui/native/button'
import { Typography } from '@xaui/native/typography'
import { ArrowBackIcon } from '@xaui/icons/arrow-back'
import { SearchIcon } from '@xaui/icons/search'

export function FloatingExample() {
  return (
    <AppBar variant="floating" elevation={2}>
      <AppBarStartContent>
        <IconButton icon={<ArrowBackIcon />} onPress={() => {}} />
      </AppBarStartContent>
      <AppBarContent>
        <Typography variant="titleMedium">Search</Typography>
      </AppBarContent>
      <AppBarEndContent>
        <IconButton icon={<SearchIcon />} onPress={() => {}} />
      </AppBarEndContent>
    </AppBar>
  )
}

Theme Colors

Use themeColor to apply a branded background.

import { AppBar, AppBarStartContent, AppBarContent } from '@xaui/native/app-bar'
import { IconButton } from '@xaui/native/button'
import { Typography } from '@xaui/native/typography'
import { ArrowBackIcon } from '@xaui/icons/arrow-back'
import { Column } from '@xaui/native/view'

export function ThemeColorsExample() {
  const colors = ['primary', 'secondary', 'success', 'danger', 'warning'] as const

  return (
    <Column gap={8}>
      {colors.map(color => (
        <AppBar key={color} themeColor={color}>
          <AppBarStartContent>
            <IconButton icon={<ArrowBackIcon />} onPress={() => {}} />
          </AppBarStartContent>
          <AppBarContent>
            <Typography variant="titleMedium" style={{ textTransform: 'capitalize' }}>
              {color}
            </Typography>
          </AppBarContent>
        </AppBar>
      ))}
    </Column>
  )
}

Elevation Levels

Increase elevation to add progressively stronger shadows.

import { AppBar, AppBarContent } from '@xaui/native/app-bar'
import { Typography } from '@xaui/native/typography'
import { Column } from '@xaui/native/view'

export function ElevationExample() {
  return (
    <Column gap={8}>
      {([0, 1, 2, 3, 4] as const).map(level => (
        <AppBar key={level} elevation={level}>
          <AppBarContent>
            <Typography variant="titleMedium">Elevation {level}</Typography>
          </AppBarContent>
        </AppBar>
      ))}
    </Column>
  )
}