---
title: QuanticRefineToggle
slug: latest-insight-panel-refine-toggle
canonical_url: https://docs.coveo.com/en/quantic/latest/reference/insight-panel-components/insight-panel-refine-toggle/
collection: quantic
source_format: adoc
---
# QuanticRefineToggle

> **Note**
>
> This component was introduced in version `1.32.0`.

The `QuanticRefineToggle` component displays a button that is used to open the refine modal.

## Example

```html
<c-quantic-refine-toggle engine-id={engineId} hide-sort full-screen title="Filters" disable-dynamic-navigation>
  <div slot="refine-title">Custom Title</div>
  <div slot="button-content">
    Custom Label
    <lightning-icon size="x-small" icon-name="utility:filterList" alternative-text="Filters"
      class="custom-refine-icon slds-current-color slds-var-p-vertical_x-small slds-button__icon_right">
    </lightning-icon>
  </div>
</c-quantic-refine-toggle>
```

## Properties

--
|===
| Property | Attribute | Description | Type | Default

| `engineId` _(required)_
| `engine-id`
a| The ID of the engine instance the component registers to.
| `string`
|

| `hideSort` _(required)_
| `hide-sort`
a| Indicates whether the Quantic Sort component should be hidden.
| `boolean`
|

| `fullScreen`
| `full-screen`
a| Indicates whether the refine modal will be opened in full screen.
| `boolean`
| `false`

| `title` _(required)_
| `title`
a| The title of the toggle button.
| `string`
|

| `disableDynamicNavigation`
| `disable-dynamic-navigation`
a| Indicates whether to disable the dynamic navigation feature according to [the Dynamic Navigation Experience](https://docs.coveo.com/en/3383/leverage-machine-learning/about-dynamic-navigation-experience-dne).
| `boolean`
| `false`

|===
--

## XML configuration file elements

The following XML configuration file elements apply (see [XML Configuration File Elements](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.reference_configuration_tags)).

--
|===
| Metadata | Value

| `apiVersion` | `54.0`
| `isExposed` | `false`
|===
--

## Associated use cases

This component is also relevant in the following use case:

* [Search](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-refine-toggle)