Meta tags:
description=A high-quality, unstyled React toolbar component that groups a set of buttons and controls.;
keywords=React Toolbar,Toolbar Button Group,Action Bar,Button Bar,Command Strip,Headless Toolbar Component,Accessible Toolbar,Popup Trigger Toolbar,Base UI;

Headings (most frequently used words):

toolbar, propshide, statehide, root, using, with, button, link, input, group, separator, usage, guidelines, anatomy, examples, api, reference, menu, tooltip, numberfield, orientationhide, itemmetadatahide,

Text of the page (most frequently used words):
the (118), toolbar (117), #orientation (54), state (54), component (45), disabled (44), type (43), undefined (41), function (39), button (38), element (35), root (35), description (33), classname (32), props (30), name (29), render (28), style (28), select (28), react (27), when (27), data (24), reactelement (24), with (24), boolean (24), that (22), group (22), input (22), separator (21), styles (21), string (20), returns (18), cssproperties (18), default (15), hide (14), true (14), focusable (14), link (13), indicates (12), attribute (12), applied (12), based (12), class (12), present (12), using (12), numberfield (12), menu (12), item (11), css (10), prop (10), tooltip (10), compose (8), renders (8), remains (8), toggle (8), import (8), align (8), export (7), whether (7), false (7), trigger (7), and (7), base (7), from (7), htmlprops (6), accepts (6), allows (6), you (6), replace (6), html (6), different (6), tag (6), another (6), object (6), horizontal (6), table (6), return (6), portal (6), aria (6), label (6), itemindicator (6), itemtext (6), svg (6), focusablewhendisabled (5), left (5), right (5), value (5), div (4), navigation (4), for (4), popup (4), helvetica (4), are (3), defaultvalue (3), set (3), other (3), components (3), controls (3), use (3), popups (3), dialog (3), anatomy (3), guidelines (3), togglegroup (3), format (3), positioner (3), checkicon (3), index (3), field (3), which (2), perpendicular (2), vertical (2), accessible (2), all (2), items (2), groups (2), number (2), native (2), keyboard (2), nativebutton (2), can (2), used (2), end (2), loopfocus (2), container (2), grouping (2), buttons (2), api (2), reference (2), rest (2), popover (2), examples (2), toolbars (2), usage (2), icon (2), caretupdownicon (2), arial (2), edited (2), 51m (2), ago (2), componentprops (2), width (2), height (2), viewbox (2), fill (2), currentcolor (2), display (2), block (2), path (2), module (2), stackblitz (2), modules (2), view (2), provider (2), checkbox (2), toolbarseparatorstate, toolbarseparatorprops, defaults, opposite, separators, screen, readers, toolbargroupstate, toolbargroupprops, several, toggles, toolbarinputstate, toolbarinputprops, union, integrates, toolbarlinkstate, toolbarlinkprops, toolbarbuttonstate, toolbarbuttonprops, replacing, via, rendered, not, example, toolbarrootitemmetadata, itemmetadata, toolbarrootorientation, toolbarrootstate, toolbarrootprops, will, wrap, focus, once, reached, such, menus, increment, decrement, pass, unlike, should, passed, this, applies, alertdialog, provide, integrated, passing, assemble, its, parts, arrow, keys, both, move, text, insertion, cursor, navigate, among, only, one, place, last, inputs, sparingly, ensure, helpful, follow, these, show, code, exampletoolbar, alignment, numerical, currency, percent, sideoffset, href, m11, 10h5l3, 5zm0, 4h5l3, none, stroke, tsx, source, markdown, top, npm, github, userender, mergeprops, direction, csp, utils, toast, tabs, switch, slider, scroll, area, radio, progress, preview, card, otp, new, meter, menubar, form, fieldset, drawer, context, combobox, collapsible, avatar, autocomplete, alert, accordion, llms, txt, typescript, forms, customization, composition, animation, styling, handbook, about, community, releases, accessibility, quick, start, overview, search, skip, contents,

