Toolbar

A container for grouping a set of controls, like buttons, toggles or menus.

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}>
    <ToolbarToggleButton
      icon={<FiAlignLeft />}
      label="Align left"
      value="left"
    />
    <ToolbarToggleButton
      icon={<FiAlignCenter />}
      label="Align center"
      value="center"
    />
    <ToolbarToggleButton
      icon={<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" />
    <ToolbarToggleButton
      icon={<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}>
    <ToolbarToggleButton
      icon={<FiAlignLeft />}
      label="Align left"
      value="left"
    />
    <ToolbarToggleButton
      icon={<FiAlignCenter />}
      label="Align center"
      value="center"
    />
    <ToolbarToggleButton
      icon={<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" />
    <ToolbarToggleButton
      icon={<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?