@radix-ui/react-toolbar

What is @radix-ui/react-toolbar?

@radix-ui/react-toolbar is a React component library that provides accessible and customizable toolbar components. It allows developers to create toolbars with various interactive elements such as buttons, toggle groups, and separators, ensuring a consistent and accessible user experience.

What are @radix-ui/react-toolbar's main functionalities?

Toolbar

The Toolbar component is the main container for toolbar items. It can contain various interactive elements like buttons. This example demonstrates a simple toolbar with two buttons.

import { Toolbar, ToolbarButton } from '@radix-ui/react-toolbar';

function MyToolbar() {
  return (
    <Toolbar>
      <ToolbarButton>Button 1</ToolbarButton>
      <ToolbarButton>Button 2</ToolbarButton>
    </Toolbar>
  );
}

ToolbarButton

The ToolbarButton component is used to create buttons within the toolbar. This example shows a single button labeled 'Click Me'.

import { ToolbarButton } from '@radix-ui/react-toolbar';

function MyButton() {
  return (
    <ToolbarButton>Click Me</ToolbarButton>
  );
}

ToolbarSeparator

The ToolbarSeparator component is used to visually separate groups of toolbar items. This example demonstrates a toolbar with two buttons separated by a separator.

import { Toolbar, ToolbarButton, ToolbarSeparator } from '@radix-ui/react-toolbar';

function MyToolbar() {
  return (
    <Toolbar>
      <ToolbarButton>Button 1</ToolbarButton>
      <ToolbarSeparator />
      <ToolbarButton>Button 2</ToolbarButton>
    </Toolbar>
  );
}

ToolbarToggleGroup

The ToolbarToggleGroup component is used to group toggle items, allowing for single or multiple selection. This example shows a toggle group with 'Bold' and 'Italic' options, with 'Bold' selected by default.

import { Toolbar, ToolbarToggleGroup, ToolbarToggleItem } from '@radix-ui/react-toolbar';

function MyToolbar() {
  return (
    <Toolbar>
      <ToolbarToggleGroup type="single" defaultValue="bold">
        <ToolbarToggleItem value="bold">Bold</ToolbarToggleItem>
        <ToolbarToggleItem value="italic">Italic</ToolbarToggleItem>
      </ToolbarToggleGroup>
    </Toolbar>
  );
}

Other packages similar to @radix-ui/react-toolbar

material-ui

Material-UI is a popular React component library that implements Google's Material Design. It offers a wide range of components, including toolbars, with a focus on design consistency and accessibility. Compared to @radix-ui/react-toolbar, Material-UI provides a more comprehensive set of components and theming capabilities.

react-bootstrap

React-Bootstrap is a React implementation of the popular Bootstrap framework. It provides a set of accessible and customizable components, including toolbars. React-Bootstrap is known for its ease of use and integration with the Bootstrap ecosystem, making it a good alternative to @radix-ui/react-toolbar for those familiar with Bootstrap.

chakra-ui

Chakra UI is a modern React component library that focuses on simplicity and accessibility. It offers a range of components, including toolbars, with a strong emphasis on composability and theming. Chakra UI is similar to @radix-ui/react-toolbar in its focus on accessibility but provides a broader set of components and customization options.

README

react-toolbar

Installation

$ yarn add @radix-ui/react-toolbar
# or
$ npm install @radix-ui/react-toolbar

Usage

View docs here.