EditorToolbar

A customizable toolbar for editor actions that can be displayed as fixed, bubble, or floating menu.

Key Props

• items: as an array of objects with the following properties:

• label?: string{lang="ts-type"}
• icon?: string{lang="ts-type"}
• color?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"{lang="ts-type"}
• activeColor?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"{lang="ts-type"}
• variant?: "solid" | "outline" | "soft" | "ghost" | "link" | "subtle"{lang="ts-type"}
• activeVariant?: "solid" | "outline" | "soft" | "ghost" | "link" | "subtle"{lang="ts-type"}
• size?: "xs" | "sm" | "md" | "lg" | "xl"{lang="ts-type"}
• kind?: "mark" | "textAlign" | "heading" | "link" | "image" | "blockquote" | "bulletList" | "orderedList" | "codeBlock" | "horizontalRule" | "paragraph" | "undo" | "redo" | "clearFormatting" | "duplicate" | "delete" | "moveUp" | "moveDown" | "suggestion" | "mention" | "emoji"{lang="ts-type"}
• disabled?: boolean{lang="ts-type"}
• loading?: boolean{lang="ts-type"}
• active?: boolean{lang="ts-type"}
• tooltip?: TooltipProps{lang="ts-type"}
• slot?: string{lang="ts-type"}
• onClick?: (e: MouseEvent) => void{lang="ts-type"}
• items?: EditorToolbarItem[] | EditorToolbarItem[][]{lang="ts-type"}
• class?: any{lang="ts-type"}

You can pass any property from the Button component such as color, variant, size, etc.

• layout: to change how the toolbar is displayed.

Usage

<UEditorToolbar
  <!-- props here -->
/>