Text of the page (random words):
ms typescript llms txt components accordion alert dialog autocomplete avatar button checkbox checkbox group collapsible combobox context menu dialog drawer field fieldset form input menu menubar meter navigation menu number field otp field new popover preview card progress radio scroll area select separator slider switch tabs toast toggle toggle group toolbar tooltip utils csp provider direction provider mergeprops userender github npm 1 6 0 toolbar top usage guidelines anatomy examples using with menu using with tooltip using with numberfield api reference root button link input group separator toolbar a container for grouping a set of buttons and controls view as markdown view source align left align right helvetica edited 51m ago index tsx index module css css modules stackblitz css modules stackblitz import as react from react import toolbar from base ui react toolbar import togglegroup from base ui react toggle group import toggle from base ui react toggle import select from base ui react select import styles from index module css export default function exampletoolbar return toolbar root classname styles toolbar togglegroup classname styles group aria label alignment toolbar button render toggle aria label align left value align left classname styles button align left toolbar button toolbar button render toggle aria label align right value align right classname styles button align right toolbar button togglegroup toolbar separator classname styles separator toolbar group classname styles group aria label numerical format toolbar button classname styles button aria label format as currency toolbar button toolbar button classname styles button aria label format as percent toolbar button toolbar group toolbar separator classname styles separator select root defaultvalue helvetica toolbar button render select trigger classname styles button select value select icon caretupdownicon select icon toolbar button select portal select positioner classname styles positioner sideoffset 4 select popup classname styles popup select item classname styles item value helvetica select itemindicator classname styles itemindicator checkicon select itemindicator select itemtext classname styles itemtext helvetica select itemtext select item select item classname styles item value arial select itemindicator classname styles itemindicator checkicon select itemindicator select itemtext classname styles itemtext arial select itemtext select item select popup select positioner select portal select root toolbar separator classname styles separator toolbar link classname styles link href edited 51m ago toolbar link toolbar root function caretupdownicon props react componentprops svg return svg width 16 height 16 viewbox 0 0 16 16 fill currentcolor props style display block props style path d m11 10h5l3 3 5zm0 4h5l3 3 5z svg function checkicon props react componentprops svg return svg width 16 height 16 viewbox 0 0 16 16 fill none stroke currentcolor props style display block props style path d m2 5 8 5 4 4 7 9 svg show code usage guidelines to ensure that toolbars are accessible and helpful follow these guidelines use inputs sparingly left and right arrow keys are used to both move the text insertion cursor in an input and to navigate among controls in horizontal toolbars when using an input in a horizontal toolbar use only one and place it as the last element of the toolbar anatomy import the component and assemble its parts anatomy import toolbar from base ui react toolbar toolbar root toolbar button toolbar link toolbar separator toolbar group toolbar button toolbar button toolbar group toolbar input toolbar root examples using with menu all base ui popup components that provide a trigger component can be integrated with a toolbar by passing the trigger to toolbar button with the render prop using popups with toolbar return toolbar root menu root toolbar button render menu trigger menu portal compose the rest of the menu menu portal menu root toolbar root this applies to alertdialog dialog menu popover and select using with tooltip unlike other popups the toolbar item should be passed to the render prop of tooltip trigger using popups with toolbar return toolbar root tooltip root tooltip trigger render toolbar button tooltip portal compose the rest of the tooltip tooltip portal tooltip root toolbar root using with numberfield to use a numberfield in the toolbar pass numberfield input to toolbar input using the render prop using numberfield with toolbar return toolbar root numberfield root numberfield group numberfield decrement toolbar input render numberfield input numberfield increment numberfield group numberfield root toolbar root api reference root a container for grouping a set of controls such as buttons toggle groups or menus renders a div element component props table prop type default loopfocus boolean true name loopfocus description if true using keyboard navigation will wrap focus to the other end of the toolbar once the end is reached type boolean undefined default true disabled boolean name disabled type boolean undefined orientation toolbar root orientation horizontal name orientation description the orientation of the toolbar type toolbar root orientation undefined default horizontal classname string function name classname description css class applied to the element or a function that returns a class based on the component s state type string state toolbar root state string undefined undefined style react cssproperties function name style description style applied to the element or a function that returns a style object based on the component s state type react cssproperties state toolbar root state react cssproperties undefined undefined render reactelement function name render description allows you to replace the component s html element with a different tag or compose it with another component accepts a reactelement or a function that returns the element to render type reactelement props htmlprops state toolbar root state reactelement undefined attribute data orientation indicates the orientation of the toolbar data disabled present when the toolbar is disabled attribute description data orientation indicates the orientation of the toolbar data disabled present when the toolbar is disabled toolbar root props hide re export of root props as toolbarrootprops toolbar root state hide type toolbarrootstate whether the component is disabled disabled boolean the component orientation orientation toolbar root orientation toolbar root orientation hide type toolbarrootorientation horizontal vertical toolbar root itemmetadata hide type toolbarrootitemmetadata disabled boolean focusablewhendisabled boolean button a button that can be used as is or as a trigger for other components renders a button element component props table prop type default focusablewhendisabled boolean true name focusablewhendisabled description when true the item remains focusable when disabled type boolean undefined default true nativebutton boolean true name nativebutton description whether the component renders a native button element when replacing it via the render prop set to false if the rendered element is not a button for example div type boolean undefined default true disabled boolean false name disabled description when true the item is disabled type boolean undefined default false classname string function name classname description css class applied to the element or a function that returns a class based on the component s state type string state toolbar button state string undefined undefined style react cssproperties function name style description style applied to the element or a function that returns a style object based on the component s state type react cssproperties state toolbar button state react cssproperties undefined undefined render reactelement function name render description allows you to replace the component s html element with a different tag or compose it with another component accepts a reactelement or a function that returns the element to render type reactelement props htmlprops state toolbar button state reactelement undefined attribute data orientation indicates the orientation of the toolbar data disabled present when the button is disabled data focusable present when the button remains focusable when disabled attribute description data orientation indicates the orientation of the toolbar data disabled present when the button is disabled data focusable present when the button remains focusable when disabled toolbar button props hide re export of button props as toolbarbuttonprops toolbar button state hide type toolbarbuttonstate whether the component is disabled disabled boolean whether the component remains focusable when disabled focusable boolean the component orientation orientation toolbar root orientation link a link component renders an a element component props table prop type default classname string function name classname description css class applied to the element or a function that returns a class based on the component s state type string state toolbar link state string undefined undefined style react cssproperties function name style description style applied to the element or a function that returns a style object based on the component s state type react cssproperties state toolbar link state react cssproperties undefined undefined render reactelement function name render description allows you to replace the component s html element with a different tag or compose it with another component accepts a reactelement or a function that returns the element to render type reactelement props htmlprops state toolbar link state reactelement undefined attribute data orientation indicates the orientation of the toolbar attribute description data orientation indicates the orientation of the toolbar toolbar link props hide re export of link props as toolbarlinkprops toolbar link state hide type toolbarlinkstate the component orientation orientation toolbar root orientation input a native input element that integrates with toolbar keyboard navigation renders an input element component props table prop type default defaultvalue union name defaultvalue type string number string undefined focusablewhendisabled boolean true name focusablewhendisabled description when true the item remains focusable when disabled type boolean undefined default true disabled boolean false name disabled description when true the item is disabled type boolean undefined default false classname string function name classname description css class applied to the element or a function that returns a class based on the component s state type string state toolbar input state string undefined undefined style react cssproperties function name style description style applied to the element or a function that returns a style object based on the component s state type react cssproperties state toolbar input state react cssproperties undefined undefined render reactelement function name render description allows you to replace the component s html element with a different tag or compose it with another component accepts a reactelement or a function that returns the element to render type reactelement props htmlprops state toolbar input state reactelement undefined attribute data orientation indicates the orientation of the toolbar data disabled present when the input is disabled data focusable present when the input remains focusable when disabled attribute description data orientation indicates the orientation of the toolbar data disabled present when the input is disabled data focusable present when the input remains focusable when disabled toolbar input props hide re export of input props as toolbarinputprops toolbar input state hide type toolbarinputstate whether the component is disabled disabled boolean whether the component remains focusable when disabled focusable boolean the component orientation orientation toolbar root orientation group groups several toolbar items or toggles renders a div element component props table prop type default disabled boolean false name disabled description when true all toolbar items in the group are disabled type boolean undefined default false classname string function name classname description css class applied to the element or a function that returns a class based on the component s state type string state toolbar group state string undefined undefined style react cssproperties function name style description style applied to the element or a function that returns a style object based on the component s state type react cssproperties state toolbar group state react cssproperties undefined undefined render reactelement function name render description allows you to replace the component s html element with a different tag or compose it with another component accepts a reactelement or a function that returns the element to render type reactelement props htmlprops state toolbar group state reactelement undefined attribute data orientation indicates the orientation of the toolbar data disabled present when the group is disabled attribute description data orientation indicates the orientation of the toolbar data disabled present when the group is disabled toolbar group props hide re export of group props as toolbargroupprops toolbar group state hide type toolbargroupstate whether the component is disabled disabled boolean the component orientation orientation toolbar root orientation separator a separator element accessible to screen readers renders a div element component props table prop type default orientation orientation name orientation description the orientation of the separator defaults to the opposite of the toolbar s orientation so a horizontal toolbar renders vertical separators type orientation undefined classname string function name classname description css class applied to the element or a function that returns a class based on the component s state type string state toolbar separator state string undefined undefined style react cssproperties function name style description style applied to the element or a function that returns a style object based on the component s state type react cssproperties state toolbar separator state react cssproperties undefined undefined render reactelement function name render description allows you to replace the component s html element with a different tag or compose it with another component accepts a reactelement or a function that returns the element to render type reactelement props htmlprops state toolbar separator state reactelement undefined attribute data orientation indicates the orientation of the separator which is perpendicular to the toolbar attribute description data orientation indicates the orientation of the separator which is perpendicular to the toolbar toolbar separator props hide re export of separator props as toolbarseparatorpr...