Widgets Panel


The Panel widget wraps other widgets in a consistent panel design. It also reacts, indicates and set CSS classes when widgets are no more relevant for refining. E.g. when a RefinementList becomes empty because of the current search results.


type: string 

Adds a className on the root element.

type: node 

Adds a header to the widget.

type: node 

Adds a footer to the widget.

Example usage

import React from 'react'; import { InstantSearch, Panel, RefinementList } from 'react-instantsearch-dom'; const App = () => ( <InstantSearch appId="latency" apiKey="6be0576ff61c053d5f9a3225e2a90f76" indexName="instant_search" > <Panel header="Categories"> <RefinementList attribute="categories" /> </Panel> </InstantSearch> );

CSS classes

.ais-Panel {}

the root div of the Panel

.ais-Panel--noRefinement {}

the root div of the Panel without refinement

.ais-Panel-header {}

the header of the Panel (optional)

.ais-Panel-body {}

the body of the Panel

.ais-Panel-footer {}

the footer of the Panel (optional)

Translation keys

This widget has no translations.