1# EditorToolbar
2 
3A customizable toolbar for editor actions that can be displayed as fixed, bubble, or floating menu.
4 
5## Key Props
6 
7- `items`: as an array of objects with the following properties:
8 
9- `label?: string`{lang="ts-type"}
10- `icon?: string`{lang="ts-type"}
11- `color?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"`{lang="ts-type"}
12- `activeColor?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"`{lang="ts-type"}
13- `variant?: "solid" | "outline" | "soft" | "ghost" | "link" | "subtle"`{lang="ts-type"}
14- `activeVariant?: "solid" | "outline" | "soft" | "ghost" | "link" | "subtle"`{lang="ts-type"}
15- `size?: "xs" | "sm" | "md" | "lg" | "xl"`{lang="ts-type"}
16- [`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"}](/docs/components/editor#handlers)
17- `disabled?: boolean`{lang="ts-type"}
18- `loading?: boolean`{lang="ts-type"}
19- `active?: boolean`{lang="ts-type"}
20- `tooltip?: TooltipProps`{lang="ts-type"}
21- [`slot?: string`{lang="ts-type"}](#with-link-popover)
22- `onClick?: (e: MouseEvent) => void`{lang="ts-type"}
23- `items?: EditorToolbarItem[] | EditorToolbarItem[][]`{lang="ts-type"}
24- `class?: any`{lang="ts-type"}
25 
26You can pass any property from the [Button](/docs/components/button#props) component such as `color`, `variant`, `size`, etc.
27 
28- `layout`: to change how the toolbar is displayed.
29 
30## Usage
31 
32```vue
33<UEditorToolbar
34  <!-- props here -->
35/>
36```
37