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.
Show a compact, dialog-focused badge
Enable a simplified badge using compactBadge that shows only the number of detected suggestions. Clicking the badge opens the Proofread in dialog window. By default is disabled.
Use when: you want a lightweight badge focused on dialog mode.
When enabled, the badge removes most icons, showing only the suggestion counter and an enable/disable toggle.
Works only when dialog mode is enabled (
disableDialog: false).
Show one badge for all fields
Display a single page-level badge with globalBadge. By default, a badge appears near each editable field.
Use when: you want a global control for proofreading across multiple fields.
Required if you're using the sidebar dialog mode (see proofreadDialogContainer). When the dialog is embedded, the global badge acts as a unified entry point for all suggestions.
Adjust badge position (and stacking)
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.
Last updated
Was this helpful?