diff --git a/dev/app/builtin/stories/hits.stories.js b/dev/app/builtin/stories/hits.stories.js
index 435c3090bc..c014002010 100644
--- a/dev/app/builtin/stories/hits.stories.js
+++ b/dev/app/builtin/stories/hits.stories.js
@@ -36,7 +36,6 @@ export default () => {
           window.search.addWidget(
             instantsearch.widgets.hits({
               container,
-              escapeHits: true,
               templates: {
                 item: `
                   <div class="hit" id="hit-{{objectID}}">
diff --git a/dev/app/builtin/stories/infinite-hits.stories.js b/dev/app/builtin/stories/infinite-hits.stories.js
index ca0c519b47..19a2cf7ac7 100644
--- a/dev/app/builtin/stories/infinite-hits.stories.js
+++ b/dev/app/builtin/stories/infinite-hits.stories.js
@@ -14,7 +14,7 @@ export default () => {
         window.search.addWidget(
           instantsearch.widgets.infiniteHits({
             container,
-            showMoreLabel: 'Show more',
+            loadMoreLabel: 'Show more',
             templates: {
               item: '{{name}}',
             },
@@ -34,9 +34,9 @@ export default () => {
         window.search.addWidget(
           instantsearch.widgets.infiniteHits({
             container,
-            showMoreLabel: 'Show more',
+            loadMoreLabel: 'Show more',
             cssClasses: {
-              showmore: 'button',
+              loadMore: 'button',
             },
             templates: {
               item: '{{name}}',
@@ -51,7 +51,7 @@ export default () => {
         window.search.addWidget(
           instantsearch.widgets.infiniteHits({
             container,
-            showMoreLabel: 'Show more',
+            loadMoreLabel: 'Show more',
             templates: {
               item: '{{name}}',
             },
diff --git a/dev/app/init-unmount-widgets.js b/dev/app/init-unmount-widgets.js
index 4290bca27d..cdaae85296 100644
--- a/dev/app/init-unmount-widgets.js
+++ b/dev/app/init-unmount-widgets.js
@@ -161,7 +161,7 @@ export default () => {
     wrapWithUnmount(container =>
       instantsearch.widgets.infiniteHits({
         container,
-        showMoreLabel: 'Show more',
+        loadMoreLabel: 'Show more',
         templates: {
           item: '{{name}}',
         },
diff --git a/docgen/src/guides/v3-migration.md b/docgen/src/guides/v3-migration.md
index ecd7197f3a..9e30364d1b 100644
--- a/docgen/src/guides/v3-migration.md
+++ b/docgen/src/guides/v3-migration.md
@@ -4,6 +4,116 @@ InstantSearch 3 introduces some breaking changes in the widget's naming, options
 
 ## Widgets
 
+### Hits
+
+#### Options
+
+| Before          | After           |
+| --------------- | --------------- |
+| `escapeHits`    | `escapeHTML`    |
+| `showMoreLabel` | `loadMoreLabel` |
+
+* `escapeHTML` becomes `true` by default.
+* `allItems` template has been removed in favor of `connectHits`
+
+#### CSS classes
+
+| Before            | After             |
+| ----------------- | ----------------- |
+| `ais-hits`        | `ais-Hits`        |
+| `ais-hits--empty` | `ais-Hits--empty` |
+|                   | `ais-Hits--list`  |
+| `ais-hits--item`  | `ais-Hits--item`  |
+
+#### Markup
+
+```html
+<div class="ais-Hits">
+  <ol class="ais-Hits-list">
+    <li class="ais-Hits-item">
+      Hit 5477500: Amazon - Fire TV Stick with Alexa Voice Remote - Black
+    </li>
+    <li class="ais-Hits-item">
+      Hit 4397400: Google - Chromecast - Black
+    </li>
+    <li class="ais-Hits-item">
+      Hit 4397400: Google - Chromecast - Black
+    </li>
+    <li class="ais-Hits-item">
+      Hit 5477500: Amazon - Fire TV Stick with Alexa Voice Remote - Black
+    </li>
+    <li class="ais-Hits-item">
+      Hit 4397400: Google - Chromecast - Black
+    </li>
+    <li class="ais-Hits-item">
+      Hit 4397400: Google - Chromecast - Black
+    </li>
+    <li class="ais-Hits-item">
+      Hit 5477500: Amazon - Fire TV Stick with Alexa Voice Remote - Black
+    </li>
+    <li class="ais-Hits-item">
+      Hit 4397400: Google - Chromecast - Black
+    </li>
+  </ol>
+</div>
+```
+
+### InfiniteHits
+
+#### Options
+
+| Before       | After        |
+| ------------ | ------------ |
+| `escapeHits` | `escapeHTML` |
+
+`escapeHTML` becomes `true` by default.
+
+#### CSS classes
+
+| Before                              | After                                 |
+| ----------------------------------- | ------------------------------------- |
+| `ais-infinite-hits`                 | `ais-InfiniteHits`                    |
+| `ais-infinite-hits--empty`          | `ais-InfiniteHits--empty`             |
+|                                     | `ais-InfiniteHits--list`              |
+| `ais-infinite-hits--item`           | `ais-InfiniteHits--item`              |
+| `ais-infinite-hits--showmore`       |                                       |
+| `ais-infinite-hits--showmoreButton` | `ais-InfiniteHits-loadMore`           |
+|                                     | `ais-InfiniteHits-loadMore--disabled` |
+
+#### Markup
+
+```html
+<div class="ais-InfiniteHits">
+  <ol class="ais-InfiniteHits-list">
+    <li class="ais-InfiniteHits-item">
+      Hit 5477500: Amazon - Fire TV Stick with Alexa Voice Remote - Black
+    </li>
+    <li class="ais-InfiniteHits-item">
+      Hit 4397400: Google - Chromecast - Black
+    </li>
+    <li class="ais-InfiniteHits-item">
+      Hit 4397400: Google - Chromecast - Black
+    </li>
+    <li class="ais-InfiniteHits-item">
+      Hit 5477500: Amazon - Fire TV Stick with Alexa Voice Remote - Black
+    </li>
+    <li class="ais-InfiniteHits-item">
+      Hit 4397400: Google - Chromecast - Black
+    </li>
+    <li class="ais-InfiniteHits-item">
+      Hit 4397400: Google - Chromecast - Black
+    </li>
+    <li class="ais-InfiniteHits-item">
+      Hit 5477500: Amazon - Fire TV Stick with Alexa Voice Remote - Black
+    </li>
+    <li class="ais-InfiniteHits-item">
+      Hit 4397400: Google - Chromecast - Black
+    </li>
+  </ol>
+
+  <button class="ais-InfiniteHits-loadMore">Show more results</button>
+```
+
 ### Stats
 
 #### CSS classes
diff --git a/src/components/Hits.js b/src/components/Hits.js
index 82afb9a136..0ed657e177 100644
--- a/src/components/Hits.js
+++ b/src/components/Hits.js
@@ -2,18 +2,19 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'preact-compat';
 import map from 'lodash/map';
 import Template from './Template.js';
-import hasKey from 'lodash/has';
 import cx from 'classnames';
 
 class Hits extends Component {
-  renderWithResults() {
+  renderResults() {
     const renderedHits = map(this.props.hits, (hit, position) => {
       const data = {
         ...hit,
         __hitIndex: position,
       };
+
       return (
         <Template
+          rootTagName="li"
           data={data}
           key={data.objectID}
           rootProps={{ className: this.props.cssClasses.item }}
@@ -23,30 +24,19 @@ class Hits extends Component {
       );
     });
 
-    return <div className={this.props.cssClasses.root}>{renderedHits}</div>;
-  }
-
-  renderAllResults() {
-    const className = cx(
-      this.props.cssClasses.root,
-      this.props.cssClasses.allItems
-    );
-
     return (
-      <Template
-        data={this.props.results}
-        rootProps={{ className }}
-        templateKey="allItems"
-        {...this.props.templateProps}
-      />
+      <div className={this.props.cssClasses.root}>
+        <ol className={this.props.cssClasses.list}>{renderedHits}</ol>
+      </div>
     );
   }
 
-  renderNoResults() {
+  renderEmpty() {
     const className = cx(
       this.props.cssClasses.root,
-      this.props.cssClasses.empty
+      this.props.cssClasses.emptyRoot
     );
+
     return (
       <Template
         data={this.props.results}
@@ -59,31 +49,21 @@ class Hits extends Component {
 
   render() {
     const hasResults = this.props.results.hits.length > 0;
-    const hasAllItemsTemplate = hasKey(
-      this.props,
-      'templateProps.templates.allItems'
-    );
 
     if (!hasResults) {
-      return this.renderNoResults();
-    }
-
-    // If a allItems template is defined, it takes precedence over our looping
-    // through hits
-    if (hasAllItemsTemplate) {
-      return this.renderAllResults();
+      return this.renderEmpty();
     }
 
-    return this.renderWithResults();
+    return this.renderResults();
   }
 }
 
 Hits.propTypes = {
   cssClasses: PropTypes.shape({
     root: PropTypes.string,
+    emptyRoot: PropTypes.string,
     item: PropTypes.string,
-    allItems: PropTypes.string,
-    empty: PropTypes.string,
+    list: PropTypes.string,
   }),
   hits: PropTypes.array,
   results: PropTypes.object,
diff --git a/src/components/InfiniteHits.js b/src/components/InfiniteHits.js
index 25700236cd..c456003399 100644
--- a/src/components/InfiniteHits.js
+++ b/src/components/InfiniteHits.js
@@ -1,36 +1,81 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'preact-compat';
-import Hits from './Hits.js';
+import map from 'lodash/map';
+import cx from 'classnames';
+import Template from './Template.js';
 
 class InfiniteHits extends Component {
+  renderResults() {
+    const renderedHits = map(this.props.hits, (hit, position) => {
+      const data = {
+        ...hit,
+        __hitIndex: position,
+      };
+
+      return (
+        <Template
+          rootTagName="li"
+          data={data}
+          key={data.objectID}
+          rootProps={{ className: cx(this.props.cssClasses.item) }}
+          templateKey="item"
+          {...this.props.templateProps}
+        />
+      );
+    });
+
+    return <ol className={cx(this.props.cssClasses.list)}>{renderedHits}</ol>;
+  }
+
+  renderEmpty() {
+    return (
+      <Template
+        data={this.props.results}
+        rootProps={{
+          className: cx(
+            this.props.cssClasses.root,
+            this.props.cssClasses.emptyRoot
+          ),
+        }}
+        templateKey="empty"
+        {...this.props.templateProps}
+      />
+    );
+  }
+
   render() {
     const {
       cssClasses,
       hits,
-      results,
       showMore,
-      showMoreLabel,
-      templateProps,
+      loadMoreLabel,
+      isLastPage,
     } = this.props;
-    const btn = this.props.isLastPage ? (
-      <button disabled className={cssClasses.showmoreButton}>
-        {showMoreLabel}
+
+    if (hits.length === 0) {
+      return this.renderEmpty();
+    }
+
+    const hitsList = this.renderResults();
+
+    const loadMoreButton = isLastPage ? (
+      <button disabled className={cx(cssClasses.loadMore)}>
+        {loadMoreLabel}
       </button>
     ) : (
-      <button onClick={showMore} className={cssClasses.showmoreButton}>
-        {showMoreLabel}
+      <button
+        onClick={showMore}
+        className={cx(cssClasses.loadMore, cssClasses.disabledLoadMore)}
+      >
+        {loadMoreLabel}
       </button>
     );
 
     return (
-      <div>
-        <Hits
-          cssClasses={cssClasses}
-          hits={hits}
-          results={results}
-          templateProps={templateProps}
-        />
-        <div className={cssClasses.showmore}>{btn}</div>
+      <div className={cx(cssClasses.root)}>
+        {hitsList}
+
+        {loadMoreButton}
       </div>
     );
   }
@@ -39,16 +84,16 @@ class InfiniteHits extends Component {
 InfiniteHits.propTypes = {
   cssClasses: PropTypes.shape({
     root: PropTypes.string,
+    emptyRoot: PropTypes.string,
+    list: PropTypes.string,
     item: PropTypes.string,
-    allItems: PropTypes.string,
-    empty: PropTypes.string,
-    showmore: PropTypes.string,
-    showmoreButton: PropTypes.string,
+    loadMore: PropTypes.string,
+    disabledLoadMore: PropTypes.string,
   }),
   hits: PropTypes.array,
   results: PropTypes.object,
   showMore: PropTypes.func,
-  showMoreLabel: PropTypes.string,
+  loadMoreLabel: PropTypes.string,
   templateProps: PropTypes.object.isRequired,
   isLastPage: PropTypes.bool.isRequired,
 };
diff --git a/src/components/__tests__/Hits-test.js b/src/components/__tests__/Hits-test.js
index 70f0bbcf7d..534624c587 100644
--- a/src/components/__tests__/Hits-test.js
+++ b/src/components/__tests__/Hits-test.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import renderer from 'react-test-renderer';
 import { shallow } from 'enzyme';
 import Hits from '../Hits';
 import Template from '../Template';
@@ -37,8 +38,8 @@ describe('Hits', () => {
           hits: [],
         },
         cssClasses: {
-          root: 'my_root',
-          empty: 'my_empty',
+          root: 'root',
+          emptyRoot: 'emptyRoot',
         },
       };
 
@@ -46,91 +47,7 @@ describe('Hits', () => {
       const actual = shallowRender(props);
 
       // Then
-      expect(actual.props().rootProps.className).toContain('my_empty');
-      expect(actual.props().rootProps.className).toContain('my_root');
-    });
-  });
-
-  describe('allItems template', () => {
-    it('should use the allItems template if defined', () => {
-      // Given
-      const props = {
-        results: {
-          hits: [
-            {
-              objectID: 'one',
-              foo: 'bar',
-            },
-          ],
-        },
-        templateProps: {
-          templates: {
-            allItems: 'all items',
-          },
-        },
-      };
-
-      // When
-      const actual = shallowRender(props);
-
-      // Then
-      expect(actual.props().templateKey).toEqual('allItems');
-    });
-
-    it('should set the allItems CSS class to the template', () => {
-      // Given
-      const props = {
-        results: {
-          hits: [
-            {
-              objectID: 'one',
-              foo: 'bar',
-            },
-          ],
-        },
-        templateProps: {
-          templates: {
-            allItems: 'all items',
-          },
-        },
-        cssClasses: {
-          root: 'my_root',
-          allItems: 'my_all_items',
-        },
-      };
-
-      // When
-      const actual = shallowRender(props);
-
-      // Then
-      expect(actual.props().rootProps.className).toContain('my_all_items');
-      expect(actual.props().rootProps.className).toContain('my_root');
-    });
-
-    it('should pass the list of all results to the template', () => {
-      // Given
-      const results = {
-        hits: [
-          {
-            objectID: 'one',
-            foo: 'bar',
-          },
-        ],
-      };
-      const props = {
-        results,
-        templateProps: {
-          templates: {
-            allItems: 'all items',
-          },
-        },
-      };
-
-      // When
-      const actual = shallowRender(props);
-
-      // Then
-      expect(actual.props().data).toEqual(results);
+      expect(actual.props().rootProps.className).toContain('root');
     });
   });
 
@@ -182,7 +99,7 @@ describe('Hits', () => {
           },
         },
         cssClasses: {
-          item: 'my_item',
+          item: 'item',
         },
       };
 
@@ -190,7 +107,7 @@ describe('Hits', () => {
       const actual = shallowRender(props).find(Template);
 
       // Then
-      expect(actual.props().rootProps.className).toContain('my_item');
+      expect(actual.props().rootProps.className).toContain('item');
     });
 
     it('should wrap the items in a root div element', () => {
@@ -214,7 +131,7 @@ describe('Hits', () => {
           },
         },
         cssClasses: {
-          root: 'my_root',
+          root: 'root',
         },
       };
 
@@ -223,7 +140,7 @@ describe('Hits', () => {
 
       // Then
       expect(actual.name()).toEqual('div');
-      expect(actual.props().className).toContain('my_root');
+      expect(actual.props().className).toContain('root');
     });
 
     it('should pass each result data to each item template', () => {
@@ -316,4 +233,37 @@ describe('Hits', () => {
       expect(actual.at(1).key()).toEqual('BAZ');
     });
   });
+
+  describe('markup', () => {
+    it('should render <Hits />', () => {
+      const hits = [
+        {
+          objectID: 'one',
+          foo: 'bar',
+        },
+        {
+          objectID: 'two',
+          foo: 'baz',
+        },
+      ];
+
+      const props = {
+        results: { hits },
+        hits,
+        cssClasses: {
+          root: 'root',
+          list: 'list',
+          item: 'item',
+        },
+        templateProps: {
+          templates: {
+            item: 'item',
+          },
+        },
+      };
+      const tree = renderer.create(<Hits {...props} />).toJSON();
+
+      expect(tree).toMatchSnapshot();
+    });
+  });
 });
diff --git a/src/components/__tests__/InfiniteHits-test.js b/src/components/__tests__/InfiniteHits-test.js
new file mode 100644
index 0000000000..d836d0e783
--- /dev/null
+++ b/src/components/__tests__/InfiniteHits-test.js
@@ -0,0 +1,129 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import InfiniteHits from '../InfiniteHits';
+
+describe('InfiniteHits', () => {
+  describe('markup', () => {
+    it('should render <InfiniteHits /> on first page', () => {
+      const hits = [
+        {
+          objectID: 'one',
+          foo: 'bar',
+        },
+        {
+          objectID: 'two',
+          foo: 'baz',
+        },
+      ];
+
+      const props = {
+        results: { hits },
+        hits,
+        isLastPage: false,
+        cssClasses: {
+          root: 'root',
+          emptyRoot: 'emptyRoot',
+          list: 'list',
+          item: 'item',
+          loadMore: 'loadMore',
+          disabledLoadMore: 'disabledLoadMore',
+        },
+        templateProps: {
+          templates: {
+            item: 'item',
+          },
+        },
+      };
+      const tree = renderer.create(<InfiniteHits {...props} />).toJSON();
+
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('should render <InfiniteHits /> on last page', () => {
+      const hits = [
+        {
+          objectID: 'one',
+          foo: 'bar',
+        },
+        {
+          objectID: 'two',
+          foo: 'baz',
+        },
+      ];
+
+      const props = {
+        results: { hits },
+        hits,
+        isLastPage: true,
+        cssClasses: {
+          root: 'root',
+          emptyRoot: 'emptyRoot',
+          list: 'list',
+          item: 'item',
+          loadMore: 'loadMore',
+          disabledLoadMore: 'disabledLoadMore',
+        },
+        templateProps: {
+          templates: {
+            item: 'item',
+          },
+        },
+      };
+      const tree = renderer.create(<InfiniteHits {...props} />).toJSON();
+
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('should render <InfiniteHits /> without hits on first page', () => {
+      const hits = [];
+
+      const props = {
+        results: { hits },
+        hits,
+        isLastPage: false,
+        cssClasses: {
+          root: 'root',
+          emptyRoot: 'emptyRoot',
+          list: 'list',
+          item: 'item',
+          loadMore: 'loadMore',
+          disabledLoadMore: 'disabledLoadMore',
+        },
+        templateProps: {
+          templates: {
+            empty: 'empty',
+          },
+        },
+      };
+      const tree = renderer.create(<InfiniteHits {...props} />).toJSON();
+
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('should render <InfiniteHits /> without hits on last page', () => {
+      const hits = [];
+
+      const props = {
+        results: { hits },
+        hits,
+        isLastPage: true,
+        cssClasses: {
+          root: 'root',
+          emptyRoot: 'emptyRoot',
+          list: 'list',
+          item: 'item',
+          loadMore: 'loadMore',
+          disabledLoadMore: 'disabledLoadMore',
+        },
+        templateProps: {
+          templates: {
+            empty: 'empty',
+          },
+        },
+      };
+      const tree = renderer.create(<InfiniteHits {...props} />).toJSON();
+
+      expect(tree).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/components/__tests__/__snapshots__/Hits-test.js.snap b/src/components/__tests__/__snapshots__/Hits-test.js.snap
new file mode 100644
index 0000000000..333bbd03a2
--- /dev/null
+++ b/src/components/__tests__/__snapshots__/Hits-test.js.snap
@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Hits markup should render <Hits /> 1`] = `
+<div
+  className="root"
+>
+  <ol
+    className="list"
+  >
+    <li
+      className="item"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "item",
+        }
+      }
+    />
+    <li
+      className="item"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "item",
+        }
+      }
+    />
+  </ol>
+</div>
+`;
diff --git a/src/components/__tests__/__snapshots__/InfiniteHits-test.js.snap b/src/components/__tests__/__snapshots__/InfiniteHits-test.js.snap
new file mode 100644
index 0000000000..cdd868b573
--- /dev/null
+++ b/src/components/__tests__/__snapshots__/InfiniteHits-test.js.snap
@@ -0,0 +1,84 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InfiniteHits markup should render <InfiniteHits /> on first page 1`] = `
+<div
+  className="root"
+>
+  <ol
+    className="list"
+  >
+    <li
+      className="item"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "item",
+        }
+      }
+    />
+    <li
+      className="item"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "item",
+        }
+      }
+    />
+  </ol>
+  <button
+    className="loadMore disabledLoadMore"
+  />
+</div>
+`;
+
+exports[`InfiniteHits markup should render <InfiniteHits /> on last page 1`] = `
+<div
+  className="root"
+>
+  <ol
+    className="list"
+  >
+    <li
+      className="item"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "item",
+        }
+      }
+    />
+    <li
+      className="item"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "item",
+        }
+      }
+    />
+  </ol>
+  <button
+    className="loadMore"
+    disabled={true}
+  />
+</div>
+`;
+
+exports[`InfiniteHits markup should render <InfiniteHits /> without hits on first page 1`] = `
+<div
+  className="root emptyRoot"
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "empty",
+    }
+  }
+/>
+`;
+
+exports[`InfiniteHits markup should render <InfiniteHits /> without hits on last page 1`] = `
+<div
+  className="root emptyRoot"
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "empty",
+    }
+  }
+/>
+`;
diff --git a/src/connectors/hits/__tests__/connectHits-test.js b/src/connectors/hits/__tests__/connectHits-test.js
index 23f9f588cb..e13ad88bdd 100644
--- a/src/connectors/hits/__tests__/connectHits-test.js
+++ b/src/connectors/hits/__tests__/connectHits-test.js
@@ -9,7 +9,7 @@ describe('connectHits', () => {
     // flag set accordingly
     const rendering = jest.fn();
     const makeWidget = connectHits(rendering);
-    const widget = makeWidget({ escapeHits: true });
+    const widget = makeWidget({ escapeHTML: true });
 
     expect(widget.getConfiguration()).toEqual({
       highlightPreTag: '__ais-highlight__',
@@ -32,7 +32,7 @@ describe('connectHits', () => {
     expect(rendering).toHaveBeenCalledTimes(1);
     // test that rendering has been called during init with isFirstRendering = true
     expect(rendering).toHaveBeenLastCalledWith(
-      expect.objectContaining({ widgetParams: { escapeHits: true } }),
+      expect.objectContaining({ widgetParams: { escapeHTML: true } }),
       true
     );
 
@@ -46,7 +46,7 @@ describe('connectHits', () => {
     expect(rendering).toHaveBeenCalledTimes(2);
     // test that rendering has been called during init with isFirstRendering = false
     expect(rendering).toHaveBeenLastCalledWith(
-      expect.objectContaining({ widgetParams: { escapeHits: true } }),
+      expect.objectContaining({ widgetParams: { escapeHTML: true } }),
       false
     );
   });
@@ -98,7 +98,7 @@ describe('connectHits', () => {
   it('escape highlight properties if requested', () => {
     const rendering = jest.fn();
     const makeWidget = connectHits(rendering);
-    const widget = makeWidget({ escapeHits: true });
+    const widget = makeWidget({ escapeHTML: true });
 
     const helper = jsHelper({}, '', {});
     helper.search = jest.fn();
diff --git a/src/connectors/hits/connectHits.js b/src/connectors/hits/connectHits.js
index f81f08b0ab..e5920c3360 100644
--- a/src/connectors/hits/connectHits.js
+++ b/src/connectors/hits/connectHits.js
@@ -1,4 +1,4 @@
-import escapeHits, { tagConfig } from '../../lib/escape-highlight.js';
+import escapeHTML, { tagConfig } from '../../lib/escape-highlight.js';
 import { checkRendering } from '../../lib/utils.js';
 
 const usage = `Usage:
