# 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.

<figure><img src="/files/QoY3TVFvz0aHJsh5VS0X" alt=""><figcaption></figcaption></figure>

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.

```js
enableBadgeButton: false
```

{% hint style="info" %}
When disabled, all badge actions move to the suggestion pop-up.
{% endhint %}

#### 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.

```js
enableLanguagesInBadgeButton: true
```

#### 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`).

```js
compactBadge: true,
```

#### 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:

```js
fullSizeBadge: true,
```

#### Global badge

By default, each text field has its own badge. To display a single page-level badge for all fields:

```js
globalBadge: true,
```

{% hint style="info" %}
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.
{% endhint %}

#### 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.

```javascript
badgeOffsetX: 16
badgeOffsetY: 12
badgeZIndex: 9999
```

{% hint style="info" %}

* Offsets shift the badge horizontally/vertically; `badgeZIndex` raises it above other elements.

* Adjust offsets to align with custom sidebars or containers shown near the badge.
  {% endhint %}

* Offsets shift the badge horizontally/vertically; `badgeZIndex` raises it above other elements.

* Adjust offsets to align with custom sidebars or containers shown near the badge.

#### Disable RTL mirroring

By default, the badge position mirrors automatically for right-to-left languages like Arabic or Hebrew. To keep the configured position regardless of text direction:

```js
disableBadgeRTLMirroring: true,
```

#### Badge action items

The `actionItems` parameter controls which actions appear in the badge (as well as the suggestion pop-up and proofread dialog). Default:

{% code overflow="wrap" %}

```js
actionItems: ['addWord', 'ignoreAll', 'ignore', 'report', 'disableRule', 'settings', 'toggle', 'proofreadDialog']
```

{% endcode %}

For example, to show only the proofreading dialog in the badge:

```js
actionItems: ['proofreadDialog'],
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wproofreader.com/v6.12.0/integrations/initialization/configuration-options/ui-elements/badge.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.