---
title: QuanticModal
slug: latest-search-modal
canonical_url: https://docs.coveo.com/en/quantic/latest/reference/search-components/search-modal/
collection: quantic
source_format: adoc
---
# QuanticModal

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

The `QuanticModal` is a container component that displays slotted content in a modal. This component handles the animation logic, exposes methods to open and close the modal, offers the option to open the modal in full screen or just to cover the search interface, and exposes a set of slots to fully customize the modal content.

## Example

```html
<c-quantic-modal full-screen animation="slideToLeft">
  <div slot="header">Modal Header</div>
  <div slot="content">Modal Content</div>
  <div slot="footer">Modal Footer</div>
</c-quantic-modal>
```

## Properties

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

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

| `animation`
| `animation`
a| Indicates the type of animation to use to open the modal.
| `'slideToTop', 'slideToLeft'`
| `slideToTop`

|===
--

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

* [Insight Panel](https://docs.coveo.com/en/quantic/latest/reference/insight-panel-components/insight-panel-modal)