ToolbarButtonItem

A pressable button in an environment's toolbar, drawn by the host.

@internote/canvas-sdkInterface
On this page
import { ToolbarButtonItem } from '@internote/canvas-sdk';

#Fields

align
Where the host draws the button: leading sits with the environment's other items; trailing moves it to the bar's far side, ahead of the system tier, which is the slot for an environment's primary action.
leadingtrailing
Default'leading'
busy
Whether work is in flight behind the button. The host draws working feedback, such as a spinner in place of the icon.
boolean
disabled
Whether the button is shown but cannot be pressed.
boolean
icon
An icon name, resolved by the host's icon set.
string
idRequired
Unique within the environment's contribution. A duplicate throws at validation.
string
label
The accessible name and tooltip. A disabled button's label may carry the reason.
string
onPressRequired
Called when the reader presses the button.
() => void
text
A visible caption drawn inside the button, beside the icon. Distinct from label so the caption stays short ("Run") while the tooltip explains ("Sign in to run code").
string
typeRequired
Marks the item as a button.
'button'
variant
The button's weight: normal is transparent until hovered, like every toolbar control; subtle is the tinted register, for the one action an environment leads with.
normalsubtle
Default'normal'

#Example

{ type: 'button', id: 'reset-view', icon: 'ZoomReset', label: 'Reset view', onPress: () => view.reset(ctx), disabled: !view.hasExplored(ctx) }

Declared in packages/canvas-sdk/src/toolbar/types.ts:27.

Last updated