diff --git a/src/plugins/toolbar/components/ListsToggle.tsx b/src/plugins/toolbar/components/ListsToggle.tsx
index 67678752..47140d47 100644
--- a/src/plugins/toolbar/components/ListsToggle.tsx
+++ b/src/plugins/toolbar/components/ListsToggle.tsx
@@ -4,24 +4,33 @@ import { SingleChoiceToggleGroup } from '.././primitives/toolbar'
import { useCellValues, usePublisher } from '@mdxeditor/gurx'
import { iconComponentFor$ } from '../../core'
+const LIST_TITLE_MAP = {
+ bullet: 'Bulleted list',
+ number: 'Numbered list',
+ check: 'Check list'
+} as const
+
+const ICON_NAME_MAP = {
+ bullet: 'format_list_bulleted',
+ number: 'format_list_numbered',
+ check: 'format_list_checked'
+} as const
+
/**
- * A toolbar toggle that allows the user to toggle between bulleted and numbered lists.
+ * A toolbar toggle that allows the user to toggle between bulleted, numbered, and check lists.
* Pressing the selected button will convert the current list to the other type. Pressing it again will remove the list.
* For this button to work, you need to have the `listsPlugin` plugin enabled.
* @group Toolbar Components
+ * @param options - The list types that the user can toggle between. Defaults to `['bullet', 'number', 'check']`.
*/
-export const ListsToggle: React.FC = () => {
+export const ListsToggle: React.FC<{ options?: Array<'bullet' | 'number' | 'check'> }> = ({ options = ['bullet', 'number', 'check'] }) => {
const [currentListType, iconComponentFor] = useCellValues(currentListType$, iconComponentFor$)
const applyListType = usePublisher(applyListType$)
- return (
-
- )
+ const items = options.map((type) => ({
+ value: type,
+ title: LIST_TITLE_MAP[type],
+ contents: iconComponentFor(ICON_NAME_MAP[type])
+ }))
+
+ return
}