@@ -12,7 +12,7 @@ var customHits = connectHits(function render(params, isFirstRendering) {
 });
 search.addWidget(
   customHits({
-    [ escapeHits = false ],
+    [ escapeHTML = true ],
     [ transformItems ]
   })
 );
@@ -28,7 +28,7 @@ Full documentation available at https://community.algolia.com/instantsearch.js/v
 
 /**
  * @typedef {Object} CustomHitsWidgetOptions
- * @property {boolean} [escapeHits = false] If true, escape HTML tags from `hits[i]._highlightResult`.
+ * @property {boolean} [escapeHTML = true] Whether to escape HTML tags from `hits[i]._highlightResult`.
  * @property {function(object[]):object[]} [transformItems] Function to transform the items passed to the templates.
  */
 
@@ -66,7 +66,7 @@ export default function connectHits(renderFn, unmountFn) {
 
     return {
       getConfiguration() {
-        return widgetParams.escapeHits ? tagConfig : undefined;
+        return widgetParams.escapeHTML ? tagConfig : undefined;
       },
 
       init({ instantSearchInstance }) {
@@ -85,11 +85,11 @@ export default function connectHits(renderFn, unmountFn) {
         results.hits = transformItems(results.hits);
 
         if (
-          widgetParams.escapeHits &&
+          widgetParams.escapeHTML &&
           results.hits &&
           results.hits.length > 0
         ) {
-          results.hits = escapeHits(results.hits);
+          results.hits = escapeHTML(results.hits);
         }
 
         renderFn(
diff --git a/src/connectors/infinite-hits/__tests__/connectInfiniteHits-test.js b/src/connectors/infinite-hits/__tests__/connectInfiniteHits-test.js
index 3c88cd8512..e16dfc4ff9 100644
--- a/src/connectors/infinite-hits/__tests__/connectInfiniteHits-test.js
+++ b/src/connectors/infinite-hits/__tests__/connectInfiniteHits-test.js
@@ -10,7 +10,7 @@ describe('connectInfiniteHits', () => {
     const rendering = jest.fn();
     const makeWidget = connectInfiniteHits(rendering);
     const widget = makeWidget({
-      escapeHits: true,
+      escapeHTML: true,
     });
 
     expect(widget.getConfiguration()).toEqual({
@@ -42,7 +42,7 @@ describe('connectInfiniteHits', () => {
         isLastPage: true,
         instantSearchInstance: undefined,
         widgetParams: {
-          escapeHits: true,
+          escapeHTML: true,
         },
       }),
       true
@@ -68,7 +68,7 @@ describe('connectInfiniteHits', () => {
         isLastPage: false,
         instantSearchInstance: undefined,
         widgetParams: {
-          escapeHits: true,
+          escapeHTML: true,
         },
       }),
       false
@@ -153,7 +153,7 @@ describe('connectInfiniteHits', () => {
   it('escape highlight properties if requested', () => {
     const rendering = jest.fn();
     const makeWidget = connectInfiniteHits(rendering);
-    const widget = makeWidget({ escapeHits: true });
+    const widget = makeWidget({ escapeHTML: true });
 
     const helper = jsHelper({}, '', {});
     helper.search = jest.fn();
diff --git a/src/connectors/infinite-hits/connectInfiniteHits.js b/src/connectors/infinite-hits/connectInfiniteHits.js
index 1bf7a08e3e..b7376cf76e 100644
--- a/src/connectors/infinite-hits/connectInfiniteHits.js
+++ b/src/connectors/infinite-hits/connectInfiniteHits.js
@@ -1,4 +1,4 @@
-import escapeHits, { tagConfig } from '../../lib/escape-highlight.js';
+import escapeHTML, { tagConfig } from '../../lib/escape-highlight.js';
 import { checkRendering } from '../../lib/utils.js';
 
 const usage = `Usage:
@@ -14,7 +14,7 @@ var customInfiniteHits = connectInfiniteHits(function render(params, isFirstRend
 });
 search.addWidget(
   customInfiniteHits({
-    [ escapeHits: true ],
+    [ escapeHTML = true ],
     [ transformItems ]
   })
 );
@@ -32,7 +32,7 @@ Full documentation available at https://community.algolia.com/instantsearch.js/v
 
 /**
  * @typedef {Object} CustomInfiniteHitsWidgetOptions
- * @property {boolean} [escapeHits = false] If true, escape HTML tags from `hits[i]._highlightResult`.
+ * @property {boolean} [escapeHTML = true] Whether to escape HTML tags from `hits[i]._highlightResult`.
  * @property {function(object[]):object[]} [transformItems] Function to transform the items passed to the templates.
  */
 
@@ -88,7 +88,7 @@ export default function connectInfiniteHits(renderFn, unmountFn) {
 
     return {
       getConfiguration() {
-        return widgetParams.escapeHits ? tagConfig : undefined;
+        return widgetParams.escapeHTML ? tagConfig : undefined;
       },
 
       init({ instantSearchInstance, helper }) {
@@ -116,11 +116,11 @@ export default function connectInfiniteHits(renderFn, unmountFn) {
         results.hits = transformItems(results.hits);
 
         if (
-          widgetParams.escapeHits &&
+          widgetParams.escapeHTML &&
           results.hits &&
           results.hits.length > 0
         ) {
-          results.hits = escapeHits(results.hits);
+          results.hits = escapeHTML(results.hits);
         }
 
         if (lastReceivedPage < state.page) {
diff --git a/src/widgets/hits/__tests__/__snapshots__/hits-test.js.snap b/src/widgets/hits/__tests__/__snapshots__/hits-test.js.snap
index 36929b4314..56328e42c9 100644
--- a/src/widgets/hits/__tests__/__snapshots__/hits-test.js.snap
+++ b/src/widgets/hits/__tests__/__snapshots__/hits-test.js.snap
@@ -4,9 +4,10 @@ exports[`hits() calls twice ReactDOM.render(<Hits props />, container) 1`] = `
 <Hits
   cssClasses={
     Object {
-      "empty": "ais-hits__empty",
-      "item": "ais-hits--item",
-      "root": "ais-hits root cx",
+      "emptyRoot": "ais-Hits--empty",
+      "item": "ais-Hits-item",
+      "list": "ais-Hits-list",
+      "root": "ais-Hits root cx",
     }
   }
   hits={
@@ -48,9 +49,10 @@ exports[`hits() calls twice ReactDOM.render(<Hits props />, container) 2`] = `
 <Hits
   cssClasses={
     Object {
-      "empty": "ais-hits__empty",
-      "item": "ais-hits--item",
-      "root": "ais-hits root cx",
+      "emptyRoot": "ais-Hits--empty",
+      "item": "ais-Hits-item",
+      "list": "ais-Hits-list",
+      "root": "ais-Hits root cx",
     }
   }
   hits={
@@ -92,9 +94,10 @@ exports[`hits() renders transformed items 1`] = `
 <Hits
   cssClasses={
     Object {
-      "empty": "ais-hits__empty",
-      "item": "ais-hits--item",
-      "root": "ais-hits",
+      "emptyRoot": "ais-Hits--empty",
+      "item": "ais-Hits-item",
+      "list": "ais-Hits-list",
+      "root": "ais-Hits",
     }
   }
   hits={
diff --git a/src/widgets/hits/hits.js b/src/widgets/hits/hits.js
index e994b7593e..93a49069e1 100644
--- a/src/widgets/hits/hits.js
+++ b/src/widgets/hits/hits.js
@@ -4,14 +4,10 @@ import cx from 'classnames';
 import Hits from '../../components/Hits.js';
 import connectHits from '../../connectors/hits/connectHits.js';
 import defaultTemplates from './defaultTemplates.js';
+import { prepareTemplateProps, getContainerNode } from '../../lib/utils.js';
+import { component } from '../../lib/suit';
 
-import {
-  bemHelper,
-  prepareTemplateProps,
-  getContainerNode,
-} from '../../lib/utils.js';
-
-const bem = bemHelper('ais-hits');
+const suit = component('Hits');
 
 const renderer = ({
   renderState,
@@ -49,14 +45,15 @@ hits({
   container,
   [ transformItems ],
   [ cssClasses.{root,empty,item}={} ],
-  [ templates.{empty,item} | templates.{empty, allItems} ],
-  [ transformData.{empty,item} | transformData.{empty, allItems} ],
+  [ templates.{empty,item} ],
+  [ transformData.{empty,item} ],
 })`;
 
 /**
  * @typedef {Object} HitsCSSClasses
  * @property {string|string[]} [root] CSS class to add to the wrapping element.
  * @property {string|string[]} [empty] CSS class to add to the wrapping element when no results.
+ * @property {string|string[]} [list] CSS class to add to the list of results.
  * @property {string|string[]} [item] CSS class to add to each result.
  */
 
@@ -64,14 +61,12 @@ hits({
  * @typedef {Object} HitsTemplates
  * @property {string|function(object):string} [empty=''] Template to use when there are no results.
  * @property {string|function(object):string} [item=''] Template to use for each result. This template will receive an object containing a single record. The record will have a new property `__hitIndex` for the position of the record in the list of displayed hits.
- * @property {string|function(object):string} [allItems=''] Template to use for the list of all results. (Can't be used with `item` template). This template will receive a complete SearchResults result object, this object contains the key hits that contains all the records retrieved.
  */
 
 /**
  * @typedef {Object} HitsTransforms
  * @property {function(object):object} [empty] Method used to change the object passed to the `empty` template.
  * @property {function(object):object} [item] Method used to change the object passed to the `item` template.
- * @property {function(object):object} [allItems] Method used to change the object passed to the `allItems` template.
  */
 
 /**
@@ -80,7 +75,7 @@ hits({
  * @property {HitsTemplates} [templates] Templates to use for the widget.
  * @property {HitsTransforms} [transformData] Method to change the object passed to the templates.
  * @property {HitsCSSClasses} [cssClasses] CSS classes to add.
- * @property {boolean} [escapeHits = false] Escape HTML entities from hits string values.
+ * @property {boolean} [escapeHTML = true] Escape HTML entities from hits string values.
  * @property {function(object[]):object[]} [transformItems] Function to transform the items passed to the templates.
  */
 
@@ -103,7 +98,6 @@ hits({
  *       empty: 'No results',
  *       item: '<strong>Hit {{objectID}}</strong>: {{{_highlightResult.name.value}}}'
  *     },
- *     escapeHits: true,
  *     transformItems: items => items.map(item => item),
  *   })
  * );
@@ -113,7 +107,7 @@ export default function hits({
   cssClasses: userCssClasses = {},
   templates = defaultTemplates,
   transformData,
-  escapeHits = false,
+  escapeHTML = true,
   transformItems,
 }) {
   if (!container) {
@@ -126,9 +120,10 @@ export default function hits({
 
   const containerNode = getContainerNode(container);
   const cssClasses = {
-    root: cx(bem(null), userCssClasses.root),
-    item: cx(bem('item'), userCssClasses.item),
-    empty: cx(bem(null, 'empty'), userCssClasses.empty),
+    root: cx(suit(), userCssClasses.root),
+    emptyRoot: cx(suit({ modifierName: 'empty' }), userCssClasses.emptyRoot),
+    list: cx(suit({ descendantName: 'list' }), userCssClasses.list),
+    item: cx(suit({ descendantName: 'item' }), userCssClasses.item),
   };
 
   const specializedRenderer = renderer({
@@ -143,7 +138,7 @@ export default function hits({
     const makeHits = connectHits(specializedRenderer, () =>
       unmountComponentAtNode(containerNode)
     );
-    return makeHits({ escapeHits, transformItems });
+    return makeHits({ escapeHTML, transformItems });
   } catch (e) {
     throw new Error(usage);
   }
diff --git a/src/widgets/infinite-hits/__tests__/__snapshots__/infinite-hits-test.js.snap b/src/widgets/infinite-hits/__tests__/__snapshots__/infinite-hits-test.js.snap
index 9d3fb13117..55dfc153d4 100644
--- a/src/widgets/infinite-hits/__tests__/__snapshots__/infinite-hits-test.js.snap
+++ b/src/widgets/infinite-hits/__tests__/__snapshots__/infinite-hits-test.js.snap
@@ -4,11 +4,12 @@ exports[`infiniteHits() calls twice ReactDOM.render(<Hits props />, container) 1
 <InfiniteHits
   cssClasses={
     Object {
-      "empty": "ais-infinite-hits__empty",
-      "item": "ais-infinite-hits--item",
-      "root": "ais-infinite-hits root cx",
-      "showmore": "ais-infinite-hits--showmore",
-      "showmoreButton": "ais-infinite-hits--showmoreButton",
+      "emptyRoot": "ais-InfiniteHits--empty",
+      "item": "ais-InfiniteHits-item",
+      "list": "ais-InfiniteHits-list",
+      "loadMore": "ais-InfiniteHits-loadMore",
+      "loadMoreDisabled": "ais-InfiniteHits-loadMore--disabled",
+      "root": "ais-InfiniteHits root cx",
     }
   }
   hits={
@@ -20,6 +21,7 @@ exports[`infiniteHits() calls twice ReactDOM.render(<Hits props />, container) 1
     ]
   }
   isLastPage={false}
+  loadMoreLabel="Show more results"
   results={
     Object {
       "hits": Array [
@@ -31,7 +33,6 @@ exports[`infiniteHits() calls twice ReactDOM.render(<Hits props />, container) 1
     }
   }
   showMore={[Function]}
-  showMoreLabel="Show more results"
   templateProps={
     Object {
       "templates": Object {
@@ -53,11 +54,12 @@ exports[`infiniteHits() calls twice ReactDOM.render(<Hits props />, container) 2
 <InfiniteHits
   cssClasses={
     Object {
-      "empty": "ais-infinite-hits__empty",
-      "item": "ais-infinite-hits--item",
-      "root": "ais-infinite-hits root cx",
-      "showmore": "ais-infinite-hits--showmore",
-      "showmoreButton": "ais-infinite-hits--showmoreButton",
+      "emptyRoot": "ais-InfiniteHits--empty",
+      "item": "ais-InfiniteHits-item",
+      "list": "ais-InfiniteHits-list",
+      "loadMore": "ais-InfiniteHits-loadMore",
+      "loadMoreDisabled": "ais-InfiniteHits-loadMore--disabled",
+      "root": "ais-InfiniteHits root cx",
     }
   }
   hits={
@@ -69,6 +71,7 @@ exports[`infiniteHits() calls twice ReactDOM.render(<Hits props />, container) 2
     ]
   }
   isLastPage={false}
+  loadMoreLabel="Show more results"
   results={
     Object {
       "hits": Array [
@@ -80,7 +83,6 @@ exports[`infiniteHits() calls twice ReactDOM.render(<Hits props />, container) 2
     }
   }
   showMore={[Function]}
-  showMoreLabel="Show more results"
   templateProps={
     Object {
       "templates": Object {
@@ -102,11 +104,12 @@ exports[`infiniteHits() if it is the last page, then the props should contain is
 <InfiniteHits
   cssClasses={
     Object {
-      "empty": "ais-infinite-hits__empty",
-      "item": "ais-infinite-hits--item",
-      "root": "ais-infinite-hits root cx",
-      "showmore": "ais-infinite-hits--showmore",
-      "showmoreButton": "ais-infinite-hits--showmoreButton",
+      "emptyRoot": "ais-InfiniteHits--empty",
+      "item": "ais-InfiniteHits-item",
+      "list": "ais-InfiniteHits-list",
+      "loadMore": "ais-InfiniteHits-loadMore",
+      "loadMoreDisabled": "ais-InfiniteHits-loadMore--disabled",
+      "root": "ais-InfiniteHits root cx",
     }
   }
   hits={
@@ -118,6 +121,7 @@ exports[`infiniteHits() if it is the last page, then the props should contain is
     ]
   }
   isLastPage={false}
+  loadMoreLabel="Show more results"
   results={
     Object {
       "hits": Array [
@@ -131,7 +135,6 @@ exports[`infiniteHits() if it is the last page, then the props should contain is
     }
   }
   showMore={[Function]}
-  showMoreLabel="Show more results"
   templateProps={
     Object {
       "templates": Object {
@@ -153,11 +156,12 @@ exports[`infiniteHits() if it is the last page, then the props should contain is
 <InfiniteHits
   cssClasses={
     Object {
-      "empty": "ais-infinite-hits__empty",
-      "item": "ais-infinite-hits--item",
-      "root": "ais-infinite-hits root cx",
-      "showmore": "ais-infinite-hits--showmore",
-      "showmoreButton": "ais-infinite-hits--showmoreButton",
+      "emptyRoot": "ais-InfiniteHits--empty",
+      "item": "ais-InfiniteHits-item",
+      "list": "ais-InfiniteHits-list",
+      "loadMore": "ais-InfiniteHits-loadMore",
+      "loadMoreDisabled": "ais-InfiniteHits-loadMore--disabled",
+      "root": "ais-InfiniteHits root cx",
     }
   }
   hits={
@@ -169,6 +173,7 @@ exports[`infiniteHits() if it is the last page, then the props should contain is
     ]
   }
   isLastPage={true}
+  loadMoreLabel="Show more results"
   results={
     Object {
       "hits": Array [
@@ -182,7 +187,6 @@ exports[`infiniteHits() if it is the last page, then the props should contain is
     }
   }
   showMore={[Function]}
-  showMoreLabel="Show more results"
   templateProps={
     Object {
       "templates": Object {
@@ -204,11 +208,12 @@ exports[`infiniteHits() renders transformed items 1`] = `
 <InfiniteHits
   cssClasses={
     Object {
-      "empty": "ais-infinite-hits__empty",
-      "item": "ais-infinite-hits--item",
-      "root": "ais-infinite-hits",
-      "showmore": "ais-infinite-hits--showmore",
-      "showmoreButton": "ais-infinite-hits--showmoreButton",
+      "emptyRoot": "ais-InfiniteHits--empty",
+      "item": "ais-InfiniteHits-item",
+      "list": "ais-InfiniteHits-list",
+      "loadMore": "ais-InfiniteHits-loadMore",
+      "loadMoreDisabled": "ais-InfiniteHits-loadMore--disabled",
+      "root": "ais-InfiniteHits",
     }
   }
   hits={
@@ -221,6 +226,7 @@ exports[`infiniteHits() renders transformed items 1`] = `
     ]
   }
   isLastPage={false}
+  loadMoreLabel="Show more results"
   results={
     Object {
       "hits": Array [
@@ -233,7 +239,6 @@ exports[`infiniteHits() renders transformed items 1`] = `
     }
   }
   showMore={[Function]}
-  showMoreLabel="Show more results"
   templateProps={
     Object {
       "templates": Object {
diff --git a/src/widgets/infinite-hits/__tests__/infinite-hits-test.js b/src/widgets/infinite-hits/__tests__/infinite-hits-test.js
index f968b24c07..8573cb4637 100644
--- a/src/widgets/infinite-hits/__tests__/infinite-hits-test.js
+++ b/src/widgets/infinite-hits/__tests__/infinite-hits-test.js
@@ -24,7 +24,7 @@ describe('infiniteHits()', () => {
     container = document.createElement('div');
     widget = infiniteHits({
       container,
-      escapeHits: true,
+      escapeHTML: true,
       cssClasses: { root: ['root', 'cx'] },
     });
     widget.init({ helper, instantSearchInstance: {} });
diff --git a/src/widgets/infinite-hits/infinite-hits.js b/src/widgets/infinite-hits/infinite-hits.js
index 01fe1dd2c7..44e83c79dd 100644
--- a/src/widgets/infinite-hits/infinite-hits.js
+++ b/src/widgets/infinite-hits/infinite-hits.js
@@ -4,14 +4,10 @@ import cx from 'classnames';
 import InfiniteHits from '../../components/InfiniteHits.js';
 import defaultTemplates from './defaultTemplates.js';
 import connectInfiniteHits from '../../connectors/infinite-hits/connectInfiniteHits.js';
+import { prepareTemplateProps, getContainerNode } from '../../lib/utils.js';
+import { component } from '../../lib/suit';
 
-import {
-  bemHelper,
-  prepareTemplateProps,
-  getContainerNode,
-} from '../../lib/utils.js';
-
-const bem = bemHelper('ais-infinite-hits');
+const suit = component('InfiniteHits');
 
 const renderer = ({
   cssClasses,
@@ -19,7 +15,7 @@ const renderer = ({
   renderState,
   templates,
   transformData,
-  showMoreLabel,
+  loadMoreLabel,
 }) => (
   { hits, results, showMore, isLastPage, instantSearchInstance },
   isFirstRendering
@@ -40,7 +36,7 @@ const renderer = ({
       hits={hits}
       results={results}
       showMore={showMore}
-      showMoreLabel={showMoreLabel}
+      loadMoreLabel={loadMoreLabel}
       templateProps={renderState.templateProps}
       isLastPage={isLastPage}
     />,
@@ -52,10 +48,10 @@ const usage = `
 Usage:
 infiniteHits({
   container,
-  [ escapeHits = false ],
+  [ escapeHTML = true ],
   [ transformItems ],
-  [ showMoreLabel ],
-  [ cssClasses.{root,empty,item,showmore,showmoreButton}={} ],
+  [ loadMoreLabel = "Show more results" ],
+  [ cssClasses.{root,emptyRoot,list,item,loadMore,disabledLoadMore}={} ],
   [ templates.{empty,item} | templates.{empty} ],
   [ transformData.{empty,item} | transformData.{empty} ],
 })`;
@@ -75,20 +71,21 @@ infiniteHits({
 /**
  * @typedef {object} InfiniteHitsCSSClasses
  * @property {string|string[]} [root] CSS class to add to the wrapping element.
- * @property {string|string[]} [empty] CSS class to add to the wrapping element when no results.
+ * @property {string|string[]} [emptyRoot] CSS class to add to the wrapping element when no results.
+ * @property {string|string[]} [list] CSS class to add to the list of results.
  * @property {string|string[]} [item] CSS class to add to each result.
- * @property {string|string[]} [showmore] CSS class to add to the show more button container.
- * @property {string|string[]} [showmoreButton] CSS class to add to the show more button.
+ * @property {string|string[]} [loadMore] CSS class to add to the load more button.
+ * @property {string|string[]} [disabledLoadMore] CSS class to add to the load more button when disabled.
  */
 
 /**
  * @typedef {Object} InfiniteHitsWidgetOptions
  * @property  {string|HTMLElement} container CSS Selector or HTMLElement to insert the widget.
  * @property  {InfiniteHitsTemplates} [templates] Templates to use for the widget.
- * @property  {string} [showMoreLabel="Show more results"] label used on the show more button.
+ * @property  {string} [loadMoreLabel="Show more results"] label used on the load more button.
  * @property  {InfiniteHitsTransforms} [transformData] Method to change the object passed to the templates.
  * @property  {InfiniteHitsCSSClasses} [cssClasses] CSS classes to add.
- * @property {boolean} [escapeHits = false] Escape HTML entities from hits string values.
+ * @property {boolean} [escapeHTML = true] Escape HTML entities from hits string values.
  * @property {function(object[]):object[]} [transformItems] Function to transform the items passed to the templates.
  */
 
@@ -111,7 +108,6 @@ infiniteHits({
  *       empty: 'No results',
  *       item: '<strong>Hit {{objectID}}</strong>: {{{_highlightResult.name.value}}}'
  *     },
- *     escapeHits: true,
  *     transformItems: items => items.map(item => item),
  *   })
  * );
@@ -119,10 +115,10 @@ infiniteHits({
 export default function infiniteHits({
   container,
   cssClasses: userCssClasses = {},
-  showMoreLabel = 'Show more results',
+  loadMoreLabel = 'Show more results',
   templates = defaultTemplates,
   transformData,
-  escapeHits = false,
+  escapeHTML = true,
   transformItems,
 } = {}) {
   if (!container) {
@@ -139,11 +135,15 @@ export default function infiniteHits({
 
   const containerNode = getContainerNode(container);
   const cssClasses = {
-    root: cx(bem(null), userCssClasses.root),
-    item: cx(bem('item'), userCssClasses.item),
-    empty: cx(bem(null, 'empty'), userCssClasses.empty),
-    showmore: cx(bem('showmore'), userCssClasses.showmore),
-    showmoreButton: cx(bem('showmoreButton'), userCssClasses.showmoreButton),
+    root: cx(suit(), userCssClasses.root),
+    emptyRoot: cx(suit({ modifierName: 'empty' }), userCssClasses.emptyRoot),
+    item: cx(suit({ descendantName: 'item' }), userCssClasses.item),
+    list: cx(suit({ descendantName: 'list' }), userCssClasses.list),
+    loadMore: cx(suit({ descendantName: 'loadMore' }), userCssClasses.loadMore),
+    loadMoreDisabled: cx(
+      suit({ descendantName: 'loadMore', modifierName: 'disabled' }),
+      userCssClasses.loadMoreDisabled
+    ),
   };
 
   const specializedRenderer = renderer({
@@ -151,7 +151,7 @@ export default function infiniteHits({
     cssClasses,
     transformData,
     templates,
-    showMoreLabel,
+    loadMoreLabel,
     renderState: {},
   });
 
@@ -159,7 +159,7 @@ export default function infiniteHits({
     const makeInfiniteHits = connectInfiniteHits(specializedRenderer, () =>
       unmountComponentAtNode(containerNode)
     );
-    return makeInfiniteHits({ escapeHits, transformItems });
+    return makeInfiniteHits({ escapeHTML, transformItems });
   } catch (e) {
     throw new Error(usage);
   }