"use client"

import * as React from "react"
import {
  TextBold,
  TextItalic,
  TextUnderline,
  TextalignCenter,
  TextalignLeft,
  TextalignRight,
} from "iconsax-react"

import { Toggle } from "@/registry/ui/toggle/toggle"
import { ToggleGroup } from "@/registry/ui/toggle-group/toggle-group"
import {
  Toolbar,
  ToolbarButton,
  ToolbarGroup,
  ToolbarLink,
  ToolbarSeparator,
} from "@/registry/ui/toolbar/toolbar"

export default function ToolbarBasicDemo() {
  return (
    <Toolbar aria-label="Transmission editor">
      <ToolbarGroup aria-label="Formatting">
        <ToolbarButton render={<Toggle aria-label="Bold" defaultPressed />}>
          <TextBold color="currentColor" />
        </ToolbarButton>
        <ToolbarButton render={<Toggle aria-label="Italic" />}>
          <TextItalic color="currentColor" />
        </ToolbarButton>
        <ToolbarButton render={<Toggle aria-label="Underline" />}>
          <TextUnderline color="currentColor" />
        </ToolbarButton>
      </ToolbarGroup>
      <ToolbarSeparator />
      <ToggleGroup
        defaultValue={["left"]}
        aria-label="Alignment"
        className="border-0 bg-transparent p-0 backdrop-blur-none"
      >
        <ToolbarButton render={<Toggle value="left" aria-label="Align left" />}>
          <TextalignLeft color="currentColor" />
        </ToolbarButton>
        <ToolbarButton
          render={<Toggle value="center" aria-label="Align center" />}
        >
          <TextalignCenter color="currentColor" />
        </ToolbarButton>
        <ToolbarButton
          render={<Toggle value="right" aria-label="Align right" />}
        >
          <TextalignRight color="currentColor" />
        </ToolbarButton>
      </ToggleGroup>
      <ToolbarSeparator />
      <ToolbarLink href="#">Last burst 05:42</ToolbarLink>
    </Toolbar>
  )
}
prop	type	default
orientation	horizontal \| vertical	horizontal
disabled	boolean	false
loopFocus	boolean	true
Draw

Playground

Examples

Props
