diff --git a/system/core/src/components/Badge.ts b/system/core/src/components/Badge.ts
index 57a8ee2da..7b9c3a7ac 100644
--- a/system/core/src/components/Badge.ts
+++ b/system/core/src/components/Badge.ts
@@ -6,7 +6,7 @@ export const className = 'badge';
 export const fullStyles = css`
   width: max-content;
   font: var(--label);
-  display: grid;
+  display: inline-grid;
   grid-auto-flow: column;
   gap: var(--spacing-l1);
   align-items: center;
diff --git a/system/core/src/components/Table.ts b/system/core/src/components/Table.ts
index c387a6eb0..f56d776f3 100644
--- a/system/core/src/components/Table.ts
+++ b/system/core/src/components/Table.ts
@@ -8,6 +8,10 @@ export interface Props {
   'data-variant'?: 'default' | 'striped';
 }
 
+export interface TableTdProps {
+  'data-cell-type'?: 'button' | 'badge';
+}
+
 export const fullStyles = css`
   text-align: start;
   border-spacing: 0;
@@ -81,6 +85,10 @@ export const fullStyles = css`
     text-align: center;
   }
 
+  & td[data-cell-type='badge'] {
+    padding: calc(var(--spacing-l3) - 1px) var(--spacing-l4);
+  }
+
   /* For reference: https://unused-css.com/blog/css-rounded-table-corners/ */
   & thead > tr:not(:last-child) > th,
   & thead > tr:not(:last-child) > td,
diff --git a/system/core/src/components/Toggle.ts b/system/core/src/components/Toggle.ts
index 4c8f6fa7e..ede69bd5e 100644
--- a/system/core/src/components/Toggle.ts
+++ b/system/core/src/components/Toggle.ts
@@ -2,6 +2,8 @@ import { OptionalKeys, css } from '../utils';
 
 export const element = 'input';
 export const selectors = ['input[type="checkbox"].toggle'];
+export const className = 'toggle';
+
 export interface Props {
   type: 'checkbox';
   'data-size'?: 'small' | 'medium' | 'large';
diff --git a/system/react-css/src/components/Toggle.tsx b/system/react-css/src/components/Toggle.tsx
new file mode 100644
index 000000000..ca4cba59b
--- /dev/null
+++ b/system/react-css/src/components/Toggle.tsx
@@ -0,0 +1,25 @@
+/**
+ * DO NOT EDIT: This file is generated in the post-build step of @tablecheck/tablekit-core
+ * If you need to provide more "structure" to this component move it to the 'structuredComponents' folder
+ */
+import { toggle } from '@tablecheck/tablekit-core';
+import * as React from 'react';
+
+import { getConfigDefault } from '../config';
+
+export type Props = toggle.DefaultedProps &
+  React.InputHTMLAttributes<HTMLInputElement>;
+
+export const Toggle = React.forwardRef<
+  HTMLInputElement,
+  Props & React.InputHTMLAttributes<HTMLInputElement>
+>((props, ref) => (
+  <input
+    {...props}
+    className={`${props.className ?? ''} toggle`}
+    type={props.type ?? (toggle.defaultProps.type as never)}
+    data-size={props['data-size'] ?? getConfigDefault('controlSize')}
+    ref={ref}
+  />
+));
+Toggle.displayName = `Toggle`;
diff --git a/system/react-css/src/index.ts b/system/react-css/src/index.ts
index 660260cf3..3240d067e 100644
--- a/system/react-css/src/index.ts
+++ b/system/react-css/src/index.ts
@@ -59,6 +59,8 @@ export { TextAreaWithPrefix } from './components/TextAreaWithPrefix';
 export type { Props as TextAreaWithPrefixProps } from './components/TextAreaWithPrefix';
 export { TextAreaWithSuffix } from './components/TextAreaWithSuffix';
 export type { Props as TextAreaWithSuffixProps } from './components/TextAreaWithSuffix';
+export { Toggle } from './components/Toggle';
+export type { Props as ToggleProps } from './components/Toggle';
 export {
   AlertCore,
   AlertTitle,
@@ -84,13 +86,15 @@ export { Skeleton } from './structuredComponents/Skeleton';
 export type { Props as SkeletonProps } from './structuredComponents/Skeleton';
 export { Spinner } from './structuredComponents/Spinner';
 export type { Props as SpinnerProps } from './structuredComponents/Spinner';
+export { TableBadgeCell } from './structuredComponents/TableBadgeCell';
+export type { Props as TableBadgeCellProps } from './structuredComponents/TableBadgeCell';
+export { TableButtonCell } from './structuredComponents/TableButtonCell';
+export type { Props as TableButtonCellProps } from './structuredComponents/TableButtonCell';
 export { TextArea } from './structuredComponents/TextArea';
 export type { Props as TextAreaProps } from './structuredComponents/TextArea';
 export {
   useTablekitTheme,
   ThemeProvider
 } from './structuredComponents/ThemeProvider';
-export { Toggle } from './structuredComponents/Toggle';
-export type { Props as ToggleProps } from './structuredComponents/Toggle';
 export { Tooltip } from './structuredComponents/Tooltip';
 export type { Props as TooltipProps } from './structuredComponents/Tooltip';
diff --git a/system/react-css/src/structuredComponents/TableBadgeCell.tsx b/system/react-css/src/structuredComponents/TableBadgeCell.tsx
new file mode 100644
index 000000000..47941ae8f
--- /dev/null
+++ b/system/react-css/src/structuredComponents/TableBadgeCell.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+export type Props = React.InputHTMLAttributes<HTMLTableCellElement>;
+
+/**
+ * A utility component that attaches a `data-cell-type="badge"` attribute to a `td` element.
+ */
+export const TableBadgeCell = React.forwardRef<
+  HTMLTableCellElement,
+  Props & React.HTMLAttributes<HTMLTableCellElement>
+>((props, ref) => <td {...props} data-cell-type="badge" ref={ref} />);
+TableBadgeCell.displayName = 'TableBadgeCell';
diff --git a/system/react-css/src/structuredComponents/TableButtonCell.tsx b/system/react-css/src/structuredComponents/TableButtonCell.tsx
new file mode 100644
index 000000000..09d794a61
--- /dev/null
+++ b/system/react-css/src/structuredComponents/TableButtonCell.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+export type Props = React.InputHTMLAttributes<HTMLTableCellElement>;
+
+/**
+ * A utility component that attaches a `data-cell-type="button"` attribute to a `td` element.
+ */
+export const TableButtonCell = React.forwardRef<
+  HTMLTableCellElement,
+  Props & React.HTMLAttributes<HTMLTableCellElement>
+>((props, ref) => <td {...props} data-cell-type="button" ref={ref} />);
+TableButtonCell.displayName = 'TableButtonCell';
diff --git a/system/react-css/src/structuredComponents/Toggle.tsx b/system/react-css/src/structuredComponents/Toggle.tsx
deleted file mode 100644
index 5f2e1232a..000000000
--- a/system/react-css/src/structuredComponents/Toggle.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { toggle } from '@tablecheck/tablekit-core';
-import * as React from 'react';
-
-export type Props = Omit<toggle.Props, 'type'>;
-
-export const Toggle = React.forwardRef<
-  HTMLInputElement,
-  Props & Omit<React.HTMLAttributes<HTMLInputElement>, 'type'>
->((props, ref) => (
-  <input
-    {...props}
-    ref={ref}
-    type="checkbox"
-    className={`${props.className || ''} toggle`}
-  />
-));
diff --git a/system/react/src/index.ts b/system/react/src/index.ts
index 1d4025ef6..d6cea43cb 100644
--- a/system/react/src/index.ts
+++ b/system/react/src/index.ts
@@ -148,6 +148,10 @@ export { InputStructure } from './structuredComponents/InputStructure';
 export type { Props as InputStructureProps } from './structuredComponents/InputStructure';
 export { Skeleton } from './structuredComponents/Skeleton';
 export type { Props as SkeletonProps } from './structuredComponents/Skeleton';
+export { TableBadgeCell } from './structuredComponents/TableBadgeCell';
+export type { Props as TableBadgeCellProps } from './structuredComponents/TableBadgeCell';
+export { TableButtonCell } from './structuredComponents/TableButtonCell';
+export type { Props as TableButtonCellProps } from './structuredComponents/TableButtonCell';
 export { TextArea } from './structuredComponents/TextArea';
 export type { Props as TextAreaProps } from './structuredComponents/TextArea';
 export { ThemeProvider } from './structuredComponents/ThemeProvider';
diff --git a/system/react/src/structuredComponents/TableBadgeCell.tsx b/system/react/src/structuredComponents/TableBadgeCell.tsx
new file mode 100644
index 000000000..47941ae8f
--- /dev/null
+++ b/system/react/src/structuredComponents/TableBadgeCell.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+export type Props = React.InputHTMLAttributes<HTMLTableCellElement>;
+
+/**
+ * A utility component that attaches a `data-cell-type="badge"` attribute to a `td` element.
+ */
+export const TableBadgeCell = React.forwardRef<
+  HTMLTableCellElement,
+  Props & React.HTMLAttributes<HTMLTableCellElement>
+>((props, ref) => <td {...props} data-cell-type="badge" ref={ref} />);
+TableBadgeCell.displayName = 'TableBadgeCell';
diff --git a/system/react/src/structuredComponents/TableButtonCell.tsx b/system/react/src/structuredComponents/TableButtonCell.tsx
new file mode 100644
index 000000000..09d794a61
--- /dev/null
+++ b/system/react/src/structuredComponents/TableButtonCell.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+export type Props = React.InputHTMLAttributes<HTMLTableCellElement>;
+
+/**
+ * A utility component that attaches a `data-cell-type="button"` attribute to a `td` element.
+ */
+export const TableButtonCell = React.forwardRef<
+  HTMLTableCellElement,
+  Props & React.HTMLAttributes<HTMLTableCellElement>
+>((props, ref) => <td {...props} data-cell-type="button" ref={ref} />);
+TableButtonCell.displayName = 'TableButtonCell';
diff --git a/system/stories/.storybook/preview.tsx b/system/stories/.storybook/preview.tsx
index 995c0ee2d..7d6b2d19d 100644
--- a/system/stories/.storybook/preview.tsx
+++ b/system/stories/.storybook/preview.tsx
@@ -176,6 +176,7 @@ function handleGridRef(ref: HTMLDivElement) {
 interface StoryParametersOptions {
   variants: (string | { name: string })[];
   variantWidth?: string;
+  element: string;
   selectors: string[];
   auxiliarySelectors: (string | undefined)[];
   className: string;
@@ -317,7 +318,8 @@ class StoryParametersParser {
   }
 
   composeClassNameSelector() {
-    const { className, selectors } = this.parameters;
+    const { className, selectors, element } = this.parameters;
+    if (className && element === 'input') return [`input.${className}`];
     return className ? [`.${className}`] : selectors || [];
   }
 
diff --git a/system/stories/src/Table.stories.tsx b/system/stories/src/Table.stories.tsx
index 7471793a4..467793b10 100644
--- a/system/stories/src/Table.stories.tsx
+++ b/system/stories/src/Table.stories.tsx
@@ -10,7 +10,8 @@ export default {
   title: 'Components/Table',
   component: emotion.Table,
   parameters: {
-    ...table
+    ...table,
+    auxiliaryComponents: [emotion.TableBadgeCell, emotion.TableButtonCell]
   }
 } as Meta;
 
@@ -106,6 +107,8 @@ interface Options {
   Button: typeof emotion.Button | typeof css.Button;
   Badge: typeof emotion.Badge | typeof css.Badge;
   Checkbox: typeof emotion.Checkbox | typeof css.Checkbox;
+  TableBadgeCell: typeof emotion.TableBadgeCell | typeof css.TableBadgeCell;
+  TableButtonCell: typeof emotion.TableButtonCell | typeof css.TableButtonCell;
   isStriped: boolean;
 }
 
@@ -166,6 +169,8 @@ const WithControlsTemplate: StoryFn<Options> = ({
   Button,
   Badge,
   Checkbox,
+  TableBadgeCell,
+  TableButtonCell,
   isStriped
 }) => (
   <Table data-variant={isStriped ? 'striped' : 'default'}>
@@ -200,16 +205,16 @@ const WithControlsTemplate: StoryFn<Options> = ({
               </ul>
             )}
           </td>
-          <td data-cell-type="badge">
+          <TableBadgeCell>
             <Badge data-variant={user.status} data-size="small">
               {user.status}
             </Badge>
-          </td>
-          <td data-cell-type="button">
+          </TableBadgeCell>
+          <TableButtonCell>
             <Button data-variant="bare" data-size="small">
               <OverflowMenuHorizontal size={getConfigDefault('iconSize')} />
             </Button>
-          </td>
+          </TableButtonCell>
         </tr>
       ))}
     </tbody>
@@ -221,7 +226,9 @@ WithControlsEmotion.args = {
   Table: emotion.Table,
   Button: emotion.Button,
   Badge: emotion.Badge,
-  Checkbox: emotion.Checkbox
+  Checkbox: emotion.Checkbox,
+  TableBadgeCell: emotion.TableBadgeCell,
+  TableButtonCell: emotion.TableButtonCell
 };
 
 WithControlsEmotion.parameters = { useEmotion: true };
@@ -232,6 +239,8 @@ StripedControlsEmotion.args = {
   Button: emotion.Button,
   Badge: emotion.Badge,
   Checkbox: emotion.Checkbox,
+  TableBadgeCell: emotion.TableBadgeCell,
+  TableButtonCell: emotion.TableButtonCell,
   isStriped: true
 };
 StripedControlsEmotion.parameters = { useEmotion: true };
@@ -241,7 +250,9 @@ WithControlsClass.args = {
   Table: css.Table,
   Button: css.Button,
   Badge: css.Badge,
-  Checkbox: css.Checkbox
+  Checkbox: css.Checkbox,
+  TableBadgeCell: css.TableBadgeCell,
+  TableButtonCell: css.TableButtonCell
 };
 WithControlsClass.parameters = { useEmotion: false };
 
@@ -251,6 +262,8 @@ StripedControlsClass.args = {
   Button: css.Button,
   Badge: css.Badge,
   Checkbox: css.Checkbox,
+  TableBadgeCell: css.TableBadgeCell,
+  TableButtonCell: css.TableButtonCell,
   isStriped: true
 };
 StripedControlsClass.parameters = { useEmotion: false };