diff --git a/packages/analytics/autolink/__tests__/autolink.test.js b/packages/analytics/autolink/__tests__/autolink.test.js
deleted file mode 100644
index 565eb5fa14..0000000000
--- a/packages/analytics/autolink/__tests__/autolink.test.js
+++ /dev/null
@@ -1,236 +0,0 @@
-import { renderWC } from '../../../testing/testing-helpers';
-const path = require('path');
-
-const timeout = 90000;
-
-describe('analytics autolinker', () => {
-  let page;
-
-  beforeEach(async () => {
-    page = await global.__BROWSER__.newPage();
-    await page.goto('http://127.0.0.1:4444/', {
-      waitUntil: 'networkidle0',
-      timeout: 0,
-    });
-
-    await page.addScriptTag({
-      url: 'https://www.google-analytics.com/analytics.js',
-    });
-  }, timeout);
-
-  afterEach(async () => {
-    await page.close();
-  });
-
-  test('autolinker does not modify component URLs already containing an _ga query string', async function() {
-    await page.addScriptTag({
-      type: 'module',
-      path: path.join(__dirname, 'fixtures/test-analytics-config.data.js'),
-    });
-
-    await renderWC(
-      'bolt-button',
-      `<bolt-button url="https://www.google.com/?_ga=1234">External URL w/ existing GA Tracking</bolt-button>`,
-      page,
-    );
-
-    await page.click('bolt-button');
-    const currentUrl = await page.url();
-
-    expect(currentUrl).toContain('_ga=1234');
-  }, 120000);
-
-  test('autolinker updates the URLs of a <bolt-button> with an external url (2nd in the config) + rendering to the Shadow DOM', async function() {
-    await page.addScriptTag({
-      type: 'module',
-      path: path.join(__dirname, 'fixtures/test-analytics-config.data.js'),
-    });
-
-    await page.evaluate(() => {
-      const btn = document.createElement('bolt-button');
-      btn.textContent = 'External URL - Shadow DOM Test';
-      btn.setAttribute('url', 'https://www.boltdesignsystem.com');
-      document.body.appendChild(btn);
-    });
-
-    await page.click('bolt-button');
-    const currentUrl = await page.url();
-
-    expect(currentUrl).toContain('_ga');
-  }, 120000);
-
-  test('autolinker tracks the URLs of a <bolt-button> with an external url (2nd in the config) + rendering to the Shadow DOM - even after re-rendering', async function() {
-    await page.addScriptTag({
-      type: 'module',
-      path: path.join(__dirname, 'fixtures/test-analytics-config.data.js'),
-    });
-
-    await renderWC(
-      'bolt-button',
-      `<bolt-button url="https://developer.mozilla.org">External URL - Shadow DOM Test</bolt-button>`,
-      page,
-    );
-
-    await page.evaluate(() => {
-      const btn = document.querySelector('bolt-button');
-      btn.setAttribute('url', 'https://www.boltdesignsystem.com');
-      btn.setAttribute('color', 'secondary');
-      return document.body.innerHTML;
-    });
-
-    await page.click('bolt-button');
-    const currentUrl = await page.url();
-
-    expect(currentUrl).toContain('_ga');
-    expect(currentUrl).toContain('boltdesignsystem.com');
-  }, 5000);
-
-  test('autolinker updates the URLs of a <bolt-button> with an external url + rendering to the Shadow DOM', async function() {
-    await page.addScriptTag({
-      type: 'module',
-      path: path.join(__dirname, 'fixtures/test-analytics-config.data.js'),
-    });
-
-    await renderWC(
-      'bolt-button',
-      `<bolt-button url="https://www.google.com">External URL - Shadow DOM Test</bolt-button>`,
-      page,
-    );
-
-    await page.click('bolt-button');
-    const currentUrl = await page.url();
-
-    expect(currentUrl).toContain('_ga');
-  }, 120000);
-
-  test('autolinker updates the URLs of <bolt-button>s with external urls + render to the light DOM', async function() {
-    await page.addScriptTag({
-      type: 'module',
-      path: path.join(__dirname, 'fixtures/test-analytics-config.data.js'),
-    });
-
-    await renderWC(
-      'bolt-button',
-      `<bolt-button url="https://www.google.com" no-shadow>External URL - Light DOM Test</bolt-button>`,
-      page,
-    );
-
-    const navigationPromise = page.waitForNavigation();
-    await page.click('bolt-button');
-    await navigationPromise;
-    const currentUrl = await page.url();
-
-    expect(currentUrl).toContain('_ga');
-  }, 120000);
-
-  test('autolinker does not track <bolt-button>s with urls not containing domains in the config', async function() {
-    await page.addScriptTag({
-      type: 'module',
-      path: path.join(__dirname, 'fixtures/test-analytics-config.data.js'),
-    });
-
-    await renderWC(
-      'bolt-button',
-      `<bolt-button url="https://developer.mozilla.org">External URL - Untracked Domain</bolt-button>`,
-      page,
-    );
-
-    await page.click('bolt-button');
-    const currentUrl = await page.url();
-
-    expect(currentUrl).not.toContain('_ga');
-  }, 120000);
-
-  test('autolinker updates the URLs of a <bolt-link> with an external url + rendering to the Shadow DOM', async function() {
-    await page.addScriptTag({
-      type: 'module',
-      path: path.join(__dirname, 'fixtures/test-analytics-config.data.js'),
-    });
-
-    await renderWC(
-      'bolt-link',
-      `<bolt-link style="display: inline-block;" url="https://www.google.com">External URL - Shadow DOM Test</bolt-link>`,
-      page,
-    );
-
-    await page.click('bolt-link');
-    const currentUrl = await page.url();
-
-    expect(currentUrl).toContain('_ga');
-  }, 120000);
-
-  test('autolinker updates the URLs of a <bolt-link> with an external url + rendering to the light DOM', async function() {
-    await page.addScriptTag({
-      type: 'module',
-      path: path.join(__dirname, 'fixtures/test-analytics-config.data.js'),
-    });
-
-    await renderWC(
-      'bolt-link',
-      `<bolt-link no-shadow url="https://www.google.com">External URL - Light DOM Test</bolt-link>`,
-      page,
-    );
-
-    await page.click('bolt-link');
-    const currentUrl = await page.url();
-
-    expect(currentUrl).toContain('_ga');
-  }, 120000);
-
-  test('autolinker does not track <bolt-link>s with urls not containing domains in the config', async function() {
-    await page.addScriptTag({
-      type: 'module',
-      path: path.join(__dirname, 'fixtures/test-analytics-config.data.js'),
-    });
-
-    await renderWC(
-      'bolt-link',
-      `<bolt-link style="display: inline-block;" url="https://developer.mozilla.org">External URL - Untracked Domain</bolt-link>`,
-      page,
-    );
-
-    await page.click('bolt-link');
-    const currentUrl = await page.url();
-
-    expect(currentUrl).not.toContain('_ga');
-  }, 120000);
-
-  test('the correct inline config for specifying autolink domains inside Drupal exists', async function() {
-    await page.addScriptTag({
-      type: 'module',
-      path: path.join(
-        __dirname,
-        'fixtures/test-analytics.drupal-config.data.js',
-      ),
-    });
-
-    await page.waitFor(3000); // wait a few seconds before checking the data we need is available on the page
-
-    const config = await page.evaluate(() => {
-      return window.drupalSettings.google_analytics.trackCrossDomains[0];
-    });
-
-    expect(config).toBe('nytimes.com');
-  }, 120000);
-
-  test('allow Drupal to configure which domains get configured / tracked by autolink.', async function() {
-    await page.addScriptTag({
-      type: 'module',
-      path: path.join(
-        __dirname,
-        'fixtures/test-analytics.drupal-config.data.js',
-      ),
-    });
-
-    await renderWC(
-      'bolt-button',
-      `<bolt-button style="display: inline-block;" url="https://www.nytimes.com">External URL - Normally Untracked But Now Tracked Domain</bolt-button>`,
-      page,
-    );
-
-    await page.click('bolt-button');
-    const currentUrl = await page.url();
-
-    expect(currentUrl).toContain('_ga');
-  }, 120000);
-});
diff --git a/packages/components/bolt-carousel/README.md b/packages/components/bolt-carousel/README.md
index 7ef2bdff7f..1fcd7b885c 100644
--- a/packages/components/bolt-carousel/README.md
+++ b/packages/components/bolt-carousel/README.md
@@ -8,7 +8,7 @@ Under the hood, the `<bolt-carousel>` component uses the excellent <a href="http
 yarn add @bolt/components-carousel
 ```
 
-<h2 class="c-bds-docs__heading-fragment c-bolt-headline c-bolt-headline--bold c-bolt-headline--xxlarge c-bolt-headline--link" id="usage"><bolt-link url="#usage" is-headline>Usage</bolt-link></h2>
+<h2 class="c-bds-docs__heading-fragment c-bolt-headline c-bolt-headline--bold c-bolt-headline--xxlarge c-bolt-headline--link" id="usage"><a href="#usage">Usage</a></h2>
 <details open>
   <summary><strong>Via Web Component</strong></summary>
   <section>
diff --git a/packages/components/bolt-form/src/inputs/form-button.twig b/packages/components/bolt-form/src/inputs/form-button.twig
index a529d3fada..355c05c4a6 100644
--- a/packages/components/bolt-form/src/inputs/form-button.twig
+++ b/packages/components/bolt-form/src/inputs/form-button.twig
@@ -17,24 +17,32 @@
  */
 #}
 
-{% set attributes = create_attribute(attributes | default({})) %}
-
-{% set classes = [
-  "c-bolt-button",
-  "c-bolt-button--center",
-  "c-bolt-button--medium",
-  "c-bolt-button--primary",
-  width is not empty ? "c-bolt-button--" ~ width : "",
-] %}
-
-<button {{ attributes.addClass(classes) }}>
-  {% if icon %}
-    <span class="c-bolt-button__icon">
-      {% include "@bolt-elements-icon/icon.twig" with icon only %}
-    </span>
+{% set _button_attributes = attributes|default({}) %}
+
+{% set _button_attributes = _button_attributes|merge({ type: 'button' }) %}
+
+{% set _button_props = {
+  content: text,
+  attributes: _button_attributes,
+} %}
+
+{% if width is not empty %}
+  {% if width == 'full' %}
+    {% set _display = 'block' %}
+  {% elseif width == 'full@small' %}
+    {% set _display = 'inline@from-small' %}
   {% endif %}
 
-  <span class="c-bolt-button__item">
-    {{ text }}
-  </span>
-</button>
+  {% set _button_props = _button_props|merge({ display: _display }) %}
+{% endif %}
+
+
+{% if icon %}
+  {% set _icon_rendered %}
+    {% include '@bolt-elements-icon/icon.twig' with icon only %}
+  {% endset %}
+
+  {% set _button_props = _button_props|merge({ icon_before: _icon_rendered }) %}
+{% endif %}
+
+{% include '@bolt-elements-button/button.twig' with _button_props only %}
diff --git a/packages/components/bolt-search-filter/search-filter.twig b/packages/components/bolt-search-filter/search-filter.twig
index 879e712ad6..a7cf755987 100644
--- a/packages/components/bolt-search-filter/search-filter.twig
+++ b/packages/components/bolt-search-filter/search-filter.twig
@@ -14,16 +14,19 @@
 <bolt-{{ componentName }} bolt-component>
   <div {{ attributes.addClass(classes) }}>
     <div class="{{ "#{baseClass}__trigger" }}">
-      {% include "@bolt-components-button/button.twig" with {
-        "text": "Close search filter"|t,
-        "url": "#" ~ panelId,
-        "size": "xsmall",
-        "style": "primary",
-        "border_radius": "full",
-        "iconOnly": true,
-        "icon": {
-          "name": "more",
-          "size": "medium"
+      {% set _more_icon %}
+        {% include '@bolt-components-icon/icon.twig' with {
+          name: 'more',
+          size: 'medium'
+        } only %}
+      {% endset %}
+      {% include '@bolt-elements-button/button.twig' with {
+        content: 'Close search filter'|t,
+        border_radius: 'full',
+        size: 'xsmall',
+        icon_only: _more_icon,
+        attributes: {
+          href: "#" ~ panelId,
         }
       } only %}
     </div>
@@ -67,16 +70,20 @@
       </div>
 
       <div class="{{ "#{baseClass}__panel-controls #{baseClass}__panel-controls--close" }}">
-        {% include "@bolt-components-button/button.twig" with {
-          "text": "Close search filter"|t,
-          "url": "#!",
-          "size": "xsmall",
-          "style": "text",
-          "border_radius": "full",
-          "iconOnly": true,
-          "icon": {
-            "name": "close",
-            "size": "medium"
+        {% set _close_icon %}
+          {% include '@bolt-components-icon/icon.twig' with {
+            name: 'more',
+            size: 'medium'
+          } only %}
+        {% endset %}
+        {% include '@bolt-elements-button/button.twig' with {
+          content: 'Close search filter'|t,
+          border_radius: 'full',
+          size: 'xsmall',
+          hierarchy: 'transparent',
+          icon_only: _close_icon,
+          attributes: {
+            href: "#!",
           }
         } only %}
       </div>
diff --git a/packages/components/bolt-tooltip/src/tooltip.twig b/packages/components/bolt-tooltip/src/tooltip.twig
index 85ed68caf2..3faa6bee14 100644
--- a/packages/components/bolt-tooltip/src/tooltip.twig
+++ b/packages/components/bolt-tooltip/src/tooltip.twig
@@ -74,14 +74,20 @@
         {{ trigger.text }}
       {% endif %}
     {% elseif trigger.type == "button" %}
-      {% include "@bolt-components-button/button.twig" with {
-        text: trigger.text,
-        icon: {
-          name: trigger.icon.name,
+      {% set trigger_icon %}
+        {% include "@bolt-components-icon/icon.twig" with {
+          name:trigger.icon.name,
           size: trigger.icon.size,
-          position: "before",
-        },
-        style: "secondary",
+        } only %}
+      {% endset %}
+
+      {% include '@bolt-elements-button/button.twig' with {
+        content: trigger.text,
+        hierarchy: 'secondary',
+        icon_before: trigger_icon,
+        attributes: {
+          type: 'button'
+        }
       } only %}
     {# End adapter for old trigger data #}
 
diff --git a/packages/global/styles/05-objects/objects-flag/src/flag.twig b/packages/global/styles/05-objects/objects-flag/src/flag.twig
index 8ddad4347f..4d63fb6c7d 100644
--- a/packages/global/styles/05-objects/objects-flag/src/flag.twig
+++ b/packages/global/styles/05-objects/objects-flag/src/flag.twig
@@ -60,10 +60,11 @@
         {% endset %}
 
         {% if url %}
-          {% include "@bolt-components-link/link.twig" with {
-            display: "block",
-            url: url,
-            text: figureContent
+          {% include "@bolt-elements-text-link/text-link.twig" with {
+            content: figureContent,
+            attributes: {
+              href: url,
+            }
           } only %}
         {% else %}
           {{ figureContent }}
diff --git a/packages/twig-integration/twig-renderer-endpoint/__snapshots__/index.test.js.snap b/packages/twig-integration/twig-renderer-endpoint/__snapshots__/index.test.js.snap
index 2beb2d122b..bf950eab97 100644
--- a/packages/twig-integration/twig-renderer-endpoint/__snapshots__/index.test.js.snap
+++ b/packages/twig-integration/twig-renderer-endpoint/__snapshots__/index.test.js.snap
@@ -1,37 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Test the Bolt Twig Renderer API renders attributes on the button component correctly 1`] = `
-<bolt-button class="u-bolt-margin-bottom-large">
-  <button class="c-bolt-button c-bolt-button--medium c-bolt-button--primary c-bolt-button--border-radius-regular c-bolt-button--center">
-    <ssr-keep for="bolt-button"
-              class="c-bolt-button__item"
-    >
-      Hello world!
-    </ssr-keep>
-  </button>
-</bolt-button>
+<button class="u-bolt-margin-bottom-large e-bolt-button"
+        type="button"
+>
+  Hello world!
+</button>
 `;
 
 exports[`Test the Bolt Twig Renderer API renders the button component correctly 1`] = `
-<bolt-button>
-  <button class="c-bolt-button c-bolt-button--medium c-bolt-button--primary c-bolt-button--border-radius-regular c-bolt-button--center">
-    <ssr-keep for="bolt-button"
-              class="c-bolt-button__item"
-    >
-      Hello world!2
-    </ssr-keep>
-  </button>
-</bolt-button>
+<button type="button"
+        class="e-bolt-button"
+>
+  Hello world!2
+</button>
 `;
 
 exports[`Test the Bolt Twig Renderer API renders the secondary button correctly 1`] = `
-<bolt-button hierarchy="secondary">
-  <button class="c-bolt-button c-bolt-button--medium c-bolt-button--secondary c-bolt-button--border-radius-regular c-bolt-button--center">
-    <ssr-keep for="bolt-button"
-              class="c-bolt-button__item"
-    >
-      Secondary Button!
-    </ssr-keep>
-  </button>
-</bolt-button>
+<button type="button"
+        class="e-bolt-button e-bolt-button--secondary"
+>
+  Secondary Button!
+</button>
 `;
