npm install @radix-ui/react-toolbar

import { Toolbar } from "radix-ui";

export default () => (
	<Toolbar.Root>
		<Toolbar.Button />
		<Toolbar.Separator />
		<Toolbar.Link />
		<Toolbar.ToggleGroup>
			<Toolbar.ToggleItem />
		</Toolbar.ToggleGroup>
	</Toolbar.Root>
);

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
	{
		name: "orientation",
		required: false,
		type: '"horizontal" | "vertical" | undefined',
		typeSimple: "enum",
		default: '"horizontal"',
		description: "The orientation of the toolbar.",
	},
	{
		name: "dir",
		required: false,
		type: '"ltr" | "rtl"',
		typeSimple: "enum",
		description: (
			<span>
				The reading direction of the toolbar. If omitted, inherits globally
				from <Code>DirectionProvider</Code> or assumes LTR (left-to-right)
				reading mode.
			</span>
		),
	},
	{
		name: "loop",
		required: false,
		type: "boolean",
		default: "true",
		description: (
			<span>
				When <Code>true</Code>, keyboard navigation will loop from last tab to
				first, and vice versa.
			</span>
		),
	},
]}

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
]}

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
]}

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
	{
		name: "type",
		required: true,
		type: '"single" | "multiple"',
		typeSimple: "enum",
		description: (
			<span>
				Determines whether a single or multiple items can be pressed at a
				time.
			</span>
		),
	},
	{
		name: "value",
		required: false,
		type: "string",
		description: (
			<span>
				The controlled value of the pressed item when <Code>type</Code> is{" "}
				<Code>"single"</Code>. Must be used in conjunction with{" "}
				<Code>onValueChange</Code>.
			</span>
		),
	},
	{
		name: "defaultValue",
		required: false,
		type: "string",
		description: (
			<span>
				The value of the item to show as pressed when initially rendered and{" "}
				<Code>type</Code> is <Code>"single"</Code>. Use when you do not need
				to control the state of the items.
			</span>
		),
	},
	{
		name: "onValueChange",
		required: false,
		type: "(value: string) => void",
		typeSimple: "function",
		description: (
			<span>
				Event handler called when the pressed state of an item changes and{" "}
				<Code>type</Code> is <Code>"single"</Code>.
			</span>
		),
	},
	{
		name: "value",
		required: false,
		default: "[]",
		type: "string[]",
		description: (
			<span>
				The controlled value of the pressed items when <Code>type</Code> is{" "}
				<Code>"multiple"</Code>. Must be used in conjunction with{" "}
				<Code>onValueChange</Code>.
			</span>
		),
	},
	{
		name: "defaultValue",
		required: false,
		default: "[]",
		type: "string[]",
		description: (
			<span>
				The values of the items to show as pressed when initially rendered and{" "}
				<Code>type</Code> is <Code>"multiple"</Code>. Use when you do not need
				to control the state of the items.
			</span>
		),
	},
	{
		name: "onValueChange",
		required: false,
		type: "(value: string[]) => void",
		typeSimple: "function",
		description: (
			<span>
				Event handler called when the pressed state of an item changes and{" "}
				<Code>type</Code> is <Code>"multiple"</Code>.
			</span>
		),
	},
	{
		name: "disabled",
		required: false,
		type: "boolean",
		default: "false",
		description: (
			<span>
				When <Code>true</Code>, prevents the user from interacting with the
				toggle group and all its items.
			</span>
		),
	},
]}

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
	{
		name: "value",
		required: true,
		type: "string",
		description: "A unique value for the item.",
	},
	{
		name: "disabled",
		type: "boolean",
		description: (
			<span>
				When <Code>true</Code>, prevents the user from interacting with the
				item.
			</span>
		),
	},
]}

				Read our <a href="../guides/composition">Composition</a> guide for
				more details.
			</>
		),
	},
]}

import { Toolbar, DropdownMenu } from "radix-ui";

export default () => (
	<Toolbar.Root>
		<Toolbar.Button>Action 1</Toolbar.Button>
		<Toolbar.Separator />
		<DropdownMenu.Root>
			<Toolbar.Button __asChild__>
				<DropdownMenu.Trigger>Trigger</DropdownMenu.Trigger>
			</Toolbar.Button>
			<DropdownMenu.Content>…</DropdownMenu.Content>
		</DropdownMenu.Root>
	</Toolbar.Root>
);