atomic-refine-modal

The atomic-refine-modal is automatically created as a child of the atomic-search-interface when the atomic-refine-toggle is initialized.

When the modal is opened, the class atomic-modal-opened is added to the body, allowing further customization.

Properties

Property Attribute Description Type Default

isOpen

is-open

boolean

false

openButton

HTMLElement | undefined

Shadow Parts

Part Description

body

The body of the modal, between the header and the footer.

body-wrapper

The wrapper around the body.

close-button

The button in the header that closes the modal.

container

The modal’s outermost container.

filter-clear-all

The button that resets all actively selected facet values.

footer

The footer of the modal, containing the clear all button.

footer-button

The button in the footer that closes the modal.

footer-wrapper

The wrapper with a shadow or background color around the footer.

header

The header of the modal, containing the title.

header-ruler

The horizontal ruler underneath the header.

header-wrapper

The wrapper around the header.

section-title

The title for each section.

select

The <select> element of the drop-down list.

CSS Custom Content

Name Description

--atomic-refine-modal-facet-margin

The spacing between the modal’s facets.

What's Next for Me?