Toolbar · Glowup

Glowup

NAVIGATION · 78 / 89

Toolbar

Toolbar — a Material You navigation component for React Native and web.

󱀫

packages/ui/src/components/Toolbar.tsx

Live demo

󰄜

360

󰓶

720

󰍹

Full

Properties

4 controls

Variant

Color

Orientation

With FAB

Usage

Toolbar.tsx

Variants

The states and shapes this component is meant to be used in.

Docked

Floating

Floating, vibrant, with FAB

Vibrant sits on primaryContainer.

Floating, vertical

API reference

Generated from the library's TypeScript, so it cannot drift from the implementation.

Props

9 on ToolbarProps

Filter props

󰍉

children

required

React.ReactNode

The actions: `IconButton`s, a `Button`, a `SplitButton`.

accessibilityLabel

string

Names the toolbar for assistive tech.

color

"standard" | "vibrant"

default: "standard"

Floating only. `"standard"` is `surfaceContainer`; `"vibrant"` is `primaryContainer` — give its actions `onPrimaryContainer` content. Defaults to `"standard"`.

fab

React.ReactNode

Floating only: a FAB beside the toolbar, as M3 pairs them.

orientation

"horizontal" | "vertical"

default: "horizontal"

Floating only. Defaults to `"horizontal"`.

safeArea

boolean

default: true

Docked only: pads the bottom safe-area inset. Defaults to `true`.

style

StyleProp<ViewStyle>

testID

string

variant

"docked" | "floating"

default: "docked"

`"docked"` spans the width of the screen's bottom edge (it replaces the bottom app bar); `"floating"` is a pill that floats over the content. Defaults to `"docked"`.