Generate docs

docs/reference/generated/toolbar-group.json

@@ -1,6 +1,6 @@
 {
   "name": "ToolbarGroup",
-  "description": "",
+  "description": "Groups several toolbar items or toggles.\nRenders a `<div>` element.",
   "props": {
     "disabled": {
       "type": "boolean",

docs/reference/generated/toolbar-link.json

@@ -0,0 +1,16 @@
+{
+  "name": "ToolbarLink",
+  "description": "A link component.\nRenders a `<a>` element.",
+  "props": {
+    "className": {
+      "type": "string | (state) => string",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+    }
+  },
+  "dataAttributes": {},
+  "cssVariables": {}
+}

docs/reference/generated/toolbar-root.json

@@ -2,6 +2,11 @@
   "name": "ToolbarRoot",
   "description": "A container for grouping a set of controls, such as buttons, toggle groups, or menus.\nRenders a `<div>` element.",
   "props": {
+    "cols": {
+      "type": "number",
+      "default": "1",
+      "description": "The number of columns. When greater than 1, the toolbar is arranged into\na grid."
+    },
     "loop": {
       "type": "boolean",
       "default": "true",
@@ -10,7 +15,7 @@
     "orientation": {
       "type": "'horizontal' | 'vertical'",
       "default": "'horizontal'",
-      "description": "The component orientation (layout flow direction)."
+      "description": "The orientation of the toolbar."
     },
     "className": {
       "type": "string | (state) => string",

docs/src/app/(public)/(content)/react/components/toolbar/page.mdx

@@ -0,0 +1,27 @@
+# Toolbar
+
+<Subtitle>A container for grouping a set of buttons and controls.</Subtitle>
+<Meta
+  name="description"
+  content="A high-quality, unstyled React toolbar component that grouping a set of buttons and controls."
+/>
+
+## API reference
+
+Import the component and assemble its parts:
+
+```jsx title="Anatomy"
+import { Toolbar } from '@base-ui-components/react/toolbar';
+
+<Toolbar.Root>
+  <Toolbar.Button />
+  <Toolbar.Link />
+  <Toolbar.Separator />
+  <Toolbar.Group>
+    <Toolbar.Button />
+    <Toolbar.Button />
+  <Toolbar.Group />
+</Toolbar.Root>;
+```
+
+<Reference component="Toolbar" parts="Root, Button, Link, Group, Separator" />

docs/src/nav.ts

@@ -140,6 +140,10 @@ export const nav = [
         label: 'Toggle Group',
         href: '/react/components/toggle-group',
       },
+      {
+        label: 'Toolbar',
+        href: '/react/components/toolbar',
+      },
       {
         label: 'Tooltip',
         href: '/react/components/tooltip',

packages/react/src/toolbar/link/ToolbarLink.tsx

@@ -11,7 +11,12 @@ import { useToolbarRootContext } from '../root/ToolbarRootContext';
 const TOOLBAR_LINK_METADATA = {
   focusableWhenDisabled: true,
 };
-
+/**
+ * A link component.
+ * Renders a `<a>` element.
+ *
+ * Documentation: [Base UI Toolbar](https://base-ui.com/react/components/toolbar)
+ */
 const ToolbarLink = React.forwardRef(function ToolbarLink(
   props: ToolbarLink.Props,
   forwardedRef: React.ForwardedRef<HTMLAnchorElement>,