ToolBar

Cancel

3 selected

IMG_1842.jpgToday, 09:42

IMG_1839.jpgYesterday, 18:07

Installation

npx axiom add tool-bar

pnpm dlx axiom add tool-bar

yarn dlx axiom add tool-bar

bun x axiom add tool-bar

Also copies: icon, text and tappable. Installs react-native-safe-area-context.

Colors come from toolBar.{docked,floating} and toolBar.action.{default,selected,destructive,disabled} in the component tokens.

Usage

import { ToolBar } from "@/components/ui/tool-bar";

<ToolBar placement="floating">
	<ToolBar.Action icon="share" label="Share" onPress={share} />
	<ToolBar.Action icon="trash" label="Delete" destructive onPress={remove} />
</ToolBar>;

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Actions and optional separators. Keep the most useful actions visible.
`placement`	`'docked' \| 'floating'`	`'docked'`	Attaches to the bottom edge or renders as an inset capsule over content.
`safeArea`	`boolean`	`true`	Adds the bottom safe-area inset for a docked bar. Floating bars use an inset margin instead.
`justify`	`'start' \| 'center' \| 'between' \| 'around'`	`'around'`	Distributes actions across the available width.
`accessibilityLabel`	`string`	`'Actions'`	Name announced for the toolbar landmark.
`style`	`StyleProp<ViewStyle>`	—	Extra styles for the outer bar.

ToolBar.Action

Prop	Type	Default	Description
`icon`	`IconName \| ReactNode`	—	Action icon. Keep icons consistent with the rest of the app.
`label`	`string`	—	Visible action name in a docked bar and the default accessibility label.
`onPress`	`() => void`	—	Runs the action. Use a confirmation dialog when it cannot be undone.
`disabled`	`boolean`	`false`	Blocks the press and exposes the disabled state.
`destructive`	`boolean`	`false`	Uses the error color for an action such as Delete. It does not add confirmation by itself.
`selected`	`boolean`	`false`	Marks a toggle action such as Favorite or Pin as active.
`showLabel`	`boolean`	`placement === 'docked'`	Controls the visible label. The accessible name stays available when the label is hidden.
`accessibilityLabel`	`string`	`label`	Spoken action name when the visible label is absent or ambiguous.

ToolBar.Separator

Prop	Type	Default	Description
`style`	`StyleProp<ViewStyle>`	—	Extra styles for a short divider between action groups.

Use cases

Selection actions

Show a docked bar only while items are selected. Actions apply to the current selection, and the normal bottom navigation should leave the screen at the same time.

Done

2 selected

Design brief.pdf1.8 MB

Estimate.xlsx46 KB

References.zip12 MB

The bar is static. To show it only while something is selected, render it conditionally and give it an entrance where you render it, here with Reanimated’s layout animations (they follow the system’s Reduce Motion setting):

import Animated, { FadeInDown, FadeOutDown } from "react-native-reanimated";

{selectedIds.length > 0 ? (
	<Animated.View entering={FadeInDown} exiting={FadeOutDown}>
		<ToolBar>
			<ToolBar.Action icon="share" label="Share" onPress={shareSelected} />
			<ToolBar.Action
				icon="download"
				label="Download"
				onPress={downloadSelected}
			/>
			<ToolBar.Action
				icon="trash"
				label="Delete"
				destructive
				onPress={confirmDelete}
			/>
		</ToolBar>
	</Animated.View>
) : null}

Floating actions over media

The floating placement keeps controls close to the content without creating a permanent screen edge. Hide labels only when every icon is familiar.

<ToolBar placement="floating">
	<ToolBar.Action
		icon="share"
		label="Share"
		showLabel={false}
		onPress={share}
	/>
	<ToolBar.Action icon="edit" label="Edit" showLabel={false} onPress={edit} />
	<ToolBar.Action
		icon="heart"
		label="Favorite"
		showLabel={false}
		selected={favorite}
		onPress={toggleFavorite}
	/>
	<ToolBar.Action
		icon="more"
		label="More actions"
		showLabel={false}
		onPress={openMenu}
	/>
</ToolBar>

Editor commands

Toolbars can group local editing commands. Disable actions that do not apply instead of removing them, so the row does not jump as the selection changes.

Note

Done

Monday ideas

Make the empty state useful and keep the next action close to the explanation.

Add a note

<ToolBar justify="between">
	<ToolBar.Action icon="plus" label="Insert" onPress={openInsertMenu} />
	<ToolBar.Action icon="check" label="Checklist" onPress={toggleChecklist} />
	<ToolBar.Action
		icon="arrow-up"
		label="Move"
		disabled={!canMove}
		onPress={moveBlock}
	/>
	<ToolBar.Action icon="more" label="Format" onPress={openFormatting} />
</ToolBar>

Selection mode
BottomTabBar
IconButton
Dialog, for destructive confirmations

On this page