Floating Toolbar

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

Import FloatingToolbar, FloatingToolbarPlacement from @prepared911/ui/blocks/floating-toolbar. See props.ts for the props and schema.ts for the declaration (inputs and variants).

Prop	Type	Default
`label`	`LocalizedMessage`	required
`actions`	`readonly FloatingToolbarAction[]`	required
`placement`	`FloatingToolbarPlacement`	`BlockEndCenter`
`inset`	`4 \| 8 \| 16`	`16`
`minimized`	`boolean`	uncontrolled
`defaultMinimized`	`boolean`	`false`
`onMinimizedChange`	`(minimized: boolean, details: FloatingToolbarMinimizeDetails) => void`	none
`minimizeLabel`	`LocalizedMessage` (name and tooltip of the X control)	required
`moreLabel`	`LocalizedMessage`	required
`moreIcon`	`Glyph`	none (text)
`className`	`string`	none
`ref`	`Ref<HTMLDivElement>` (the `role="toolbar"` element)	none
`id`	`string` (the placement layer)	none

Actions

Field	Command	Toggle
`id`	required	required
`label`	required `LocalizedMessage`	required `LocalizedMessage`
`icon`	optional `Glyph`	optional `Glyph`
`disabled`	optional	optional
`pinned`	optional, default `false`	optional, default `false`
`intent`	optional `ButtonIntent`	not allowed
`onAction`	required `() => void`	not allowed
`pressed`	not allowed	required `boolean`
`onPressedChange`	not allowed	required `(pressed: boolean) => void`

Placement

FloatingToolbarPlacement: BlockEndCenter, BlockEndStart, BlockEndEnd, BlockStartCenter, BlockStartStart, BlockStartEnd. The toolbar is always a horizontal row, so there is no inline-edge placement (FT-14).

Minimize control

The control is an icon-only Button that shows the X glyph, named and described by minimizeLabel. There is no icon prop to replace the glyph (FT-12).

Props

Name	Type	Default	Description
`actions`	`readonly FloatingToolbarAction[]`	—	The call-taking actions in display order. Each one is a labelled Button in the bar, or a row in the overflow menu when the bar has no room for it.
`label`	`LocalizedMessage`	—	Accessible name of the toolbar (`role="toolbar"`), such as "Call actions".
`minimizeLabel`	`LocalizedMessage`	—	Name of the minimize control. The control is an icon-only Button that shows the X glyph; this is its accessible name and its tooltip.
`moreLabel`	`LocalizedMessage`	—	Name of the overflow control, which opens the menu of actions the bar has no room for.
`className`	`string`	—	Classes appended to the placement layer.
`defaultMinimized`	`boolean`	`false`	Initial minimized state when uncontrolled.
`id`	`string`	—	Id of the placement layer.
`inset`	`ToolbarInset`	`16`	Space between the workspace edge and the toolbar, as a space-token step: 4, 8, or 16. The default clears a classic scrollbar gutter on a scroll region that fills the workspace.
`minimized`	`boolean`	—	Controlled minimized state. When `true` the toolbar animates out, is inert and hidden, and the host offers the way back, normally an item in its Dock. Pair with `onMinimizedChange`; without it the toolbar keeps its own state and nothing but the host can restore it.
`moreIcon`	`Glyph`	—	Glyph of the overflow control. With it the control is an icon-only Button named by `moreLabel`; without it the control shows `moreLabel` as text.
`onMinimizedChange`	`((minimized: boolean, details: FloatingToolbarMinimizeDetails) => void)`	—	Called when the minimize control is pressed, with `true` and the pressing event and control in the details. Restoring is the host's call: it sets `minimized` back to `false` when its Dock item is pressed, so the toolbar never calls this with `false`. Cancel the details to keep the toolbar in place. @param minimized - The requested state @param details - Change metadata
`placement`	`FloatingToolbarPlacement`	`FloatingToolbarPlacement.BlockEndCenter`	Block edge (top or bottom) and alignment inside the workspace. The toolbar is positioned by layout, never by coordinates, and is always a horizontal row.
`ref`	`Ref<HTMLDivElement>`	—	Ref to the `role="toolbar"` element.

Storybook

Interactive examples and edge cases for this component are in Storybook.

