# Custom Toolbar

If you want to use a custom toolbar but still want the support of this library,
You can use the `QuillBaseToolbar` which is the base for the `QuillToolbar`

Example:

```dart
QuillToolbar.simple(
  configurations: const QuillSimpleToolbarConfigurations(
    buttonOptions: QuillToolbarButtonOptions(
      base: QuillToolbarBaseButtonOptions(
        globalIconSize: 20,
        globalIconButtonFactor: 1.4,
      ),
    ),
  ),
  child: SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    child: Row(
      children: [
        IconButton(
          onPressed: () => context
              .read<SettingsCubit>()
              .updateSettings(
                  state.copyWith(useCustomQuillToolbar: false)),
          icon: const Icon(
            Icons.width_normal,
          ),
        ),
        QuillToolbarHistoryButton(
          isUndo: true,
          controller: controller,
        ),
        QuillToolbarHistoryButton(
          isUndo: false,
          controller: controller,
        ),
        QuillToolbarToggleStyleButton(
          options: const QuillToolbarToggleStyleButtonOptions(),
          controller: controller,
          attribute: Attribute.bold,
        ),
        QuillToolbarToggleStyleButton(
          options: const QuillToolbarToggleStyleButtonOptions(),
          controller: controller,
          attribute: Attribute.italic,
        ),
        QuillToolbarToggleStyleButton(
          controller: controller,
          attribute: Attribute.underline,
        ),
        QuillToolbarClearFormatButton(
          controller: controller,
        ),
        const VerticalDivider(),
        QuillToolbarImageButton(
          controller: controller,
        ),
        QuillToolbarCameraButton(
          controller: controller,
        ),
        QuillToolbarVideoButton(
          controller: controller,
        ),
        const VerticalDivider(),
        QuillToolbarColorButton(
          controller: controller,
          isBackground: false,
        ),
        QuillToolbarColorButton(
          controller: controller,
          isBackground: true,
        ),
        const VerticalDivider(),
        // This is an implementation that only is used on
        // flutter_quill and it's not originally 
        // implemented in Quill JS API, so it could cause conflicts
        // with the original Quill Delta format
        QuillToolbarSelectLineHeightStyleDropdownButton(
          controller: globalController,
        ),
        const VerticalDivider(),
        QuillToolbarSelectHeaderStyleButton(
          controller: controller,
        ),
        const VerticalDivider(),
        QuillToolbarToggleCheckListButton(
          controller: controller,
        ),
        QuillToolbarToggleStyleButton(
          controller: controller,
          attribute: Attribute.ol,
        ),
        QuillToolbarToggleStyleButton(
          controller: controller,
          attribute: Attribute.ul,
        ),
        QuillToolbarToggleStyleButton(
          controller: controller,
          attribute: Attribute.inlineCode,
        ),
        QuillToolbarToggleStyleButton(
          controller: controller,
          attribute: Attribute.blockQuote,
        ),
        QuillToolbarIndentButton(
          controller: controller,
          isIncrease: true,
        ),
        QuillToolbarIndentButton(
          controller: controller,
          isIncrease: false,
        ),
        const VerticalDivider(),
        QuillToolbarLinkStyleButton(controller: controller),
      ],
    ),
  ),
)
```

if you want a more customized toolbar feel free to create your own and use the `controller` to interact with the editor.
checkout the `QuillToolbar` and the buttons inside it to see an example of how that will work