Toolbar

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import {
  Toolbar,
  ToolbarItem,
  ToolbarSeparator,
  useToolbarState,
} from "ariakit/toolbar";
import { bold, italic, redo, underline, undo } from "./icons";
import "./style.css";

export default function Example() {
  const toolbar = useToolbarState();
  return (
    <Toolbar state={toolbar} className="toolbar">
      <ToolbarItem className="button">
        {undo}
        Undo
      </ToolbarItem>
      <ToolbarItem className="button" disabled>
        {redo}
        Redo
      </ToolbarItem>
      <ToolbarSeparator className="separator" />
      <ToolbarItem className="button">
        {bold}
        Bold
      </ToolbarItem>
      <ToolbarItem className="button">
        {italic}
        Italic
      </ToolbarItem>
      <ToolbarItem className="button">
        {underline}
        Underline
      </ToolbarItem>
    </Toolbar>
  );
}