MatrixUI Logo

Toolbar

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

Preview

Installation

npm install @matrix-ui/components

Usage

import {
  Toolbar,
  ToolbarButton,
  ToolbarSeparator,
  ToolbarToggleGroup,
  ToolbarToggleItem,
  ToolbarLink,
} from '@matrix-ui/components'

<Toolbar>
  <ToolbarButton>Action</ToolbarButton>
  <ToolbarSeparator />
  <ToolbarToggleGroup type="single">
    <ToolbarToggleItem value="option1">Option 1</ToolbarToggleItem>
    <ToolbarToggleItem value="option2">Option 2</ToolbarToggleItem>
  </ToolbarToggleGroup>
  <ToolbarLink href="#">Link</ToolbarLink>
</Toolbar>

Examples

With Button Variants

Single Selection Toggle Group

Multiple Selection Toggle Group