Radix homepageRadix Homepage
PrimitivesAlpha

Toolbar

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

import React from 'react';
import { styled } from '@stitches/react';
import { violet, blackA, mauve } from '@radix-ui/colors';
import { StrikethroughIcon, TextAlignLeftIcon, TextAlignCenterIcon, TextAlignRightIcon, FontBoldIcon, FontItalicIcon, } from '@radix-ui/react-icons';
import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
const StyledToolbar = styled(ToolbarPrimitive.Root, {
display: 'flex',
padding: 10,
width: '100%',
minWidth: 'max-content',
borderRadius: 6,
backgroundColor: 'white',
boxShadow: `0 2px 10px ${blackA.blackA7}`,
});
const itemStyles = {
all: 'unset',
flex: '0 0 auto',
color: mauve.mauve11,
height: 25,
padding: '0 5px',
borderRadius: 4,
display: 'inline-flex',
fontSize: 13,
lineHeight: 1,
alignItems: 'center',
justifyContent: 'center',
'&:hover': { backgroundColor: violet.violet3, color: violet.violet11 },
'&:focus': { position: 'relative', boxShadow: `0 0 0 2px ${violet.violet7}` },
};
const StyledButton = styled(
ToolbarPrimitive.Button,
{
...itemStyles,
paddingLeft: 10,
paddingRight: 10,
color: 'white',
backgroundColor: violet.violet9,
},
{ '&:hover': { color: 'white', backgroundColor: violet.violet10 } }
);
const StyledLink = styled(
ToolbarPrimitive.Link,
{
...itemStyles,
backgroundColor: 'transparent',
color: mauve.mauve11,
display: 'inline-flex',
justifyContent: 'center',
alignItems: 'center',
},
{ '&:hover': { backgroundColor: 'transparent', cursor: 'pointer' } }
);
const StyledSeparator = styled(ToolbarPrimitive.Separator, {
width: 1,
backgroundColor: mauve.mauve6,
margin: '0 10px',
});
const StyledToggleGroup = styled(ToolbarPrimitive.ToggleGroup, {
display: 'inline-flex',
borderRadius: 4,
});
const StyledToggleItem = styled(ToolbarPrimitive.ToggleItem, {
...itemStyles,
boxShadow: 0,
backgroundColor: 'white',
marginLeft: 2,
'&:first-child': { marginLeft: 0 },
'&[data-state=on]': { backgroundColor: violet.violet5, color: violet.violet11 },
});
// Exports
export const Toolbar = StyledToolbar;
export const ToolbarButton = StyledButton;
export const ToolbarSeparator = StyledSeparator;
export const ToolbarLink = StyledLink;
export const ToolbarToggleGroup = StyledToggleGroup;
export const ToolbarToggleItem = StyledToggleItem;
const ToolbarDemo = () => (
<Toolbar aria-label="Formatting options">
<ToolbarToggleGroup type="multiple" aria-label="Text formatting">
<ToolbarToggleItem value="bold" aria-label="Bold">
<FontBoldIcon />
</ToolbarToggleItem>
<ToolbarToggleItem value="italic" aria-label="Italic">
<FontItalicIcon />
</ToolbarToggleItem>
<ToolbarToggleItem value="strikethrough" aria-label="Strike through">
<StrikethroughIcon />
</ToolbarToggleItem>
</ToolbarToggleGroup>
<ToolbarSeparator />
<ToolbarToggleGroup type="single" defaultValue="center" aria-label="Text alignment">
<ToolbarToggleItem value="left" aria-label="Left aligned">
<TextAlignLeftIcon />
</ToolbarToggleItem>
<ToolbarToggleItem value="center" aria-label="Center aligned">
<TextAlignCenterIcon />
</ToolbarToggleItem>
<ToolbarToggleItem value="right" aria-label="Right aligned">
<TextAlignRightIcon />
</ToolbarToggleItem>
</ToolbarToggleGroup>
<ToolbarSeparator />
<ToolbarLink href="#" target="_blank" css={{ marginRight: 10 }}>
Edited 2 hours ago
</ToolbarLink>
<ToolbarButton css={{ marginLeft: 'auto' }}>Share</ToolbarButton>
</Toolbar>
);
export default ToolbarDemo;

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>
);

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 * as Toolbar from '@radix-ui/react-toolbar';
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
export default () => (
<Toolbar.Root>
<Toolbar.Button>Action 1</Toolbar.Button>
<Toolbar.Separator />
<DropdownMenu.Root>
<Toolbar.Button as={DropdownMenu.Trigger}>Trigger</Toolbar.Button>
<DropdownMenu.Content></DropdownMenu.Content>
</DropdownMenu.Root>
</Toolbar.Root>
);

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.