Badge
The badge is a floating UI control that represents the state of WProofreader and provides quick access to actions such as enabling/disabling proofreading, opening the Proofread in dialog mode, and accessing the settings. By default:
A minimized dot-style badge (gray, orange, or red depending on state) is displayed.
On hover, it expands to a full-size version with action icons.
The badge is placed per field unless configured globally.
The badge can be customized for behavior, layout, size, and placement using the following options.
Hide the badge
Turn off the badge UI by setting enableBadgeButton to false. By default, the badge is visible.
When disabled, all badge actions move to the suggestion pop-up.
Show language selector in the badge
Expose a language switcher inside the badge with enableLanguagesInBadgeButton. Disabled by default.
Use when: you want users to be able to switch the checking language directly from the badge.
Compact badge
A simplified badge that shows only the number of detected suggestions. Clicking the badge opens the proofread in dialog window. Most icons are removed, leaving only the suggestion counter and an enable/disable toggle. Works only when dialog mode is enabled (disableDialog: false).
Full-size badge
By default, the badge appears as a small dot in the corner of the editor and expands to its full size on hover. This works well for small input fields where the full badge would overlay the text. To display the badge at its full size permanently:
Global badge
By default, each text field has its own badge. To display a single page-level badge for all fields:
This is useful when you want a unified control for proofreading across multiple fields. It's also required if you're using the embedded dialog mode with proofreadDialogContainer, where the global badge acts as a single entry point for all suggestions.
Adjust badge position
Use badgeOffsetX, badgeOffsetY, and badgeZIndex to fine-tune placement and layering.
Use when: the badge overlaps other UI or the page uses fixed headers/sidebars.
Offsets shift the badge horizontally/vertically;
badgeZIndexraises it above other elements.Adjust offsets to align with custom sidebars or containers shown near the badge.
Offsets shift the badge horizontally/vertically;
badgeZIndexraises it above other elements.Adjust offsets to align with custom sidebars or containers shown near the badge.
Badge action items
The badge shows a subset of the actionItems: Settings, Toggle (enable/disable), and Proofread in dialog. To control which of these appear, adjust the actionItems parameter. For example, to show only the proofreading dialog in the badge:
Last updated
Was this helpful?