Toolbar
A container for grouping a set of controls, like buttons, toggles or menus.
- Beta
Get Pro
Import#
Toolbar
: The container component.ToolbarButton
: Either a regular or icon button.ToolbarGroup
: Component for grouping buttons.ToolbarToggleGroup
: A set of toggle buttons with on/off state.ToolbarToggleButton
: A button that can be toggled on or off.ToolbarDivider
: A divider component.
import {Toolbar,ToolbarButton,ToolbarGroup,ToolbarToggleGroup,ToolbarToggleButton,} from '@saas-ui/pro'
Usage#
The Toolbar can be used in combination with the Page
component or standalone in other parts of your app that requires a group of controls or actions.
Basic#
<Toolbar><ToolbarToggleGroup spacing="1" defaultValue="left" onChange={console.log}><ToolbarToggleButtonicon={<FiAlignLeft />}label="Align left"value="left"/><ToolbarToggleButtonicon={<FiAlignCenter />}label="Align center"value="center"/><ToolbarToggleButtonicon={<FiAlignRight />}label="Align right"value="right"/></ToolbarToggleGroup><ToolbarDivider /><ToolbarToggleGroup spacing="1" type="checkbox"><ToolbarToggleButton icon={<FiBold />} label="Bold" value="bold" /><ToolbarToggleButton icon={<FiItalic />} label="Italic" value="italic" /><ToolbarToggleButtonicon={<FiUnderline />}label="Underline"value="underline"/></ToolbarToggleGroup><ToolbarDivider /><ToolbarButton icon={<FiLink />} label="Create link" /><Spacer /><ToolbarButton label="Save" variant="solid" colorScheme="primary" /></Toolbar>
Sizes#
Toolbar supports the following sizes, xs
, sm
, md
, lg
.
<Toolbar size="xs"><ToolbarToggleGroup spacing="1" defaultValue="left" onChange={console.log}><ToolbarToggleButtonicon={<FiAlignLeft />}label="Align left"value="left"/><ToolbarToggleButtonicon={<FiAlignCenter />}label="Align center"value="center"/><ToolbarToggleButtonicon={<FiAlignRight />}label="Align right"value="right"/></ToolbarToggleGroup><ToolbarDivider /><ToolbarToggleGroup spacing="1" type="checkbox"><ToolbarToggleButton icon={<FiBold />} label="Bold" value="bold" /><ToolbarToggleButton icon={<FiItalic />} label="Italic" value="italic" /><ToolbarToggleButtonicon={<FiUnderline />}label="Underline"value="underline"/></ToolbarToggleGroup><ToolbarDivider /><ToolbarButton icon={<FiLink />} label="Create link" /><Spacer /><ToolbarButton label="Save" variant="solid" colorScheme="primary" /></Toolbar>
Props#
The Toolbar
component and all sub components accept all Box
properties.
Toolbar Props#
Was this helpful?