SpeedDial API

API documentation for SpeedDial component

SpeedDialRoot#

Props#

Defines valid properties in SpeedDial 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?: SpeedDialRootInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: SpeedDialRootInstance) => 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<SpeedDialRootPassThrough>	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: SpeedDialRootInstance) => ReactNode)	null	The children to render.
disabled	boolean	false	Whether the component is disabled.
onVisibleChange	(event: SpeedDialRootVisibleChangeEvent) => void	null	Callback fired when the speeddial's visibility changes.
visible	boolean	null	Whether the speeddial is visible or not.
defaultVisible	boolean	null	Whether the speeddial is visible or not.
direction	"right" \| "left" \| "up" \| "down" \| "up-left" \| "up-right" \| "down-left" \| "down-right"	up	Specifies the opening direction of actions.
transitionDelay	number	30	Transition delay step for each action item.
type	"circle" \| "linear" \| "semi-circle" \| "quarter-circle"	linear	Specifies the opening type of actions.
radius	number	0	Radius for *circle types.
hideOnClickOutside	boolean	true	Whether the actions close when clicked outside.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Defines valid state in SpeedDial component.

name	type	default	description
visible	boolean	null	Visible state of the component.
focusedOptionIndex	string \| number	null	Current focused option index.

Exposes#

Defines the methods and properties exposed by SpeedDial component.

name	type	default	description
state	useSpeedDialState	null	The state of the useSpeedDial.
listRef	RefObject<HTMLUListElement>	null	Reference to the currently list element.
registerItem	() => number	null	Registers a new item and returns its index.
getItemStyle	(index: number) => CSSProperties	null	Handler for item's style
onBlur	(event: FocusEvent<HTMLElement>) => void	null	Handler for blur event.
onKeyDown	(event: KeyboardEvent) => void	null	Handler for keydown events.
onTriggerClick	() => void	null	Handler for click event.
onTriggerKeyDown	(event: KeyboardEvent) => void	null	Handler for keydown events on toggler.
onItemClick	(e: KeyboardEvent<Element> \| MouseEvent<Element, MouseEvent>) => void	null	Handler for click event on items.
onItemKeyDown	(e: KeyboardEvent) => void	null	Handler for keydown event on items.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of SpeedDial component.

name	type	default	description
root	SpeedDialRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.
button	SpeedDialRootPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the button's DOM element.
list	SpeedDialRootPassThroughType<HTMLAttributes<HTMLUListElement>>	null	Used to pass attributes to the list's DOM element.
item	SpeedDialRootPassThroughType<HTMLAttributes<HTMLLIElement>>	null	Used to pass attributes to the item's DOM element.
action	SpeedDialRootPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the action's DOM element.

Types#

Instance

Instance of SpeedDial component.

values
ComponentInstance<SpeedDialRootProps, SpeedDialRootState, SpeedDialRootExposes>

SpeedDialTrigger#

Props#

Defines valid properties in SpeedDialTrigger 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?: SpeedDialTriggerInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: SpeedDialTriggerInstance) => 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<SpeedDialTriggerPassThrough>	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: SpeedDialTriggerInstance) => ReactNode)	null	The children to render.
iconOnly	boolean	true	Whether to show the SpeedDialTrigger with a borderless style.
rounded	boolean	true	Whether to show the SpeedDialTrigger with a rounded style.
[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 SpeedDialTrigger component.

name	type	default	description
speeddial	SpeedDialRootInstance	null	Instance of the SpeedDial component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of SpeedDialTrigger component.

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

Types#

Instance

Instance of SpeedDialTrigger component.

values
ComponentInstance<SpeedDialTriggerProps, SpeedDialTriggerState, SpeedDialTriggerExposes>

SpeedDialList#

Props#

Defines valid properties in SpeedDialList 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?: SpeedDialListInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: SpeedDialListInstance) => 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<SpeedDialListPassThrough>	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: SpeedDialListInstance) => 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 SpeedDialList component.

name	type	default	description
speeddial	SpeedDialRootInstance	null	Instance of the SpeedDial component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of SpeedDialList component.

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

