diff --git a/src/components/actions/Button/Button.module.scss b/src/components/actions/Button/Button.module.scss
index 00e9d568..c63ce1ab 100644
--- a/src/components/actions/Button/Button.module.scss
+++ b/src/components/actions/Button/Button.module.scss
@@ -10,7 +10,11 @@
     
     --bk-button-color-accent: #{bk.$theme-button-primary-background-default};
     --bk-button-color-contrast: #{bk.$theme-button-primary-text-default};
-        
+    &.bk-button--card {
+      --bk-button-color-accent: #{bk.$theme-button-card-primary-background-default};
+      --bk-button-color-contrast: #{bk.$theme-button-card-primary-text-default};
+    }
+    
     cursor: pointer;
     user-select: none;
     
@@ -58,19 +62,32 @@
     /* NOTE: the ordering here is important, more important rules must come later (in case of multiple states) */
     &:is(:focus-visible, :global(.pseudo-focus-visible)) {
       --bk-button-color-accent: #{bk.$theme-button-primary-background-focused};
+      
+      &.bk-button--card {
+        --bk-button-color-accent: #{bk.$theme-button-card-primary-background-focused};
+      }
     }
     &:is(:hover, :global(.pseudo-hover)) {
       --bk-button-color-accent: #{bk.$theme-button-primary-background-hover};
+      
+      &:where(.bk-button--card) {
+        --bk-button-color-accent: #{bk.$theme-button-card-primary-background-hover};
+      }
     }
     &:is(:disabled, .bk-button--disabled) {
+      cursor: not-allowed;
       --bk-button-color-accent: #{bk.$theme-button-primary-background-disabled};
       --bk-button-color-contrast: #{bk.$theme-button-primary-text-disabled};
-      cursor: not-allowed;
     }
     &.bk-button--nonactive {
+      cursor: not-allowed;
       --bk-button-color-accent: #{bk.$theme-button-primary-background-non-active};
       --bk-button-color-contrast: #{bk.$theme-button-primary-text-non-active};
-      cursor: not-allowed;
+      
+      &.bk-button--card {
+        --bk-button-color-accent: #{bk.$theme-button-card-primary-background-non-active};
+        --bk-button-color-contrast: #{bk.$theme-button-card-primary-text-non-active};
+      }
     }
     
     @media (prefers-reduced-motion: no-preference) {
diff --git a/src/components/actions/Button/Button.stories.tsx b/src/components/actions/Button/Button.stories.tsx
index 67a005e1..32f0be7d 100644
--- a/src/components/actions/Button/Button.stories.tsx
+++ b/src/components/actions/Button/Button.stories.tsx
@@ -11,6 +11,7 @@ import { ErrorBoundary } from 'react-error-boundary';
 
 import { notify } from '../../overlays/ToastProvider/ToastProvider.tsx';
 import { Icon } from '../../graphics/Icon/Icon.tsx';
+import { Card } from '../../containers/Card/Card.tsx';
 import { Banner } from '../../containers/Banner/Banner.tsx';
 
 import { Button } from './Button.tsx';
@@ -29,7 +30,7 @@ export default {
   args: {
     unstyled: false,
     label: 'Button',
-    variant: 'primary',
+    kind: 'primary',
     nonactive: false,
     disabled: false,
     onPress: () => { notify.success('You pressed the button.'); },
@@ -60,7 +61,7 @@ const BaseStory: Story = {
 
 const PrimaryStory: Story = {
   ...BaseStory,
-  args: { ...BaseStory.args, variant: 'primary' },
+  args: { ...BaseStory.args, kind: 'primary' },
 };
 
 export const PrimaryStandard: Story = {
@@ -95,7 +96,7 @@ export const PrimaryDisabled: Story = {
 export const Secondary: Story = {
   ...BaseStory,
   name: 'Secondary [standard]',
-  args: { ...BaseStory.args, variant: 'secondary' },
+  args: { ...BaseStory.args, kind: 'secondary' },
 };
 
 export const SecondaryHover: Story = {
@@ -125,7 +126,7 @@ export const SecondaryDisabled: Story = {
 export const Tertiary: Story = {
   ...BaseStory,
   name: 'Tertiary [standard]',
-  args: { ...BaseStory.args, variant: 'tertiary' },
+  args: { ...BaseStory.args, kind: 'tertiary' },
 };
 
 export const TertiaryHover: Story = {
@@ -152,6 +153,29 @@ export const TertiaryDisabled: Story = {
   args: { ...Tertiary.args, disabled: true },
 };
 
+export const VariantCard: Story = {
+  render: (args) => (
+    <Card style={{
+      display: 'grid',
+      gridTemplateColumns: 'repeat(3, 1fr)',
+      gridAutoFlow: 'row',
+      gap: '1rem',
+    }}>
+      <p><Button variant="card" {...args} kind="primary"/></p>
+      <p><Button variant="card" {...args} kind="primary" nonactive/></p>
+      <p><Button variant="card" {...args} kind="primary" disabled/></p>
+      
+      <p><Button variant="card" {...args} kind="secondary"/></p>
+      <p><Button variant="card" {...args} kind="secondary" nonactive/></p>
+      <p><Button variant="card" {...args} kind="secondary" disabled/></p>
+      
+      <p><Button variant="card" {...args} kind="tertiary"/></p>
+      <p><Button variant="card" {...args} kind="tertiary" nonactive/></p>
+      <p><Button variant="card" {...args} kind="tertiary" disabled/></p>
+    </Card>
+  ),
+};
+
 export const AsyncButton: Story = {
   ...PrimaryStory,
   args: {
diff --git a/src/components/actions/Button/Button.tsx b/src/components/actions/Button/Button.tsx
index a09c1f4c..108cf005 100644
--- a/src/components/actions/Button/Button.tsx
+++ b/src/components/actions/Button/Button.tsx
@@ -29,8 +29,11 @@ export type ButtonProps = React.PropsWithChildren<Omit<ComponentProps<'button'>,
    */
   label?: undefined | string,
   
-  /** What variant the button is, from higher prominance to lower. */
-  variant?: undefined | 'primary' | 'secondary' | 'tertiary',
+  /** The kind of button, from higher prominance to lower. */
+  kind?: undefined | 'primary' | 'secondary' | 'tertiary',
+  
+  /** Which visual variant to use. Default: 'normal'. */
+  variant?: undefined | 'normal' | 'card',
   
   /**
    * Whether the button is disabled. This is meant for essentially permanent disabled buttons, not for buttons that
@@ -60,9 +63,10 @@ export const Button = (props: ButtonProps) => {
     unstyled = false,
     trimmed = false,
     label,
+    kind = 'tertiary',
+    variant = 'normal',
     disabled = false,
     nonactive = false,
-    variant = 'tertiary',
     onPress,
     asyncTimeout = 30_000,
     ...propsRest
@@ -145,8 +149,9 @@ export const Button = (props: ButtonProps) => {
         bk: true,
         [cl['bk-button']]: !unstyled,
         [cl['bk-button--trimmed']]: trimmed,
-        [cl['bk-button--primary']]: variant === 'primary',
-        [cl['bk-button--secondary']]: variant === 'secondary',
+        [cl['bk-button--primary']]: kind === 'primary',
+        [cl['bk-button--secondary']]: kind === 'secondary',
+        [cl['bk-button--card']]: variant === 'card',
         [cl['bk-button--disabled']]: !isInteractive,
         [cl['bk-button--nonactive']]: isNonactive,
         'nonactive': isNonactive, // Global class name so that consumers can style nonactive states
diff --git a/src/components/actions/ButtonAsLink/ButtonAsLink.tsx b/src/components/actions/ButtonAsLink/ButtonAsLink.tsx
index 423a0c93..1a44e4a9 100644
--- a/src/components/actions/ButtonAsLink/ButtonAsLink.tsx
+++ b/src/components/actions/ButtonAsLink/ButtonAsLink.tsx
@@ -22,7 +22,7 @@ export type ButtonAsLinkProps = React.PropsWithChildren<ComponentProps<'button'>
   label?: NonNullable<LinkProps['label']>,
   
   // Button props
-  //variant: NonNullable<ButtonProps['variant']>,
+  //kind: NonNullable<ButtonProps['kind']>,
   //nonactive: NonNullable<ButtonProps['nonactive']>,
   //disabled: NonNullable<ButtonProps['disabled']>,
   onPress?: NonNullable<ButtonProps['onPress']>,
diff --git a/src/components/actions/LinkAsButton/LinkAsButton.stories.tsx b/src/components/actions/LinkAsButton/LinkAsButton.stories.tsx
index ffd21078..533a476c 100644
--- a/src/components/actions/LinkAsButton/LinkAsButton.stories.tsx
+++ b/src/components/actions/LinkAsButton/LinkAsButton.stories.tsx
@@ -22,7 +22,7 @@ export default {
   argTypes: {},
   args: {
     unstyled: false,
-    variant: 'primary',
+    kind: 'primary',
     label: 'Link',
     href: 'https://fortanix.com',
     target: '_blank',
@@ -41,17 +41,17 @@ export const Variants: Story = {
       gridAutoFlow: 'row',
       gap: '1rem',
     }}>
-      <p><LinkAsButton {...args} variant="primary"/></p>
-      <p><LinkAsButton {...args} variant="primary" nonactive/></p>
-      <p><LinkAsButton {...args} variant="primary" disabled/></p>
+      <p><LinkAsButton {...args} kind="primary"/></p>
+      <p><LinkAsButton {...args} kind="primary" nonactive/></p>
+      <p><LinkAsButton {...args} kind="primary" disabled/></p>
       
-      <p><LinkAsButton {...args} variant="secondary"/></p>
-      <p><LinkAsButton {...args} variant="secondary" nonactive/></p>
-      <p><LinkAsButton {...args} variant="secondary" disabled/></p>
+      <p><LinkAsButton {...args} kind="secondary"/></p>
+      <p><LinkAsButton {...args} kind="secondary" nonactive/></p>
+      <p><LinkAsButton {...args} kind="secondary" disabled/></p>
       
-      <p><LinkAsButton {...args} variant="tertiary"/></p>
-      <p><LinkAsButton {...args} variant="tertiary" nonactive/></p>
-      <p><LinkAsButton {...args} variant="tertiary" disabled/></p>
+      <p><LinkAsButton {...args} kind="tertiary"/></p>
+      <p><LinkAsButton {...args} kind="tertiary" nonactive/></p>
+      <p><LinkAsButton {...args} kind="tertiary" disabled/></p>
     </div>
   ),
 };
@@ -62,7 +62,7 @@ export const Variants: Story = {
  */
 export const Download: Story = {
   args: {
-    variant: 'tertiary',
+    kind: 'tertiary',
     download: 'my_file.txt',
     label: 'Download',
     href: `data:text/plain,Lorem ipsum`,
diff --git a/src/components/actions/LinkAsButton/LinkAsButton.tsx b/src/components/actions/LinkAsButton/LinkAsButton.tsx
index 52b9940d..ba554cda 100644
--- a/src/components/actions/LinkAsButton/LinkAsButton.tsx
+++ b/src/components/actions/LinkAsButton/LinkAsButton.tsx
@@ -21,7 +21,7 @@ export type LinkAsButtonProps = React.PropsWithChildren<ComponentProps<'a'> & {
   label?: NonNullable<LinkProps['label']>,
   
   // Button props
-  variant?: NonNullable<ButtonProps['variant']>,
+  kind?: NonNullable<ButtonProps['kind']>,
   nonactive?: NonNullable<ButtonProps['nonactive']>,
   disabled?: NonNullable<ButtonProps['disabled']>,
 }>;
@@ -34,7 +34,7 @@ export const LinkAsButton = (props: LinkAsButtonProps) => {
   const {
     unstyled = false,
     label,
-    variant,
+    kind,
     nonactive,
     disabled,
     ...propsRest
@@ -48,8 +48,8 @@ export const LinkAsButton = (props: LinkAsButtonProps) => {
       className={cx({
         bk: true,
         [ButtonClassNames['bk-button']]: !unstyled,
-        [ButtonClassNames['bk-button--primary']]: variant === 'primary',
-        [ButtonClassNames['bk-button--secondary']]: variant === 'secondary',
+        [ButtonClassNames['bk-button--primary']]: kind === 'primary',
+        [ButtonClassNames['bk-button--secondary']]: kind === 'secondary',
         [ButtonClassNames['bk-button--nonactive']]: nonactive,
         [ButtonClassNames['bk-button--disabled']]: disabled,
       }, props.className)}
diff --git a/src/components/containers/Banner/Banner.stories.tsx b/src/components/containers/Banner/Banner.stories.tsx
index b1db287c..580052f7 100644
--- a/src/components/containers/Banner/Banner.stories.tsx
+++ b/src/components/containers/Banner/Banner.stories.tsx
@@ -162,7 +162,7 @@ export const BannerWithThemedContent: Story = {
           The following components should always have a light theme, even in dark mode:
         </p>
         <div style={{ display: 'flex', gap: '2ch', marginTop: '1lh' }}>
-          <Button nonactive variant="primary" onPress={() => alert('clicked')}>Button</Button>
+          <Button nonactive kind="primary" onPress={() => alert('clicked')}>Button</Button>
           <SegmentedControl
             options={['Test 1', 'Test 2']}
             defaultValue="Test 1"
diff --git a/src/components/containers/Card/Card.tsx b/src/components/containers/Card/Card.tsx
index 441f86fb..b8c9bfba 100644
--- a/src/components/containers/Card/Card.tsx
+++ b/src/components/containers/Card/Card.tsx
@@ -6,6 +6,7 @@ import * as React from 'react';
 import { classNames as cx, type ComponentProps } from '../../../util/componentUtil.ts';
 
 import { H5 } from '../../../typography/Heading/Heading.tsx';
+import { Button } from '../../actions/Button/Button.tsx';
 
 import cl from './Card.module.scss';
 
diff --git a/src/components/containers/Dialog/Dialog.tsx b/src/components/containers/Dialog/Dialog.tsx
index 2f5ceac0..ee7b9ba8 100644
--- a/src/components/containers/Dialog/Dialog.tsx
+++ b/src/components/containers/Dialog/Dialog.tsx
@@ -67,12 +67,12 @@ const ActionIcon = ({ tooltip, ...buttonProps }: ActionIconProps) => {
 const CancelAction = (props: ActionProps) => {
   const context = useDialogContext();
   const handlePress = () => { props.onPress?.(); context.close(); };
-  return <Action variant="secondary" label="Cancel" {...props} onPress={handlePress}/>;
+  return <Action kind="secondary" label="Cancel" {...props} onPress={handlePress}/>;
 };
 const SubmitAction = (props: ActionProps) => {
   const context = useDialogContext();
   const handlePress = () => { props.onPress?.(); context.close(); };
-  return <Action variant="primary" label="Submit" {...props} onPress={handlePress}/>;
+  return <Action kind="primary" label="Submit" {...props} onPress={handlePress}/>;
 };
 
 export type DialogProps = Omit<ComponentProps<'dialog'>, 'title'> & {
diff --git a/src/components/forms/context/SubmitButton/SubmitButton.tsx b/src/components/forms/context/SubmitButton/SubmitButton.tsx
index 1e4a89fe..cbe3203d 100644
--- a/src/components/forms/context/SubmitButton/SubmitButton.tsx
+++ b/src/components/forms/context/SubmitButton/SubmitButton.tsx
@@ -84,7 +84,7 @@ export const SubmitButton = (props: SubmitButtonProps) => {
   
   return (
     <Button
-      variant="primary" // Primary by default
+      kind="primary" // Primary by default
       form={formContext.formId}
       {...propsButton}
       // @ts-expect-error We're using an invalid `type` on purpose here, this is meant to be used internally only.
diff --git a/src/components/graphics/PlaceholderEmpty/PlaceholderEmpty.stories.tsx b/src/components/graphics/PlaceholderEmpty/PlaceholderEmpty.stories.tsx
index 654bcf07..cb0790ab 100644
--- a/src/components/graphics/PlaceholderEmpty/PlaceholderEmpty.stories.tsx
+++ b/src/components/graphics/PlaceholderEmpty/PlaceholderEmpty.stories.tsx
@@ -30,8 +30,8 @@ export default {
 
 const actions = (
   <PlaceholderEmptyAction>
-    <Button variant="secondary">Button</Button>
-    <Button variant="primary">Button</Button>
+    <Button kind="secondary">Button</Button>
+    <Button kind="primary">Button</Button>
   </PlaceholderEmptyAction>
 );
 
diff --git a/src/components/graphics/PlaceholderEmpty/PlaceholderEmpty.tsx b/src/components/graphics/PlaceholderEmpty/PlaceholderEmpty.tsx
index 0190d8d8..f27563d9 100644
--- a/src/components/graphics/PlaceholderEmpty/PlaceholderEmpty.tsx
+++ b/src/components/graphics/PlaceholderEmpty/PlaceholderEmpty.tsx
@@ -80,7 +80,7 @@ export const PlaceholderEmpty = (props: PlaceholderEmptyProps) => {
 export type PlaceholderEmptyActionProps = React.PropsWithChildren<ComponentProps<'div'>>;
 /**
  * A wrapper component, intended to easily add some styling to children's `<Button/>`'s. 
- * UX expects that such buttons are `<Button variant="tertiary"/>`.
+ * UX expects that such buttons are `<Button kind="tertiary"/>`.
  */
 export const PlaceholderEmptyAction = (props: PlaceholderEmptyActionProps) => {
   return (
diff --git a/src/components/overlays/DialogModal/DialogModal.stories.tsx b/src/components/overlays/DialogModal/DialogModal.stories.tsx
index 2dafc253..1993cffa 100644
--- a/src/components/overlays/DialogModal/DialogModal.stories.tsx
+++ b/src/components/overlays/DialogModal/DialogModal.stories.tsx
@@ -26,7 +26,7 @@ export default {
   argTypes: {},
   args: {
     title: 'Modal Dialog',
-    trigger: ({ activate }) => <Button variant="primary" label="Open modal" onPress={activate}/>,
+    trigger: ({ activate }) => <Button kind="primary" label="Open modal" onPress={activate}/>,
     children: <LoremIpsum paragraphs={15}/>,
   },
   render: (args) => <><LoremIpsum paragraphs={2}/> <DialogModal {...args}/> <LoremIpsum paragraphs={2}/></>,
@@ -85,7 +85,7 @@ export const DialogModalNested: Story = {
       <DialogModal
         className="inner"
         title="Submodal"
-        trigger={({ activate }) => <Button variant="primary" label="Open submodal" onPress={activate}/>}
+        trigger={({ activate }) => <Button kind="primary" label="Open submodal" onPress={activate}/>}
       >
         This is a submodal. Closing this modal should keep the outer modal still open.
       </DialogModal>
@@ -99,16 +99,16 @@ export const DialogModalWithToast: Story = {
     className: 'outer',
     children: (
       <>
-        <Button variant="primary" onPress={() => { notifyTest(); }}>
+        <Button kind="primary" onPress={() => { notifyTest(); }}>
           Trigger toast notification
         </Button>
         <DialogModal
           className="inner"
           title="Submodal"
-          trigger={({ activate }) => <Button variant="primary" label="Open submodal" onPress={activate}/>}
+          trigger={({ activate }) => <Button kind="primary" label="Open submodal" onPress={activate}/>}
         >
           <p>Test rendering toast notifications over the modal:</p>
-          <Button variant="primary" onPress={() => { notifyTest(); }}>
+          <Button kind="primary" onPress={() => { notifyTest(); }}>
             Trigger toast notification
           </Button>
         </DialogModal>
@@ -136,7 +136,7 @@ export const DialogModalUncloseable: Story = {
     children: ({ close }) => (
       <article className="bk-body-text">
         <p>It should not be possible to close this dialog, except through the following button:</p>
-        <p><Button variant="primary" label="Force close" onPress={close}/></p>
+        <p><Button kind="primary" label="Force close" onPress={close}/></p>
       </article>
     ),
   },
@@ -181,8 +181,8 @@ const DialogModalControlledWithSubject = (props: React.ComponentProps<typeof Dia
       
       <p>A single details modal will be used, filled in with the subject based on which name was pressed.</p>
       
-      <p><Button variant="primary" label="Open: Alice" onPress={() => { modal.activateWith({ name: 'Alice' }); }}/></p>
-      <p><Button variant="primary" label="Open: Bob" onPress={() => { modal.activateWith({ name: 'Bob' }); }}/></p>
+      <p><Button kind="primary" label="Open: Alice" onPress={() => { modal.activateWith({ name: 'Alice' }); }}/></p>
+      <p><Button kind="primary" label="Open: Bob" onPress={() => { modal.activateWith({ name: 'Bob' }); }}/></p>
     </article>
   );
 };
@@ -213,14 +213,14 @@ const DialogModalControlledConfirmation = (props: React.ComponentProps<typeof Di
       <p>A single details modal will be used, filled in with the subject based on which name was pressed.</p>
       
       <p>
-        <Button variant="primary"
+        <Button kind="primary"
           label={deleted.has('Item 1') ? 'Deleted' : `Delete Item 1`}
           disabled={deleted.has('Item 1')}
           onPress={() => { deleteConfirmer.activateWith({ name: 'Item 1' }); }}
         />
       </p>
       <p>
-        <Button variant="primary"
+        <Button kind="primary"
           label={deleted.has('Item 2') ? 'Deleted' : `Delete Item 2`}
           disabled={deleted.has('Item 2')}
           onPress={() => { deleteConfirmer.activateWith({ name: 'Item 2' }); }}
diff --git a/src/components/overlays/DialogOverlay/DialogOverlay.stories.tsx b/src/components/overlays/DialogOverlay/DialogOverlay.stories.tsx
index 43bb3c47..c9eff133 100644
--- a/src/components/overlays/DialogOverlay/DialogOverlay.stories.tsx
+++ b/src/components/overlays/DialogOverlay/DialogOverlay.stories.tsx
@@ -32,7 +32,7 @@ export default {
     <>
       <LoremIpsum paragraphs={3}/>
       <DialogOverlay {...args}
-        trigger={({ activate }) => <Button variant="primary" label="Open overlay" onPress={activate}/>}
+        trigger={({ activate }) => <Button kind="primary" label="Open overlay" onPress={activate}/>}
       />
       <LoremIpsum paragraphs={3}/>
     </>
@@ -61,10 +61,10 @@ const DialogOverlayControlledWithSubject = (props: React.ComponentProps<typeof D
       <p>A single details overlay will be used, filled in with the subject based on which name was pressed.</p>
       
       <p>
-        <Button variant="primary" label="Open: Alice" onPress={() => { overlay.activateWith({ name: 'Alice' }); }}/>
+        <Button kind="primary" label="Open: Alice" onPress={() => { overlay.activateWith({ name: 'Alice' }); }}/>
       </p>
       <p>
-        <Button variant="primary" label="Open: Bob" onPress={() => { overlay.activateWith({ name: 'Bob' }); }}/>
+        <Button kind="primary" label="Open: Bob" onPress={() => { overlay.activateWith({ name: 'Bob' }); }}/>
       </p>
     </article>
   );
@@ -82,7 +82,7 @@ export const DialogOverlayWithNestedModal: Story = {
     children: (
       <DialogModal
         title="Modal"
-        trigger={({ activate }) => <Button variant="primary" label="Open modal" onPress={activate}/>}
+        trigger={({ activate }) => <Button kind="primary" label="Open modal" onPress={activate}/>}
       >
         Modal nested inside a popover.
       </DialogModal>
@@ -94,7 +94,7 @@ export const DialogOverlayWithToast: Story = {
   args: {
     display: 'slide-over',
     children: (
-      <Button variant="primary" label="Trigger notification"
+      <Button kind="primary" label="Trigger notification"
         onPress={() => notify.info('This notification should be above the overlay.', { autoClose: false })}
       />
     ),
diff --git a/src/components/overlays/DropdownMenu/DropdownMenuProvider.stories.tsx b/src/components/overlays/DropdownMenu/DropdownMenuProvider.stories.tsx
index 0b2f2815..535d0594 100644
--- a/src/components/overlays/DropdownMenu/DropdownMenuProvider.stories.tsx
+++ b/src/components/overlays/DropdownMenu/DropdownMenuProvider.stories.tsx
@@ -32,7 +32,7 @@ export const Standard: Story = {
   name: 'DropdownMenuProvider',
   args: {
     children: ({ props, state }) => (
-      <Button variant="primary" {...props()}>
+      <Button kind="primary" {...props()}>
         {state.selectedOption ? `Selected: ${state.selectedOption}` : 'Open dropdown'}
       </Button>
     ),
@@ -55,7 +55,7 @@ export const WithPlacement: Story = {
   args: {
     placement: 'right',
     children: ({ props, state }) => (
-      <Button variant="primary" {...props()}>
+      <Button kind="primary" {...props()}>
         {state.selectedOption ? `Selected: ${state.selectedOption}` : 'Open dropdown placed to the right'}
       </Button>
     ),
diff --git a/src/components/overlays/SpinnerModal/SpinnerModal.stories.tsx b/src/components/overlays/SpinnerModal/SpinnerModal.stories.tsx
index f9027212..f9c259f5 100644
--- a/src/components/overlays/SpinnerModal/SpinnerModal.stories.tsx
+++ b/src/components/overlays/SpinnerModal/SpinnerModal.stories.tsx
@@ -40,7 +40,7 @@ const SpinnerModalControlledWithTrigger = (props: SpinnerModalArgs) => {
     <>
       {isLoading && <SpinnerModal delay={0} {...props}/>}
       <LoremIpsum paragraphs={2}/>
-      <Button variant="primary" label="Trigger spinner for 3 seconds" onPress={() => { setIsLoading(true); }}/>
+      <Button kind="primary" label="Trigger spinner for 3 seconds" onPress={() => { setIsLoading(true); }}/>
       <LoremIpsum paragraphs={2}/>
     </>
   );
diff --git a/src/components/overlays/ToastProvider/ToastProvider.stories.tsx b/src/components/overlays/ToastProvider/ToastProvider.stories.tsx
index 2a216453..de99d325 100644
--- a/src/components/overlays/ToastProvider/ToastProvider.stories.tsx
+++ b/src/components/overlays/ToastProvider/ToastProvider.stories.tsx
@@ -50,7 +50,7 @@ export const ToastStandard: Story = {
 export const ToastProviderWithTrigger: Story = {
   args: {
     children: (
-      <Button variant="primary" label="Notify (success)"
+      <Button kind="primary" label="Notify (success)"
         onPress={() => notify.success({ title: 'Notification title', message: 'This is a success notification.' })}
       />
     ),
diff --git a/src/components/overlays/Tooltip/Tooltip.stories.tsx b/src/components/overlays/Tooltip/Tooltip.stories.tsx
index 55f3ec2d..aba286f3 100644
--- a/src/components/overlays/Tooltip/Tooltip.stories.tsx
+++ b/src/components/overlays/Tooltip/Tooltip.stories.tsx
@@ -106,7 +106,7 @@ const TooltipNativeAnchoringControlled = () => {
         This is a tooltip with a lot of text that gives more information about the element.
         It has a <DummyLink>link</DummyLink> you can focus.
       </Tooltip>
-      <Button popoverTarget={id} variant="primary" label="Hover over me"
+      <Button popoverTarget={id} kind="primary" label="Hover over me"
         style={{ anchorName }}
         onMouseEnter={() => { refTooltip.current?.showPopover(); }}
         onMouseLeave={() => { refTooltip.current?.hidePopover(); }}
diff --git a/src/components/overlays/Tooltip/TooltipProvider.stories.tsx b/src/components/overlays/Tooltip/TooltipProvider.stories.tsx
index e92d7966..1c8ae3eb 100644
--- a/src/components/overlays/Tooltip/TooltipProvider.stories.tsx
+++ b/src/components/overlays/Tooltip/TooltipProvider.stories.tsx
@@ -26,7 +26,7 @@ export default {
   },
   args: {
     tooltip: <>This is a tooltip</>,
-    children: (props) => <Button {...props()} variant="primary" label="Hover over me"/>,
+    children: (props) => <Button {...props()} kind="primary" label="Hover over me"/>,
   },
   render: (args) => <TooltipProvider {...args}/>,
 } satisfies Meta<TooltipProviderArgs>;
@@ -102,7 +102,7 @@ export const TooltipWithScroll: Story = {
       <OverflowTester openDefault lines={5}/>
       
       <TooltipProvider tooltip="Tooltips will auto-reposition when it hits the viewport due to scroll.">
-        {props => <Button {...props()} variant="primary" label="Scroll me" autoFocus/>}
+        {props => <Button {...props()} kind="primary" label="Scroll me" autoFocus/>}
       </TooltipProvider>
       
       <OverflowTester openDefault/>
@@ -116,7 +116,7 @@ export const TooltipWithScroll: Story = {
 export const TooltipWithFocus: Story = {
   args: {
     tooltip: 'Tooltips will open when the anchor element is focused',
-    children: (props) => <Button {...props()} variant="primary" label="Focus me" autoFocus/>,
+    children: (props) => <Button {...props()} kind="primary" label="Focus me" autoFocus/>,
   },
 };
 
@@ -139,7 +139,7 @@ const TooltipWithDrag = () => {
               boundary={boundaryRef.current ?? undefined}
               enablePreciseTracking
             >
-              <Button ref={targetRef} variant="secondary" label="Drag me" autoFocus/>
+              <Button ref={targetRef} kind="secondary" label="Drag me" autoFocus/>
             </TooltipProvider>
           }
         </Draggable>
diff --git a/src/components/tables/DataTable/DataTableLazy.stories.tsx b/src/components/tables/DataTable/DataTableLazy.stories.tsx
index d64740be..6c205f96 100644
--- a/src/components/tables/DataTable/DataTableLazy.stories.tsx
+++ b/src/components/tables/DataTable/DataTableLazy.stories.tsx
@@ -67,8 +67,8 @@ const DataTableLazyTemplate = (props: dataTeableLazyTemplateProps) => {
               title="No users"
               actions={
                 <DataTableLazy.PlaceholderEmptyAction>
-                  <Button variant="secondary" onPress={() => {}}>Action 1</Button>
-                  <Button variant="primary" onPress={() => {}}>Action 2</Button>
+                  <Button kind="secondary" onPress={() => {}}>Action 1</Button>
+                  <Button kind="primary" onPress={() => {}}>Action 2</Button>
                 </DataTableLazy.PlaceholderEmptyAction>
               }
             />
diff --git a/src/components/tables/DataTable/DataTableLazy.tsx b/src/components/tables/DataTable/DataTableLazy.tsx
index 9025da9b..1cd2bdda 100644
--- a/src/components/tables/DataTable/DataTableLazy.tsx
+++ b/src/components/tables/DataTable/DataTableLazy.tsx
@@ -280,7 +280,7 @@ export const DataTableLazy = ({ className, footer, ...propsRest }: DataTableLazy
         <DataTablePlaceholderError
           actions={
             <PlaceholderEmptyAction>
-              <Button variant="primary" onPress={() => { reload(); }}>
+              <Button kind="primary" onPress={() => { reload(); }}>
                 Retry
               </Button>
             </PlaceholderEmptyAction>
diff --git a/src/components/tables/DataTable/DataTableStream.stories.tsx b/src/components/tables/DataTable/DataTableStream.stories.tsx
index 2616136c..ea8f994e 100644
--- a/src/components/tables/DataTable/DataTableStream.stories.tsx
+++ b/src/components/tables/DataTable/DataTableStream.stories.tsx
@@ -118,8 +118,8 @@ const DataTableStreamTemplate = ({dataTableProps, ...props} : dataTeableLazyTemp
               title="No users"
               actions={
                 <DataTableStream.PlaceholderEmptyAction>
-                  <Button variant="secondary" onPress={() => {}}>Action 1</Button>
-                  <Button variant="primary" onPress={() => {}}>Action 2</Button>
+                  <Button kind="secondary" onPress={() => {}}>Action 1</Button>
+                  <Button kind="primary" onPress={() => {}}>Action 2</Button>
                 </DataTableStream.PlaceholderEmptyAction>
               }
             />
diff --git a/src/components/tables/DataTable/DataTableStream.tsx b/src/components/tables/DataTable/DataTableStream.tsx
index 5c23594c..3fc16e30 100644
--- a/src/components/tables/DataTable/DataTableStream.tsx
+++ b/src/components/tables/DataTable/DataTableStream.tsx
@@ -519,7 +519,7 @@ export const DataTableStream = ({
         <DataTablePlaceholderError
           actions={
             <PlaceholderEmptyAction>
-              <Button variant="primary" onPress={() => { reload(); }}>
+              <Button kind="primary" onPress={() => { reload(); }}>
                 Retry
               </Button>
             </PlaceholderEmptyAction>
diff --git a/src/components/tables/DataTable/pagination/PaginationSizeSelector.tsx b/src/components/tables/DataTable/pagination/PaginationSizeSelector.tsx
index 239d5907..549d2d19 100644
--- a/src/components/tables/DataTable/pagination/PaginationSizeSelector.tsx
+++ b/src/components/tables/DataTable/pagination/PaginationSizeSelector.tsx
@@ -46,7 +46,7 @@ export const PaginationSizeSelector = (props: PaginationSizeSelectorProps) => {
       >
         {({ props, open }) => (
           <Button
-            variant="tertiary"
+            kind="tertiary"
             {...props()}
             aria-label={`${table.state.pageSize} rows per page`}
             className={cx(
diff --git a/src/components/tables/DataTable/pagination/PaginationStream.tsx b/src/components/tables/DataTable/pagination/PaginationStream.tsx
index 5774405f..a3f32b4c 100644
--- a/src/components/tables/DataTable/pagination/PaginationStream.tsx
+++ b/src/components/tables/DataTable/pagination/PaginationStream.tsx
@@ -32,7 +32,7 @@ export const PaginationStreamPager = ({ pageSizeOptions }: PaginationStreamPager
       </Button>
       
       <Button trimmed
-        variant="tertiary"
+        kind="tertiary"
         className={cx(cl['pager__nav'], cl['pager__nav--prev'])}
         onPress={() => { table.previousPage(); }}
         nonactive={!table.canPreviousPage}
@@ -42,7 +42,7 @@ export const PaginationStreamPager = ({ pageSizeOptions }: PaginationStreamPager
       </Button>
       
       <Button trimmed
-        variant="tertiary"
+        kind="tertiary"
         className={cx(cl['pager__nav'], cl['pager__nav--next'])}
         onPress={() => { table.nextPage(); }}
         nonactive={!table.canNextPage}
diff --git a/src/components/tables/MultiSearch/MultiSearch.tsx b/src/components/tables/MultiSearch/MultiSearch.tsx
index 5f84b0c4..c97d0b17 100644
--- a/src/components/tables/MultiSearch/MultiSearch.tsx
+++ b/src/components/tables/MultiSearch/MultiSearch.tsx
@@ -710,7 +710,7 @@ const AlternativesDropdown = (props: AlternativesDropdownProps) => {
       )}
       <div className="bk-multi-search__alternatives-action">
         <Button
-          variant="primary"
+          kind="primary"
           onPress={onSelectionComplete}
           disabled={!arrayValidation.isValid}
         >
@@ -944,7 +944,7 @@ const DateTimeDropdown = (props: DateTimeDropdownProps) => {
         
       <div className="bk-multi-search__date-time-action">
         <Button
-          variant="primary"
+          kind="primary"
           onPress={onSelectionComplete}
           nonactive={!dateTimeRangeValidation.isValid}
         >
@@ -968,7 +968,7 @@ const DateTimeDropdown = (props: DateTimeDropdownProps) => {
 
       <div className="bk-multi-search__date-time-action">
         <Button
-          variant="primary"
+          kind="primary"
           onPress={onSelectionComplete}
           nonactive={!dateTimeRangeValidation.isValid}
         >
diff --git a/src/layouts/AppLayout/AppLayout.stories.tsx b/src/layouts/AppLayout/AppLayout.stories.tsx
index ea51b05a..96bdbd87 100644
--- a/src/layouts/AppLayout/AppLayout.stories.tsx
+++ b/src/layouts/AppLayout/AppLayout.stories.tsx
@@ -82,7 +82,7 @@ export const Standard: Story = {
             
             <DialogModal
               title="Modal"
-              trigger={({ activate }) => <Button variant="primary" label="Open modal" onPress={() => { activate(); }}/>}
+              trigger={({ activate }) => <Button kind="primary" label="Open modal" onPress={() => { activate(); }}/>}
             >
               Test
             </DialogModal>
diff --git a/src/typography/BodyText/BodyText.stories.tsx b/src/typography/BodyText/BodyText.stories.tsx
index 8ba95798..b3197ffa 100644
--- a/src/typography/BodyText/BodyText.stories.tsx
+++ b/src/typography/BodyText/BodyText.stories.tsx
@@ -96,7 +96,7 @@ export const WithComponents: Story = {
           from the body text styling.
         </p>
         <p>Here is a button component:</p>
-        <Button variant="primary" label="Button"/>
+        <Button kind="primary" label="Button"/>
         
         <Panel>
           <Panel.Heading>This panel contains a nested a bk-body-text</Panel.Heading>