Toolbar

A container for grouping a set of controls, such as buttons, toggle groups or dropdown menus.

Install the component from your command line.

npm install @radix-ui/react-toolbar

Import the component.

import * as Toolbar from '@radix-ui/react-toolbar';
export default () => (
<Toolbar.Root>
<Toolbar.Button />
<Toolbar.Separator />
<Toolbar.Link />
<Toolbar.ToggleGroup>
<Toolbar.ToggleItem />
</Toolbar.ToggleGroup>
</Toolbar.Root>
);

Create your styled toolbar component from the primitive parts.

import { styled } from 'path-to/stitches.config';
import * as Toolbar from '@radix-ui/react-toolbar';
const StyledToolbar = styled(Toolbar.Root, {
display: 'flex',
});
const itemStyles = {
appearance: 'none',
backgroundColor: 'transparent',
border: 'none',
padding: '5px 10px',
margin: '0 1px',
boxShadow: 'inset 0 0 0 1px gainsboro',
overflow: 'hidden',
borderRadius: 3,
fontSize: 13,
'&:focus': {
outline: 'none',
boxShadow: 'inset 0 0 0 1px dodgerblue, 0 0 0 1px dodgerblue',
},
};
const StyledButton = styled(Toolbar.Button, itemStyles);
const StyledLink = styled(Toolbar.Link, {
...itemStyles,
display: 'inline-flex',
justifyContent: 'center',
alignItems: 'center',
});
const StyledSeparator = styled(Toolbar.Separator, {
width: 1,
margin: 5,
backgroundColor: 'gainsboro',
});
const StyledToggleItem = styled(Toolbar.ToggleItem, {
...itemStyles,
'&[data-state=on]': {
backgroundColor: 'gainsboro',
},
});
export default () => (
<StyledToolbar>
<StyledButton>Action 1</StyledButton>
<StyledButton>Action 2</StyledButton>
<StyledSeparator />
<StyledLink href="https://modulz.app" target="_blank">
Link
</StyledLink>
<StyledSeparator />
<Toolbar.ToggleGroup type="single" defaultValue="center">
<StyledToggleItem value="left">Left</StyledToggleItem>
<StyledToggleItem value="center">Center</StyledToggleItem>
<StyledToggleItem value="right">Right</StyledToggleItem>
</Toolbar.ToggleGroup>
</StyledToolbar>
);

Contains all the toolbar component parts.

PropTypeDefault
asenumdiv
orientationenum"horizontal"
direnum"ltr"
loopbooleantrue

A button item.

PropTypeDefault
asenumbutton

A link item.

PropTypeDefault
asenuma

A set of two-state buttons that can be toggled on or off.

PropTypeDefault
asenumdiv
type*enumNo default value
valuestringNo default value
defaultValuestringNo default value
onValueChangefunctionNo default value
valuestring[][]
defaultValuestring[][]
onValueChangefunctionNo default value
disabledbooleanfalse

An item in the group.

PropTypeDefault
asenumbutton
value*stringNo default value
disabledbooleanNo default value

Used to visually separate items in the toolbar.

PropTypeDefault
asenumdiv

All our primitives which expose a Trigger part, such as Dialog, AlertDialog, Popover, DropdownMenu can be composed within a toolbar by using the as prop.

Here is an example using our DropdownMenu primitive.

import { styled } from 'path-to/stitches.config';
import * as Toolbar from '@radix-ui/react-toolbar';
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
const StyledToolbar = styled(Toolbar.Root, {
display: 'flex',
});
const itemStyles = {
appearance: 'none',
backgroundColor: 'transparent',
color: 'black',
border: 'none',
padding: '5px 10px',
margin: '0 1px',
boxShadow: 'inset 0 0 0 1px gainsboro',
overflow: 'hidden',
borderRadius: 3,
fontSize: 13,
'&:focus': {
outline: 'none',
boxShadow: 'inset 0 0 0 1px dodgerblue, 0 0 0 1px dodgerblue',
},
};
const StyledButton = styled(Toolbar.Button, itemStyles);
const StyledSeparator = styled(Toolbar.Separator, {
width: 1,
margin: 5,
backgroundColor: 'gainsboro',
});
const StyledMenuContent = styled(DropdownMenu.Content, {
minWidth: 130,
backgroundColor: 'white',
borderRadius: 6,
padding: 5,
boxShadow: '0px 5px 15px -5px hsla(206,22%,7%,.15)',
});
const StyledMenuTrigger = styled(DropdownMenu.Trigger, itemStyles);
const StyledMenuItem = styled(DropdownMenu.Item, {
fontSize: 13,
padding: '5px 10px',
borderRadius: 3,
cursor: 'default',
'&:focus': {
outline: 'none',
backgroundColor: 'dodgerblue',
color: 'white',
},
});
const StyledArrow = styled(DropdownMenu.Arrow, {
fill: 'white',
});
export default () => (
<StyledToolbar>
<StyledButton>Action 1</StyledButton>
<StyledButton>Action 2</StyledButton>
<StyledSeparator />
<DropdownMenu.Root>
<Toolbar.Button as={StyledMenuTrigger}>Trigger</Toolbar.Button>
Trigger
</Toolbar.Button>
<StyledMenuContent>
<StyledMenuItem onSelect={() => console.log('cut')}>
Cut
</StyledMenuItem>
<StyledMenuItem onSelect={() => console.log('copy')}>
Copy
</StyledMenuItem>
<StyledMenuItem onSelect={() => console.log('paste')}>
Paste
</StyledMenuItem>
<StyledArrow />
</StyledMenuContent>
</DropdownMenu.Root>
</StyledToolbar>
);

Uses roving tabindex to manage focus movement among items.

KeyDescription
TabMoves focus to the first item in the group.
SpaceActivates/deactivates the item.
EnterActivates/deactivates the item.
ArrowDownMoves focus to the next item depending on orientation.
ArrowRightMoves focus to the next item depending on orientation.
ArrowUpMoves focus to the previous item depending on orientation.
ArrowLeftMoves focus to the previous item depending on orientation.
HomeMoves focus to the first item.
EndMoves focus to the last item.