Types#

Instance

Instance of SpeedDialList component.

values
ComponentInstance<SpeedDialListProps, SpeedDialListState, SpeedDialListExposes>

SpeedDialItem#

Props#

Defines valid properties in SpeedDialItem 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?: SpeedDialItemInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: SpeedDialItemInstance) => 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<SpeedDialItemPassThrough>	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: SpeedDialItemInstance) => 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 SpeedDialItem component.

name	type	default	description
speeddial	SpeedDialRootInstance	null	Instance of the SpeedDial component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of SpeedDialItem component.

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

Types#

Instance

Instance of SpeedDialItem component.

values
ComponentInstance<SpeedDialItemProps, SpeedDialItemState, SpeedDialItemExposes>

SpeedDialAction#

Props#

Defines valid properties in SpeedDialAction 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?: SpeedDialActionInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: SpeedDialActionInstance) => 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<SpeedDialActionPassThrough>	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: SpeedDialActionInstance) => ReactNode)	null	The children to render.
iconOnly	boolean	true	Whether to show the SpeedDialAction with a borderless style.
severity	string & {} \| "secondary" \| "info" \| "success" \| "warn" \| "danger" \| "contrast" \| "help"	'secondary'	Severity type of the SpeedDialAction.
rounded	boolean	true	Whether to show the SpeedDialAction with a rounded style.
size	"small" \| "large"	'small'	Size of the Button.
[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 SpeedDialAction component.

name	type	default	description
speeddial	SpeedDialRootInstance	null	Instance of the SpeedDial component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of SpeedDialAction component.

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

Types#

Instance

Instance of SpeedDialAction component.

values
ComponentInstance<SpeedDialActionProps, SpeedDialActionState, SpeedDialActionExposes>

useSpeedDial#

Props#

Defines valid properties in useSpeedDial.

name	type	default	description
visible	boolean	null	Whether the speeddial is visible or not.
defaultVisible	boolean	null	Whether the speeddial is visible or not.
direction	"right" \| "left" \| "up" \| "down" \| "up-left" \| "up-right" \| "down-left" \| "down-right"	up	Specifies the opening direction of actions.
transitionDelay	number	30	Transition delay step for each action item.
type	"circle" \| "linear" \| "semi-circle" \| "quarter-circle"	linear	Specifies the opening type of actions.
radius	number	0	Radius for *circle types.
hideOnClickOutside	boolean	true	Whether the actions close when clicked outside.
onVisibleChange	(event: useSpeedDialChangeEvent) => void	null	Callback fired when the speeddial's visibility changes.

State#

Defines valid state in useSpeedDial.

name	type	default	description
visible	boolean	null	Visible state of the component.
focusedOptionIndex	string \| number	null	Current focused option index.

Exposes#

Defines the methods and properties exposed by useSpeedDial.

name	type	default	description
state	useSpeedDialState	null	The state of the useSpeedDial.
listRef	RefObject<HTMLUListElement>	null	Reference to the currently list element.
registerItem	() => number	null	Registers a new item and returns its index.
getItemStyle	(index: number) => CSSProperties	null	Handler for item's style
onBlur	(event: FocusEvent<HTMLElement>) => void	null	Handler for blur event.
onKeyDown	(event: KeyboardEvent) => void	null	Handler for keydown events.
onTriggerClick	() => void	null	Handler for click event.
onTriggerKeyDown	(event: KeyboardEvent) => void	null	Handler for keydown events on toggler.
onItemClick	(e: KeyboardEvent<Element> \| MouseEvent<Element, MouseEvent>) => void	null	Handler for click event on items.
onItemKeyDown	(e: KeyboardEvent) => void	null	Handler for keydown event on items.

Events#

useSpeedDialChangeEvent

Event fired when the speeddial's visibility changes.

name	type	description
value	boolean	The value of the speeddial.

Types#

Instance

Instance of useSpeedDial headless.

values
HeadlessInstance<useSpeedDialProps, useSpeedDialState, useSpeedDialExposes>