Toolbar

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

  • Beta

  • Buy Pro

  • 0.41.2 (latest)

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/react'

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#

import { Spacer } from '@chakra-ui/react'
import { FiAlignLeft, FiAlignCenter, FiAlignRight } from 'react-icons/fi'
import { FiBold, FiItalic, FiUnderline, FiLink } from 'react-icons/fi'
import {
  Toolbar,
  ToolbarButton,
  ToolbarDivider,
  ToolbarToggleGroup,
  ToolbarToggleButton,
} from '@saas-ui-pro/react'


export default function BasicToolbar() {
  return (
    <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.

import { Spacer } from '@chakra-ui/react'
import { FiAlignLeft, FiAlignCenter, FiAlignRight } from 'react-icons/fi'
import { FiBold, FiItalic, FiUnderline, FiLink } from 'react-icons/fi'
import {
  Toolbar,
  ToolbarButton,
  ToolbarDivider,
  ToolbarToggleGroup,
  ToolbarToggleButton,
} from '@saas-ui-pro/react'


export default function Sizes() {
  return (
    <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>
  )
}

Was this helpful?