diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/table/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/table/Examples.js
index 5429ac7e567..fb3227bb917 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/table/Examples.js
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/table/Examples.js
@@ -19,21 +19,15 @@ export const TableVariantBasic = () => (
         Header
       </Th>
       <Th scope="col" sortable reversed>
-        <Button
-          variant="tertiary"
-          icon="arrow-down"
+        <Th.SortButton
           text="Sortable"
           title="Sort table column"
-          wrap="true"
         />
       </Th>
       <Th scope="col" align="right" sortable active>
-        <Button
-          variant="tertiary"
-          icon="arrow-down"
+        <Th.SortButton
           text="Active"
           title="Sort table column"
-          wrap="true"
         />
       </Th>
     </Tr>
@@ -80,21 +74,15 @@ export const TableClassHelpers = () => (
         .dnb-table__th
       </th>
       <th scope="col" className="dnb-table__th dnb-table--sortable dnb-table--reversed">
-        <Button
-          variant="tertiary"
-          icon="arrow-down"
+        <Th.SortButton
           text="dnb-table--reversed"
           title="dnb-table__th dnb-table--sortable dnb-table--reversed"
-          wrap="true"
         />
       </th>
       <th scope="col" className="dnb-table__th dnb-table--sortable dnb-table--active">
-        <Button
-          variant="tertiary"
-          icon="arrow-down"
+        <Th.SortButton
           text="dnb-table--active"
           title="dnb-table__th dnb-table--sortable dnb-table--active"
-          wrap="true"
         />
       </th>
     </tr>
@@ -125,21 +113,15 @@ export const TableLongHeader = () => (
         Static long header senectus ornare convallis ut at  erat imperdiet commodo
       </Th>
       <Th scope="col" className="dnb-table--sortable dnb-table--reversed">
-        <Button
-          variant="tertiary"
-          icon="arrow-down"
+        <Th.SortButton
           text="Sortable long header ridiculus laoreet turpis netus at vitae"
           title="Sort table column"
-          wrap="true"
         />
       </Th>
       <Th scope="col" align="right" className="dnb-table--sortable dnb-table--active">
-        <Button
-          variant="tertiary"
-          icon="arrow-down"
+        <Th.SortButton
           text="Active and right aligned long header ridiculus laoreet turpis netus at vitae"
           title="Sort table column"
-          wrap="true"
         />
       </Th>
     </Tr>
@@ -185,21 +167,15 @@ export const TableSticky = () => (
         Header
       </Th>
       <Th scope="col" className="dnb-table--sortable dnb-table--reversed">
-        <Button
-          variant="tertiary"
-          icon="arrow-down"
+        <Th.SortButton
           text="Sortable"
           title="Sort table column"
-          wrap="true"
         />
       </Th>
       <Th scope="col" className="dnb-table--sortable dnb-table--active">
-        <Button
-          variant="tertiary"
-          icon="arrow-down"
+        <Th.SortButton
           text="Active"
           title="Sort table column"
-          wrap="true"
         />
       </Th>
     </Tr>
diff --git a/packages/dnb-eufemia/src/components/table/TableSortButton.tsx b/packages/dnb-eufemia/src/components/table/TableSortButton.tsx
new file mode 100644
index 00000000000..047750b32ff
--- /dev/null
+++ b/packages/dnb-eufemia/src/components/table/TableSortButton.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import classnames from 'classnames'
+import Button from '../button/Button'
+
+export default function TableSortButton({ className = null, ...props }) {
+  return (
+    <Button
+      className={classnames('dnb-table__sort-button', className)}
+      variant="tertiary"
+      icon="arrow-down"
+      wrap
+      {...props}
+    />
+  )
+}
diff --git a/packages/dnb-eufemia/src/components/table/TableTh.tsx b/packages/dnb-eufemia/src/components/table/TableTh.tsx
index 780542d4a77..0f51bfd53d5 100644
--- a/packages/dnb-eufemia/src/components/table/TableTh.tsx
+++ b/packages/dnb-eufemia/src/components/table/TableTh.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
+import TableSortButton from './TableSortButton'
 
 export type TableThProps = {
   /**
@@ -32,10 +33,10 @@ export type TableThProps = {
   noWrap?: boolean
 }
 
-const Th = (
+export default function Th(
   componentProps: TableThProps &
     React.ThHTMLAttributes<HTMLTableCellElement>
-) => {
+) {
   const {
     className,
     children,
@@ -64,4 +65,4 @@ const Th = (
   )
 }
 
-export default Th
+Th.SortButton = TableSortButton
diff --git a/packages/dnb-eufemia/src/components/table/__tests__/Table.screenshot.test.tsx b/packages/dnb-eufemia/src/components/table/__tests__/Table.screenshot.test.tsx
index 6cc75ff09ad..804e45f6de9 100644
--- a/packages/dnb-eufemia/src/components/table/__tests__/Table.screenshot.test.tsx
+++ b/packages/dnb-eufemia/src/components/table/__tests__/Table.screenshot.test.tsx
@@ -31,7 +31,7 @@ describe('Table screenshot', () => {
   it('have to match the default choice of table styles', async () => {
     const screenshot = await testPageScreenshot({
       style: {
-        width: '40rem',
+        width: '50rem',
       },
       selector: '[data-visual-test="table-default"] .dnb-table',
     })
diff --git a/packages/dnb-eufemia/src/components/table/__tests__/TableTh.test.tsx b/packages/dnb-eufemia/src/components/table/__tests__/TableTh.test.tsx
index 9872f254bb7..d6051a3b6bc 100644
--- a/packages/dnb-eufemia/src/components/table/__tests__/TableTh.test.tsx
+++ b/packages/dnb-eufemia/src/components/table/__tests__/TableTh.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { render } from '@testing-library/react'
 import TableTh from '../TableTh'
+import TableSortButton from '../TableSortButton'
 
 describe('TableTh', () => {
   it('should contain children content', () => {
@@ -131,4 +132,8 @@ describe('TableTh', () => {
       'custom-class',
     ])
   })
+
+  it('should have Th.AccordionContent', () => {
+    expect(TableTh.SortButton).toBe(TableSortButton)
+  })
 })
diff --git a/packages/dnb-eufemia/src/components/table/__tests__/__snapshots__/Table.test.tsx.snap b/packages/dnb-eufemia/src/components/table/__tests__/__snapshots__/Table.test.tsx.snap
index b3bdc17d9f5..af469c08534 100644
--- a/packages/dnb-eufemia/src/components/table/__tests__/__snapshots__/Table.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/table/__tests__/__snapshots__/Table.test.tsx.snap
@@ -13,10 +13,6 @@ exports[`Table scss have to match default theme snapshot 1`] = `
 /*
  * Utilities
  */
-/*
-* Button mixins
-*
-*/
 .dnb-table {
   /* stylelint-disable-next-line */
   /* stylelint-disable-next-line */ }
@@ -70,331 +66,6 @@ exports[`Table scss have to match default theme snapshot 1`] = `
     bottom: -1px;
     height: 1px;
     background-color: var(--color-black-8); }
-  .dnb-table > thead > tr > th.dnb-table--sortable,
-  .dnb-table .dnb-table__th.dnb-table--sortable {
-    color: var(--color-emerald-green); }
-    .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor,
-    .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button,
-    .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor,
-    .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button {
-      position: relative;
-      z-index: 1;
-      align-items: flex-end;
-      box-shadow: none;
-      line-height: var(--line-height-basis);
-      margin: 0;
-      padding: 0;
-      padding-right: 0.5rem;
-      color: inherit;
-      font-weight: var(--font-weight-medium);
-      text-align: inherit;
-      font-size: inherit; }
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor > .dnb-icon,
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button > .dnb-icon,
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor > .dnb-icon,
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button > .dnb-icon {
-        opacity: 0;
-        transition: opacity 200ms ease-out, transform 500ms ease-out; }
-        [data-visual-test-wrapper] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor > .dnb-icon, [data-visual-test-wrapper]
-        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button > .dnb-icon, [data-visual-test-wrapper]
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor > .dnb-icon, [data-visual-test-wrapper]
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button > .dnb-icon {
-          transition: none; }
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor .dnb-button__text,
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button .dnb-button__text,
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor .dnb-button__text,
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button .dnb-button__text {
-        margin: 0;
-        font-size: inherit; }
-        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor .dnb-button__text::after,
-        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button .dnb-button__text::after,
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor .dnb-button__text::after,
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button .dnb-button__text::after {
-          right: 1rem; }
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor .dnb-button__icon,
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button .dnb-button__icon,
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor .dnb-button__icon,
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button .dnb-button__icon {
-        align-self: flex-end;
-        margin-top: auto;
-        margin-bottom: 0.25rem; }
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:not(:focus) .dnb-button__text::after,
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:not(:focus) .dnb-button__text::after,
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:not(:focus) .dnb-button__text::after,
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:not(:focus) .dnb-button__text::after {
-        opacity: 1;
-        color: var(--color-emerald-green); }
-      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:hover[disabled], html:not([data-whatintent='touch'])
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:hover[disabled], html:not([data-whatintent='touch'])
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:hover[disabled], html:not([data-whatintent='touch'])
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:hover[disabled] {
-        cursor: not-allowed; }
-      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:hover:not([disabled]), html:not([data-whatintent='touch'])
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:hover:not([disabled]), html:not([data-whatintent='touch'])
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:hover:not([disabled]), html:not([data-whatintent='touch'])
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:hover:not([disabled]) {
-        color: var(--color-sea-green); }
-        html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:hover:not([disabled]):not(:focus) .dnb-icon, html:not([data-whatintent='touch'])
-        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:hover:not([disabled]):not(:focus) .dnb-icon, html:not([data-whatintent='touch'])
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:hover:not([disabled]):not(:focus) .dnb-icon, html:not([data-whatintent='touch'])
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:hover:not([disabled]):not(:focus) .dnb-icon {
-          opacity: 1; }
-        html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:hover:not([disabled]) .dnb-button__text::after, html:not([data-whatintent='touch'])
-        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:hover:not([disabled]) .dnb-button__text::after, html:not([data-whatintent='touch'])
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:hover:not([disabled]) .dnb-button__text::after, html:not([data-whatintent='touch'])
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:hover:not([disabled]) .dnb-button__text::after {
-          opacity: 0; }
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:focus[disabled],
-      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:focus[disabled],
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:focus[disabled],
-      html:not([data-whatintent='touch'])
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:focus[disabled],
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:focus[disabled],
-      html:not([data-whatintent='touch'])
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:focus[disabled],
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:focus[disabled],
-      html:not([data-whatintent='touch'])
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:focus[disabled] {
-        cursor: not-allowed; }
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:focus:not([disabled])::before,
-      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:focus:not([disabled])::before,
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:focus:not([disabled])::before,
-      html:not([data-whatintent='touch'])
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:focus:not([disabled])::before,
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:focus:not([disabled])::before,
-      html:not([data-whatintent='touch'])
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:focus:not([disabled])::before,
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:focus:not([disabled])::before,
-      html:not([data-whatintent='touch'])
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:focus:not([disabled])::before {
-        content: '';
-        position: absolute;
-        top: -0.5rem;
-        bottom: -0.5rem;
-        left: -1rem;
-        right: 0.5rem; }
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:focus:not([disabled])::before,
-      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:focus:not([disabled])::before,
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:focus:not([disabled])::before,
-      html:not([data-whatintent='touch'])
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:focus:not([disabled])::before,
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:focus:not([disabled])::before,
-      html:not([data-whatintent='touch'])
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:focus:not([disabled])::before,
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:focus:not([disabled])::before,
-      html:not([data-whatintent='touch'])
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:focus:not([disabled])::before {
-        right: -0.5rem; }
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:focus:not([disabled]) .dnb-icon,
-      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:focus:not([disabled]) .dnb-icon,
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:focus:not([disabled]) .dnb-icon,
-      html:not([data-whatintent='touch'])
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:focus:not([disabled]) .dnb-icon,
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:focus:not([disabled]) .dnb-icon,
-      html:not([data-whatintent='touch'])
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:focus:not([disabled]) .dnb-icon,
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:focus:not([disabled]) .dnb-icon,
-      html:not([data-whatintent='touch'])
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:focus:not([disabled]) .dnb-icon {
-        opacity: 1; }
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active[disabled],
-      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active[disabled],
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active[disabled],
-      html:not([data-whatintent='touch'])
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active[disabled],
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active[disabled],
-      html:not([data-whatintent='touch'])
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active[disabled],
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active[disabled],
-      html:not([data-whatintent='touch'])
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active[disabled] {
-        cursor: not-allowed; }
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled]),
-      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled]),
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled]),
-      html:not([data-whatintent='touch'])
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled]),
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled]),
-      html:not([data-whatintent='touch'])
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled]),
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled]),
-      html:not([data-whatintent='touch'])
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled]) {
-        color: var(--color-emerald-green); }
-        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
-        html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
-        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
-        html:not([data-whatintent='touch'])
-        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
-        html:not([data-whatintent='touch'])
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
-        html:not([data-whatintent='touch'])
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before {
-          content: '';
-          position: absolute;
-          z-index: 1;
-          top: 0;
-          left: -0.5rem;
-          bottom: 0;
-          right: -0.5rem;
-          height: inherit;
-          border-radius: inherit;
-          outline: none; }
-          html[data-whatinput='mouse'] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='mouse']
-          html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='mouse']
-          .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='mouse']
-          html:not([data-whatintent='touch'])
-          .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='mouse']
-          .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='mouse']
-          html:not([data-whatintent='touch'])
-          .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='mouse']
-          .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='mouse']
-          html:not([data-whatintent='touch'])
-          .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before {
-            --border-color: var(--color-emerald-green);
-            box-shadow: 0 0 0 0.125rem var(--border-color);
-            border-color: transparent; }
-            @media screen and (-ms-high-contrast: none) {
-              html[data-whatinput='mouse'] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='mouse']
-              html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='mouse']
-              .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='mouse']
-              html:not([data-whatintent='touch'])
-              .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='mouse']
-              .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='mouse']
-              html:not([data-whatintent='touch'])
-              .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='mouse']
-              .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='mouse']
-              html:not([data-whatintent='touch'])
-              .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before {
-                box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
-        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
-        html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
-        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
-        html:not([data-whatintent='touch'])
-        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
-        html:not([data-whatintent='touch'])
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
-        html:not([data-whatintent='touch'])
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before {
-          content: '';
-          position: absolute;
-          z-index: 1;
-          top: 0;
-          left: -0.5rem;
-          bottom: 0;
-          right: -0.5rem;
-          height: inherit;
-          border-radius: inherit;
-          outline: none; }
-          html[data-whatinput='touch'] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='touch']
-          html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='touch']
-          .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='touch']
-          html:not([data-whatintent='touch'])
-          .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='touch']
-          .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='touch']
-          html:not([data-whatintent='touch'])
-          .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='touch']
-          .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='touch']
-          html:not([data-whatintent='touch'])
-          .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before {
-            --border-color: var(--color-emerald-green);
-            box-shadow: 0 0 0 0.125rem var(--border-color);
-            border-color: transparent; }
-            @media screen and (-ms-high-contrast: none) {
-              html[data-whatinput='touch'] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='touch']
-              html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='touch']
-              .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='touch']
-              html:not([data-whatintent='touch'])
-              .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='touch']
-              .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='touch']
-              html:not([data-whatintent='touch'])
-              .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before, html[data-whatinput='touch']
-              .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before, html[data-whatinput='touch']
-              html:not([data-whatintent='touch'])
-              .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before {
-                box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
-        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
-        html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
-        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
-        html:not([data-whatintent='touch'])
-        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
-        html:not([data-whatintent='touch'])
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
-        html:not([data-whatintent='touch'])
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before {
-          content: '';
-          position: absolute;
-          top: -0.5rem;
-          bottom: -0.5rem;
-          left: -1rem;
-          right: 0.5rem; }
-        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
-        html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
-        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
-        html:not([data-whatintent='touch'])
-        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
-        html:not([data-whatintent='touch'])
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:active:not([disabled])::before,
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before,
-        html:not([data-whatintent='touch'])
-        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:active:not([disabled])::before {
-          right: -0.5rem; }
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-anchor:hover:focus:not(:active) .dnb-button__text::after,
-      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-button:hover:focus:not(:active) .dnb-button__text::after,
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-anchor:hover:focus:not(:active) .dnb-button__text::after,
-      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-button:hover:focus:not(:active) .dnb-button__text::after {
-        visibility: hidden; }
-  .dnb-table > thead > tr > th.dnb-table--active .dnb-anchor:not(:hover) .dnb-button__text::after,
-  .dnb-table > thead > tr > th.dnb-table--active .dnb-button:not(:hover) .dnb-button__text::after,
-  .dnb-table .dnb-table__th.dnb-table--active .dnb-anchor:not(:hover) .dnb-button__text::after,
-  .dnb-table .dnb-table__th.dnb-table--active .dnb-button:not(:hover) .dnb-button__text::after {
-    opacity: 0; }
-  .dnb-table > thead > tr > th.dnb-table--active .dnb-anchor .dnb-icon,
-  .dnb-table > thead > tr > th.dnb-table--active .dnb-button .dnb-icon,
-  .dnb-table .dnb-table__th.dnb-table--active .dnb-anchor .dnb-icon,
-  .dnb-table .dnb-table__th.dnb-table--active .dnb-button .dnb-icon {
-    opacity: 1; }
-  html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--active .dnb-anchor:hover[disabled], html:not([data-whatintent='touch'])
-  .dnb-table > thead > tr > th.dnb-table--active .dnb-button:hover[disabled], html:not([data-whatintent='touch'])
-  .dnb-table .dnb-table__th.dnb-table--active .dnb-anchor:hover[disabled], html:not([data-whatintent='touch'])
-  .dnb-table .dnb-table__th.dnb-table--active .dnb-button:hover[disabled] {
-    cursor: not-allowed; }
-  html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--active .dnb-anchor:hover:not([disabled]) .dnb-button__text::after, html:not([data-whatintent='touch'])
-  .dnb-table > thead > tr > th.dnb-table--active .dnb-button:hover:not([disabled]) .dnb-button__text::after, html:not([data-whatintent='touch'])
-  .dnb-table .dnb-table__th.dnb-table--active .dnb-anchor:hover:not([disabled]) .dnb-button__text::after, html:not([data-whatintent='touch'])
-  .dnb-table .dnb-table__th.dnb-table--active .dnb-button:hover:not([disabled]) .dnb-button__text::after {
-    color: var(--color-sea-green);
-    opacity: 1; }
-  .dnb-table > thead > tr > th.dnb-table--active .dnb-anchor:hover:focus:not(:active) .dnb-button__text::after,
-  .dnb-table > thead > tr > th.dnb-table--active .dnb-button:hover:focus:not(:active) .dnb-button__text::after,
-  .dnb-table .dnb-table__th.dnb-table--active .dnb-anchor:hover:focus:not(:active) .dnb-button__text::after,
-  .dnb-table .dnb-table__th.dnb-table--active .dnb-button:hover:focus:not(:active) .dnb-button__text::after {
-    visibility: visible; }
-  html[data-whatinput='keyboard']
-.dnb-table >
-thead > tr > th.dnb-table--active .dnb-anchor:hover:focus .dnb-button__text::after, html[data-whatinput='keyboard']
-  .dnb-table >
-thead > tr > th.dnb-table--active .dnb-button:hover:focus .dnb-button__text::after, html[data-whatinput='keyboard']
-  .dnb-table .dnb-table__th.dnb-table--active .dnb-anchor:hover:focus .dnb-button__text::after, html[data-whatinput='keyboard']
-  .dnb-table .dnb-table__th.dnb-table--active .dnb-button:hover:focus .dnb-button__text::after {
-    visibility: hidden; }
-  .dnb-table > thead > tr > th.dnb-table--reversed .dnb-anchor .dnb-icon,
-  .dnb-table > thead > tr > th.dnb-table--reversed .dnb-button .dnb-icon,
-  .dnb-table .dnb-table__th.dnb-table--reversed .dnb-anchor .dnb-icon,
-  .dnb-table .dnb-table__th.dnb-table--reversed .dnb-button .dnb-icon {
-    transform: rotate(180deg);
-    transform-origin: 50% 50%; }
-  .dnb-table > thead > tr > th.dnb-table--no-wrap,
-  .dnb-table > tbody > tr > th.dnb-table--no-wrap,
-  .dnb-table .dnb-table__th.dnb-table--no-wrap {
-    white-space: nowrap; }
 "
 `;
 
@@ -466,6 +137,10 @@ exports[`Table scss have to match snapshot 1`] = `
 * Table component
 *
 */
+/*
+* Button mixins
+*
+*/
 .dnb-table {
   display: table;
   table-layout: auto;
@@ -548,6 +223,223 @@ exports[`Table scss have to match snapshot 1`] = `
     font-size: var(--font-size-x-small); }
   .dnb-table.dnb-skeleton > * {
     -webkit-text-fill-color: var(--skeleton-color); }
+  .dnb-table > thead > tr > th.dnb-table--sortable,
+  .dnb-table .dnb-table__th.dnb-table--sortable {
+    color: var(--color-emerald-green); }
+    .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button,
+    .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button {
+      position: relative;
+      z-index: 1;
+      align-items: flex-end;
+      box-shadow: none;
+      line-height: var(--line-height-basis);
+      margin: 0;
+      padding: 0;
+      padding-right: 0.5rem;
+      color: inherit;
+      font-weight: var(--font-weight-medium);
+      text-align: inherit;
+      font-size: inherit; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button > .dnb-icon,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button > .dnb-icon {
+        opacity: 0;
+        transition: opacity 200ms ease-out, transform 500ms ease-out; }
+        [data-visual-test-wrapper] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button > .dnb-icon, [data-visual-test-wrapper]
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button > .dnb-icon {
+          transition: none; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text {
+        margin: 0;
+        font-size: inherit; }
+        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text::after,
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__text::after {
+          right: 1rem; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__icon,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button .dnb-button__icon {
+        align-self: flex-end;
+        margin-top: auto;
+        margin-bottom: 0.25rem; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:not(:focus) .dnb-button__text::after,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:not(:focus) .dnb-button__text::after {
+        opacity: 1;
+        color: var(--color-emerald-green); }
+      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover[disabled], html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover[disabled] {
+        cursor: not-allowed; }
+      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]), html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]) {
+        color: var(--color-sea-green); }
+        html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]):not(:focus) .dnb-icon, html:not([data-whatintent='touch'])
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]):not(:focus) .dnb-icon {
+          opacity: 1; }
+        html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text::after, html:not([data-whatintent='touch'])
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text::after {
+          opacity: 0; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled],
+      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled],
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled],
+      html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus[disabled] {
+        cursor: not-allowed; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before,
+      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before,
+      html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before {
+        content: '';
+        position: absolute;
+        top: -0.5rem;
+        bottom: -0.5rem;
+        left: -1rem;
+        right: 0.5rem; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before,
+      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before,
+      html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled])::before {
+        right: -0.5rem; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon,
+      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon,
+      html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:focus:not([disabled]) .dnb-icon {
+        opacity: 1; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],
+      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled],
+      html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active[disabled] {
+        cursor: not-allowed; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]),
+      html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]),
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]),
+      html:not([data-whatintent='touch'])
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled]) {
+        color: var(--color-emerald-green); }
+        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before,
+        html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before,
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before,
+        html:not([data-whatintent='touch'])
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before {
+          content: '';
+          position: absolute;
+          z-index: 1;
+          top: 0;
+          left: -0.5rem;
+          bottom: 0;
+          right: -0.5rem;
+          height: inherit;
+          border-radius: inherit;
+          outline: none; }
+          html[data-whatinput='mouse'] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput='mouse']
+          html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput='mouse']
+          .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput='mouse']
+          html:not([data-whatintent='touch'])
+          .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before {
+            --border-color: var(--color-emerald-green);
+            box-shadow: 0 0 0 0.125rem var(--border-color);
+            border-color: transparent; }
+            @media screen and (-ms-high-contrast: none) {
+              html[data-whatinput='mouse'] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput='mouse']
+              html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput='mouse']
+              .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput='mouse']
+              html:not([data-whatintent='touch'])
+              .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before {
+                box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
+        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before,
+        html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before,
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before,
+        html:not([data-whatintent='touch'])
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before {
+          content: '';
+          position: absolute;
+          z-index: 1;
+          top: 0;
+          left: -0.5rem;
+          bottom: 0;
+          right: -0.5rem;
+          height: inherit;
+          border-radius: inherit;
+          outline: none; }
+          html[data-whatinput='touch'] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput='touch']
+          html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput='touch']
+          .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput='touch']
+          html:not([data-whatintent='touch'])
+          .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before {
+            --border-color: var(--color-emerald-green);
+            box-shadow: 0 0 0 0.125rem var(--border-color);
+            border-color: transparent; }
+            @media screen and (-ms-high-contrast: none) {
+              html[data-whatinput='touch'] .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput='touch']
+              html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput='touch']
+              .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before, html[data-whatinput='touch']
+              html:not([data-whatintent='touch'])
+              .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before {
+                box-shadow: 0 0 0 0.125rem var(--color-emerald-green); } }
+        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before,
+        html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before,
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before,
+        html:not([data-whatintent='touch'])
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before {
+          content: '';
+          position: absolute;
+          top: -0.5rem;
+          bottom: -0.5rem;
+          left: -1rem;
+          right: 0.5rem; }
+        .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before,
+        html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before,
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before,
+        html:not([data-whatintent='touch'])
+        .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:active:not([disabled])::before {
+          right: -0.5rem; }
+      .dnb-table > thead > tr > th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text::after,
+      .dnb-table .dnb-table__th.dnb-table--sortable .dnb-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text::after {
+        visibility: hidden; }
+    .dnb-table > thead > tr > th.dnb-table--sortable[align='right'],
+    .dnb-table .dnb-table__th.dnb-table--sortable[align='right'] {
+      padding-right: 0.5rem; }
+      .dnb-table > thead > tr > th.dnb-table--sortable[align='right'] .dnb-table__sort-button.dnb-button,
+      .dnb-table .dnb-table__th.dnb-table--sortable[align='right'] .dnb-table__sort-button.dnb-button {
+        flex-direction: row-reverse; }
+        .dnb-table > thead > tr > th.dnb-table--sortable[align='right'] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right,
+        .dnb-table .dnb-table__th.dnb-table--sortable[align='right'] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right {
+          padding-right: 0.5rem; }
+          .dnb-table > thead > tr > th.dnb-table--sortable[align='right'] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text,
+          .dnb-table .dnb-table__th.dnb-table--sortable[align='right'] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text {
+            padding-right: 0; }
+            .dnb-table > thead > tr > th.dnb-table--sortable[align='right'] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text::after,
+            .dnb-table .dnb-table__th.dnb-table--sortable[align='right'] .dnb-table__sort-button.dnb-button--tertiary.dnb-button--icon-position-right .dnb-button__text::after {
+              right: 0; }
+  .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:not(:hover) .dnb-button__text::after,
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:not(:hover) .dnb-button__text::after {
+    opacity: 0; }
+  .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button .dnb-icon,
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button .dnb-icon {
+    opacity: 1; }
+  html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled], html:not([data-whatintent='touch'])
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover[disabled] {
+    cursor: not-allowed; }
+  html:not([data-whatintent='touch']) .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text::after, html:not([data-whatintent='touch'])
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:not([disabled]) .dnb-button__text::after {
+    color: var(--color-sea-green);
+    opacity: 1; }
+  .dnb-table > thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text::after,
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus:not(:active) .dnb-button__text::after {
+    visibility: visible; }
+  html[data-whatinput='keyboard']
+.dnb-table >
+thead > tr > th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus .dnb-button__text::after, html[data-whatinput='keyboard']
+  .dnb-table .dnb-table__th.dnb-table--active .dnb-table__sort-button.dnb-button:hover:focus .dnb-button__text::after {
+    visibility: hidden; }
+  .dnb-table > thead > tr > th.dnb-table--reversed .dnb-table__sort-button.dnb-button .dnb-icon,
+  .dnb-table .dnb-table__th.dnb-table--reversed .dnb-table__sort-button.dnb-button .dnb-icon {
+    transform: rotate(180deg);
+    transform-origin: 50% 50%; }
+  .dnb-table > thead > tr > th.dnb-table--no-wrap,
+  .dnb-table > tbody > tr > th.dnb-table--no-wrap,
+  .dnb-table .dnb-table__th.dnb-table--no-wrap {
+    white-space: nowrap; }
 
 .dnb-spacing .dnb-table p,
 .dnb-spacing .dnb-table ul,