diff --git a/packages/twig-integration/twig-renderer-endpoint/index.test.js b/packages/twig-integration/twig-renderer-endpoint/index.test.js
index c235bf243e..2f8579e11f 100644
--- a/packages/twig-integration/twig-renderer-endpoint/index.test.js
+++ b/packages/twig-integration/twig-renderer-endpoint/index.test.js
@@ -1,10 +1,13 @@
 const { render } = require('@bolt/twig-renderer');
-const buttonTemplate = '@bolt-components-button/button.twig';
+const buttonTemplate = '@bolt-elements-button/button.twig';
 
 describe('Test the Bolt Twig Renderer API', () => {
   test('renders a basic button', async () => {
     const buttonData = {
-      text: 'Hello world!',
+      content: 'Hello world!',
+      attributes: {
+        type: 'button',
+      },
     };
     const result = await render(buttonTemplate, buttonData);
 
@@ -18,8 +21,11 @@ describe('Test the Bolt Twig Renderer API', () => {
   });
 
   test('handles non-existent template path', async () => {
-    const result = await render('@bolt-components-button/button2.twig', {
-      text: 'Hello world 2!',
+    const result = await render('@bolt-elements-button/button2.twig', {
+      content: 'Hello world 2!',
+      attributes: {
+        type: 'button',
+      },
     });
 
     expect(result.ok).toEqual(false);
@@ -27,7 +33,10 @@ describe('Test the Bolt Twig Renderer API', () => {
 
   test('renders the button component correctly', async () => {
     const result = await render(buttonTemplate, {
-      text: 'Hello world!2',
+      content: 'Hello world!2',
+      attributes: {
+        type: 'button',
+      },
     });
 
     expect(result.html).toMatchSnapshot();
@@ -35,9 +44,10 @@ describe('Test the Bolt Twig Renderer API', () => {
 
   test('renders attributes on the button component correctly', async () => {
     const result = await render(buttonTemplate, {
-      text: 'Hello world!',
+      content: 'Hello world!',
       attributes: {
         class: ['u-bolt-margin-bottom-large'],
+        type: 'button',
       },
     });
 
@@ -46,8 +56,11 @@ describe('Test the Bolt Twig Renderer API', () => {
 
   test('renders the secondary button correctly', async () => {
     const result = await render(buttonTemplate, {
-      text: 'Secondary Button!',
-      style: 'secondary',
+      content: 'Secondary Button!',
+      hierarchy: 'secondary',
+      attributes: {
+        type: 'button',
+      },
     });
 
     expect(result.html).toMatchSnapshot();