Toolbar

Beta

Action toolbar container with contextual toolbar actions.

Installation

npm install @xaui/native

Import

import { Toolbar, ToolbarAction } from '@xaui/native/toolbar'

Basic Usage

Minimal example showing the component with its default configuration.

import { Toolbar } from '@xaui/native/toolbar'

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

Floating Bottom

Rounded floating toolbar positioned at the bottom.

import { Toolbar, ToolbarAction } from '@xaui/native/toolbar'
import { ShareIcon } from '@xaui/icons/share'
import { PencilIcon } from '@xaui/icons/pencil'
import { TrashIcon } from '@xaui/icons/trash'

export function FloatingBottomToolbarExample() {
  return (
    <Toolbar variant="floating" position="bottom" themeColor="primary">
      <ToolbarAction icon={({ color, size }) => <ShareIcon size={size} color={color} />} />
      <ToolbarAction icon={({ color, size }) => <PencilIcon size={size} color={color} />} />
      <ToolbarAction icon={({ color, size }) => <TrashIcon size={size} color={color} />} />
    </Toolbar>
  )
}

Docked Top with Divider

Fixed top toolbar with optional divider.

import { Toolbar, ToolbarAction } from '@xaui/native/toolbar'
import { ArrowBackIcon } from '@xaui/icons/arrow-back'
import { SearchIcon } from '@xaui/icons/search'
import { EllipsisVerticalIcon } from '@xaui/icons/ellipsis-vertical'

export function DockedTopToolbarExample() {
  return (
    <Toolbar variant="docked" position="top" showDivider themeColor="secondary">
      <ToolbarAction icon={({ color, size }) => <ArrowBackIcon size={size} color={color} />} />
      <ToolbarAction icon={({ color, size }) => <SearchIcon size={size} color={color} />} />
      <ToolbarAction icon={({ color, size }) => <EllipsisVerticalIcon size={size} color={color} />} />
    </Toolbar>
  )
}

Vertical Toolbar

Side-mounted vertical toolbar, centered on screen.

import { Toolbar, ToolbarAction } from '@xaui/native/toolbar'
import { AddIcon } from '@xaui/icons/add'
import { SearchIcon } from '@xaui/icons/search'
import { StarIcon } from '@xaui/icons/star'

export function VerticalToolbarExample() {
  return (
    <Toolbar variant="vertical" position="right" themeColor="success">
      <ToolbarAction icon={({ color, size }) => <AddIcon size={size} color={color} />} />
      <ToolbarAction icon={({ color, size }) => <SearchIcon size={size} color={color} />} />
      <ToolbarAction icon={({ color, size }) => <StarIcon size={size} color={color} />} />
    </Toolbar>
  )
}

Visibility and Disabled Action

Control toolbar visibility and disable specific actions.

import { useState } from 'react'
import { Button } from '@xaui/native/button'
import { Toolbar, ToolbarAction } from '@xaui/native/toolbar'
import { ShareIcon } from '@xaui/icons/share'
import { DownloadIcon } from '@xaui/icons/download'
import { TrashIcon } from '@xaui/icons/trash'
import { Column } from '@xaui/native/view'

export function ToolbarStateExample() {
  const [visible, setVisible] = useState(true)

  return (
    <Column gap={10}>
      <Button size="sm" variant="bordered" onPress={() => setVisible(v => !v)}>
        {visible ? 'Hide' : 'Show'} Toolbar
      </Button>
      <Toolbar isVisible={visible} variant="floating" position="bottom">
        <ToolbarAction icon={({ color, size }) => <ShareIcon size={size} color={color} />} />
        <ToolbarAction icon={({ color, size }) => <DownloadIcon size={size} color={color} />} isDisabled />
        <ToolbarAction icon={({ color, size }) => <TrashIcon size={size} color={color} />} />
      </Toolbar>
    </Column>
  )
}

Custom Appearance

Override container and action row styles.

import { Toolbar, ToolbarAction } from '@xaui/native/toolbar'
import { AddIcon } from '@xaui/icons/add'
import { SearchIcon } from '@xaui/icons/search'
import { StarIcon } from '@xaui/icons/star'

export function ToolbarCustomAppearanceExample() {
  return (
    <Toolbar
      variant="floating"
      position="top"
      customAppearance={{
        container: { marginHorizontal: 12 },
        actionsContainer: { gap: 6 },
      }}
      style={{ borderWidth: 1, borderColor: '#e2e8f0' }}
    >
      <ToolbarAction icon={({ color, size }) => <AddIcon size={size} color={color} />} />
      <ToolbarAction icon={({ color, size }) => <SearchIcon size={size} color={color} />} />
      <ToolbarAction icon={({ color, size }) => <StarIcon size={size} color={color} />} />
    </Toolbar>
  )
}