Toolbar API

API documentation for Toolbar component

ToolbarRoot#

Props#

Defines valid properties in Toolbar component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: ToolbarRootInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: ToolbarRootInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<ToolbarRootPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: ToolbarRootInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of Toolbar component.

name	type	default	description
root	ToolbarRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.
start	ToolbarRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the start's DOM element.
center	ToolbarRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the center's DOM element.
end	ToolbarRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the end's DOM element.

Types#

Instance

Instance of Toolbar component.

values
ComponentInstance<ToolbarRootProps, ToolbarRootState, ToolbarRootExposes>

ToolbarStart#

Props#

Defines valid properties in ToolbarStart component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: ToolbarStartInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: ToolbarStartInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<ToolbarStartPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: ToolbarStartInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by ToolbarStart component.

name	type	default	description
toolbar	ToolbarRootInstance	null	The Toolbar component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of ToolbarStart component.

name	type	default	description
root	ToolbarStartPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of ToolbarStart component.

values
ComponentInstance<ToolbarStartProps, ToolbarStartState, ToolbarStartExposes>

ToolbarCenter#

Props#

Defines valid properties in ToolbarCenter component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: ToolbarCenterInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: ToolbarCenterInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<ToolbarCenterPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: ToolbarCenterInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by ToolbarCenter component.

name	type	default	description
toolbar	ToolbarRootInstance	null	The Toolbar component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of ToolbarCenter component.

name	type	default	description
root	ToolbarCenterPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of ToolbarCenter component.

values
ComponentInstance<ToolbarCenterProps, ToolbarCenterState, ToolbarCenterExposes>

ToolbarEnd#

Props#

Defines valid properties in ToolbarEnd component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: ToolbarEndInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: ToolbarEndInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<ToolbarEndPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: ToolbarEndInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by ToolbarEnd component.

name	type	default	description
toolbar	ToolbarRootInstance	null	The Toolbar component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of ToolbarEnd component.

name	type	default	description
root	ToolbarEndPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of ToolbarEnd component.

values
ComponentInstance<ToolbarEndProps, ToolbarEndState, ToolbarEndExposes>

useToolbar#

Types#

Instance

Instance of useToolbar headless.

values
HeadlessInstance<useToolbarProps, useToolbarState, useToolbarExposes>