diff --git a/packages/dnb-eufemia/src/components/table/__tests__/__snapshots__/table-screenshot-test-tsx-table-screenshot-have-to-match-header-with-wrapped-text-1-c094e.snap.png b/packages/dnb-eufemia/src/components/table/__tests__/__snapshots__/table-screenshot-test-tsx-table-screenshot-have-to-match-header-with-wrapped-text-1-c094e.snap.png
index 6058bf06981..687066277ce 100644
Binary files a/packages/dnb-eufemia/src/components/table/__tests__/__snapshots__/table-screenshot-test-tsx-table-screenshot-have-to-match-header-with-wrapped-text-1-c094e.snap.png and b/packages/dnb-eufemia/src/components/table/__tests__/__snapshots__/table-screenshot-test-tsx-table-screenshot-have-to-match-header-with-wrapped-text-1-c094e.snap.png differ
diff --git a/packages/dnb-eufemia/src/components/table/__tests__/__snapshots__/table-screenshot-test-tsx-table-screenshot-have-to-match-the-default-choice-of-table-styles-1-82372.snap.png b/packages/dnb-eufemia/src/components/table/__tests__/__snapshots__/table-screenshot-test-tsx-table-screenshot-have-to-match-the-default-choice-of-table-styles-1-82372.snap.png
index 490aaaceb14..db19d265403 100644
Binary files a/packages/dnb-eufemia/src/components/table/__tests__/__snapshots__/table-screenshot-test-tsx-table-screenshot-have-to-match-the-default-choice-of-table-styles-1-82372.snap.png and b/packages/dnb-eufemia/src/components/table/__tests__/__snapshots__/table-screenshot-test-tsx-table-screenshot-have-to-match-the-default-choice-of-table-styles-1-82372.snap.png differ
diff --git a/packages/dnb-eufemia/src/components/table/__tests__/__snapshots__/table-screenshot-test-tsx-table-with-skeleton-screenshot-have-to-match-default-table-1-c0fc9.snap.png b/packages/dnb-eufemia/src/components/table/__tests__/__snapshots__/table-screenshot-test-tsx-table-with-skeleton-screenshot-have-to-match-default-table-1-c0fc9.snap.png
index f27c0ff4e4c..017b1b2f99e 100644
Binary files a/packages/dnb-eufemia/src/components/table/__tests__/__snapshots__/table-screenshot-test-tsx-table-with-skeleton-screenshot-have-to-match-default-table-1-c0fc9.snap.png and b/packages/dnb-eufemia/src/components/table/__tests__/__snapshots__/table-screenshot-test-tsx-table-with-skeleton-screenshot-have-to-match-default-table-1-c0fc9.snap.png differ
diff --git a/packages/dnb-eufemia/src/components/table/stories/Table.stories.tsx b/packages/dnb-eufemia/src/components/table/stories/Table.stories.tsx
index aba789a3d90..7a978f3cfd0 100644
--- a/packages/dnb-eufemia/src/components/table/stories/Table.stories.tsx
+++ b/packages/dnb-eufemia/src/components/table/stories/Table.stories.tsx
@@ -9,7 +9,6 @@ import Table from '../Table'
 import Td from '../TableTd'
 import Th from '../TableTh'
 import Tr from '../TableTr'