DefaultOpens in a new tab

Floating Toolbar / Usage

Floating Toolbar / Accessibility

On this page

Floating Toolbar

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

Import FloatingToolbar, FloatingToolbarPlacement from @prepared911/ui/blocks/floating-toolbar. See props.ts for the props and schema.ts for the declaration (inputs and variants).

Prop	Type	Default
`label`	`LocalizedMessage`	required
`actions`	`readonly FloatingToolbarAction[]`	required
`placement`	`FloatingToolbarPlacement`	`BlockEndCenter`
`inset`	`4 \| 8 \| 16`	`16`
`minimized`	`boolean`	uncontrolled
`defaultMinimized`	`boolean`	`false`
`onMinimizedChange`	`(minimized: boolean, details: FloatingToolbarMinimizeDetails) => void`	none
`minimizeLabel`	`LocalizedMessage` (name and tooltip of the X control)	required
`moreLabel`	`LocalizedMessage`	required
`moreIcon`	`Glyph`	none (text)
`className`	`string`	none
`ref`	`Ref<HTMLDivElement>` (the `role="toolbar"` element)	none
`id`	`string` (the placement layer)	none

Actions

Field	Command	Toggle
`id`	required	required
`label`	required `LocalizedMessage`	required `LocalizedMessage`
`icon`	optional `Glyph`	optional `Glyph`
`disabled`	optional	optional
`pinned`	optional, default `false`	optional, default `false`
`intent`	optional `ButtonIntent`	not allowed
`onAction`	required `() => void`	not allowed
`pressed`	not allowed	required `boolean`
`onPressedChange`	not allowed	required `(pressed: boolean) => void`

Placement

Minimize control

The control is an icon-only Button that shows the X glyph, named and described by minimizeLabel. There is no icon prop to replace the glyph (FT-12).

Props

Name	Type	Default	Description
`actions`	`readonly FloatingToolbarAction[]`	—	The call-taking actions in display order. Each one is a labelled Button in the bar, or a row in the overflow menu when the bar has no room for it.
`label`	`LocalizedMessage`	—	Accessible name of the toolbar (`role="toolbar"`), such as "Call actions".
`minimizeLabel`	`LocalizedMessage`	—	Name of the minimize control. The control is an icon-only Button that shows the X glyph; this is its accessible name and its tooltip.
`moreLabel`	`LocalizedMessage`	—	Name of the overflow control, which opens the menu of actions the bar has no room for.
`className`	`string`	—	Classes appended to the placement layer.
`defaultMinimized`	`boolean`	`false`	Initial minimized state when uncontrolled.
`id`	`string`	—	Id of the placement layer.
`inset`	`ToolbarInset`	`16`	Space between the workspace edge and the toolbar, as a space-token step: 4, 8, or 16. The default clears a classic scrollbar gutter on a scroll region that fills the workspace.
`minimized`	`boolean`	—	Controlled minimized state. When `true` the toolbar animates out, is inert and hidden, and the host offers the way back, normally an item in its Dock. Pair with `onMinimizedChange`; without it the toolbar keeps its own state and nothing but the host can restore it.
`moreIcon`	`Glyph`	—	Glyph of the overflow control. With it the control is an icon-only Button named by `moreLabel`; without it the control shows `moreLabel` as text.
`onMinimizedChange`	`((minimized: boolean, details: FloatingToolbarMinimizeDetails) => void)`	—	Called when the minimize control is pressed, with `true` and the pressing event and control in the details. Restoring is the host's call: it sets `minimized` back to `false` when its Dock item is pressed, so the toolbar never calls this with `false`. Cancel the details to keep the toolbar in place. @param minimized - The requested state @param details - Change metadata
`placement`	`FloatingToolbarPlacement`	`FloatingToolbarPlacement.BlockEndCenter`	Block edge (top or bottom) and alignment inside the workspace. The toolbar is positioned by layout, never by coordinates, and is always a horizontal row.
`ref`	`Ref<HTMLDivElement>`	—	Ref to the `role="toolbar"` element.

Storybook

Interactive examples and edge cases for this component are in Storybook.

DefaultOpens in a new tab

Floating Toolbar / Usage

Floating Toolbar / Accessibility

On this page