Skip to main content


This component acts as an UI control of the active mouse tool in a workspace. It renders a list of tools such as "contrast control", "new-line", "new-area"... Once a workspace is provided, this components allows users to easily change the active mouse action.


NameDocsTypeDefault value
orientationThe list orientation."horizontal" | "vertical""horizontal"
selectedCurrently selected tool."contrast" | "crop" | "crosshair" | "new-area" | "new-brush" | "new-line" | "new-path" | "new-point" | "new-spline" | "none" | "pan" | "rotate" | "slices" | "zoom" | undefined
showIconsShow tool icon on each button.booleantrue
showTextShow the tool's description text on each button.booleanfalse
toolsUseful to specify the tools to be displayed. By default all available tools are displayed. It's a good practice to only display the necesary tools that an user might use.SlicesAction[] | string | undefined
workspaceWhen provided, this component will automatically configure the workspace to use the selected tool.Workspace | string | undefined | { id: string; }


setChangeEvent fired whenever a tool is selected by an user interaction.

CSS parts

buttonThe button that selects an option.
iconWhen showIcons=true, the icon inside the button.
textWhen showText=true, the text describind the option of a button.