-import { Button } from '../../'
 import { Provider } from '../../../shared'
 
 export default {
@@ -32,22 +31,10 @@ export const StickyBasicTable = () => {
             Header
           </Th>
           <Th scope="col" reversed sortable>
-            <Button
-              variant="tertiary"
-              icon="arrow-down"
-              text="Sortable"
-              title="Sort table column"
-              wrap="true"
-            />
+            <Th.SortButton text="Sortable" title="Sort table column" />
           </Th>
           <Th scope="col" active sortable>
-            <Button
-              variant="tertiary"
-              icon="arrow-down"
-              text="Active"
-              title="Sort table column"
-              wrap="true"
-            />
+            <Th.SortButton text="Active" title="Sort table column" />
           </Th>
         </Tr>
       </thead>
@@ -114,22 +101,10 @@ export const BasicTable = () => {
               Header
             </Th>
             <Th scope="col" reversed sortable>
-              <Button
-                variant="tertiary"
-                icon="arrow-down"
-                text="Sortable"
-                title="Sort table column"
-                wrap="true"
-              />
+              <Th.SortButton text="Sortable" title="Sort table column" />
             </Th>
             <Th scope="col" align="right" active sortable>
-              <Button
-                variant="tertiary"
-                icon="arrow-down"
-                text="Active"
-                title="Sort table column"
-                wrap="true"
-              />
+              <Th.SortButton text="Active" title="Sort table column" />
             </Th>
           </Tr>
         </thead>
diff --git a/packages/dnb-eufemia/src/components/table/style/themes/table-basis.scss b/packages/dnb-eufemia/src/components/table/style/_table-sort.scss
similarity index 83%
rename from packages/dnb-eufemia/src/components/table/style/themes/table-basis.scss
rename to packages/dnb-eufemia/src/components/table/style/_table-sort.scss
index 55391c3ed05..29afad14a33 100644
--- a/packages/dnb-eufemia/src/components/table/style/themes/table-basis.scss
+++ b/packages/dnb-eufemia/src/components/table/style/_table-sort.scss
@@ -1,4 +1,4 @@
-@import '../../../button/style/themes/button-mixins.scss';
+@import '../../button/style/themes/button-mixins.scss';
 
 @mixin tableFocusRing() {
   &::before {
@@ -11,14 +11,13 @@
   }
 }
 
-@mixin basisTableSortable {
+@mixin sortableTable {
   // sortable
   & > thead > tr > th#{&}--sortable,
   & &__th#{&}--sortable {
     color: var(--color-emerald-green);
 
-    .dnb-anchor,
-    .dnb-button {
+    .dnb-table__sort-button.dnb-button {
       > .dnb-icon {
         opacity: 0;
         transition: opacity 200ms ease-out, transform 500ms ease-out;
@@ -111,11 +110,31 @@
         visibility: hidden;
       }
     }
+
+    &[align='right'] {
+      padding-right: 0.5rem;
+
+      .dnb-table__sort-button.dnb-button {
+        flex-direction: row-reverse;
+
+        &--tertiary.dnb-button--icon-position-right {
+          padding-right: 0.5rem;
+
+          .dnb-button__text {
+            padding-right: 0;
+            &::after {
+              right: 0;
+            }
+          }
+        }
+      }
+    }
   }
+
+  // active
   & > thead > tr > th#{&}--active,
   & &__th#{&}--active {
-    .dnb-anchor,
-    .dnb-button {
+    .dnb-table__sort-button.dnb-button {
       // hide underline
       &:not(:hover) .dnb-button__text::after {
         opacity: 0;
@@ -145,8 +164,7 @@
   }
   & > thead > tr > th#{&}--reversed,
   & &__th#{&}--reversed {
-    .dnb-anchor,
-    .dnb-button {
+    .dnb-table__sort-button.dnb-button {
       .dnb-icon {
         transform: rotate(180deg);
         transform-origin: 50% 50%;
diff --git a/packages/dnb-eufemia/src/components/table/style/_table.scss b/packages/dnb-eufemia/src/components/table/style/_table.scss
index 6ca459bb3e3..dd31700fc9d 100644
--- a/packages/dnb-eufemia/src/components/table/style/_table.scss
+++ b/packages/dnb-eufemia/src/components/table/style/_table.scss
@@ -3,6 +3,8 @@
 *
 */
 
+@import './_table-sort.scss';
+
 .dnb-table {
   display: table;
   table-layout: auto;
@@ -132,6 +134,8 @@
       -webkit-text-fill-color: var(--skeleton-color);
     }
   }
+
+  @include sortableTable();
 }
 
 // Reset Table spacing
diff --git a/packages/dnb-eufemia/src/components/table/style/themes/dnb-table-theme-ui.scss b/packages/dnb-eufemia/src/components/table/style/themes/dnb-table-theme-ui.scss
index 99311775ebd..2f0229bed54 100644
--- a/packages/dnb-eufemia/src/components/table/style/themes/dnb-table-theme-ui.scss
+++ b/packages/dnb-eufemia/src/components/table/style/themes/dnb-table-theme-ui.scss
@@ -4,8 +4,6 @@
 */
 
 @import '../../../../style/themes/imports.scss';
-@import '../../../button/style/themes/button-mixins.scss';
-@import './table-basis.scss';
 
 .dnb-table {
   // Header part
@@ -88,6 +86,4 @@
     height: 1px;
     background-color: var(--color-black-8);
   }
-
-  @include basisTableSortable();
 }