From 4ef10fe0c9bd5c4473efb39e1bc6cdc357a5476c Mon Sep 17 00:00:00 2001
From: Andrew Holloway <booc0mtaco@users.noreply.github.com>
Date: Fri, 8 Mar 2024 17:45:54 -0600
Subject: [PATCH] feat(Button)!: introduce button v2.0

---
 src/components/Button/Button-v1.module.css    | 593 +++++++++++++++++
 ...tton.stories.tsx => Button-v1.stories.tsx} |   4 +-
 src/components/Button/Button-v1.tsx           | 119 ++++
 src/components/Button/Button.module.css       | 617 +++---------------
 src/components/Button/Button.stories.ts       |  40 ++
 src/components/Button/Button.test.tsx         |   4 +-
 src/components/Button/Button.tsx              | 136 ++--
 7 files changed, 921 insertions(+), 592 deletions(-)
 create mode 100644 src/components/Button/Button-v1.module.css
 rename src/components/Button/{Button.stories.tsx => Button-v1.stories.tsx} (98%)
 create mode 100644 src/components/Button/Button-v1.tsx
 create mode 100644 src/components/Button/Button.stories.ts

diff --git a/src/components/Button/Button-v1.module.css b/src/components/Button/Button-v1.module.css
new file mode 100644
index 0000000000..34a9c3f22a
--- /dev/null
+++ b/src/components/Button/Button-v1.module.css
@@ -0,0 +1,593 @@
+@import '../../design-tokens/mixins.css';
+
+/*------------------------------------*\
+    # BUTTON
+\*------------------------------------*/
+
+/**
+* Styled clickable element that is based on the native <button> element.
+*/
+.button {
+ font: var(--eds-theme-typography-button-label);
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ /* Adds a gap between children to automatically handle spacing between icons and text. */
+ gap: 0.75rem;
+ border-width: var(--eds-theme-border-width);
+ border-style: solid;
+ border-radius: var(--eds-theme-box-button-border-radius);
+ cursor: pointer;
+ transition-property: color, background-color, border-color;
+ transition-duration: var(--eds-anim-fade-quick);
+ transition-timing-function: var(--eds-anim-ease);
+
+ :where(svg) {
+   /* Adds default size for icons passed in for consistency. */
+   --icon-size-default: 2em;
+   transition: color var(--eds-anim-fade-quick) var(--eds-anim-ease);
+
+   @media screen and (prefers-reduced-motion) {
+     transition: none;
+   }
+ }
+
+ &:focus-visible {
+   @mixin focus;
+ }
+
+ @supports not selector(:focus-visible) {
+   &:focus {
+     @mixin focus;
+   }
+ }
+
+ @media screen and (prefers-reduced-motion) {
+   transition: none;
+ }
+
+ &:disabled,
+ &:disabled:hover {
+   cursor: not-allowed;
+ }
+}
+
+/**
+* Margin 0 added becuase Safari has margin on buttons.
+* Needs `:where` pseudoclass to reduce specificity so class overrides
+*    for margin can happen where used.
+*/
+:where(.button) {
+ margin: 0;
+}
+
+/**
+* Primary brand clickable style
+*/
+:where(.button--primary).button--brand {
+ border-color: var(--eds-theme-color-button-primary-brand-border);
+ background-color: var(--eds-theme-color-button-primary-brand-background);
+ color: var(--eds-theme-color-button-primary-brand-text);
+
+ &:hover {
+   border-color: var(--eds-theme-color-button-primary-brand-border-hover);
+   background-color: var(--eds-theme-color-button-primary-brand-background-hover);
+   color: var(--eds-theme-color-button-primary-brand-text-hover);
+ }
+
+ &:active {
+   border-color: var(--eds-theme-color-button-primary-brand-border-active);
+   background-color: var(--eds-theme-color-button-primary-brand-background-active);
+   color: var(--eds-theme-color-button-primary-brand-text-active);
+ }
+}
+
+/**
+* Primary error clickable style
+*/
+:where(.button--primary).button--error {
+ border-color: var(--eds-theme-color-button-primary-error-border);
+ background-color: var(--eds-theme-color-button-primary-error-background);
+ color: var(--eds-theme-color-button-primary-error-text);
+
+ &:hover {
+   border-color: var(--eds-theme-color-button-primary-error-border-hover);
+   background-color: var(--eds-theme-color-button-primary-error-background-hover);
+   color: var(--eds-theme-color-button-primary-error-text-hover);
+ }
+
+ &:active {
+   border-color: var(--eds-theme-color-button-primary-error-border-active);
+   background-color: var(--eds-theme-color-button-primary-error-background-active);
+   color: var(--eds-theme-color-button-primary-error-text-active);
+ }
+}
+
+/**
+* Secondary brand clickable style
+*/
+:where(.button--secondary).button--brand {
+ border-color: var(--eds-theme-color-button-secondary-brand-border);
+ background-color: var(--eds-theme-color-button-secondary-brand-background);
+ color: var(--eds-theme-color-button-secondary-brand-text);
+
+ :where(svg) {
+   color: var(--eds-theme-color-button-secondary-brand-icon);
+ }
+
+ &:hover {
+   border-color: var(--eds-theme-color-button-secondary-brand-border-hover);
+   background-color: var(--eds-theme-color-button-secondary-brand-background-hover);
+   color: var(--eds-theme-color-button-secondary-brand-text-hover);
+   :where(svg) {
+     color: var(--eds-theme-color-button-secondary-brand-icon-hover);
+   }
+ }
+
+ &:active {
+   border-color: var(--eds-theme-color-button-secondary-brand-border-active);
+   background-color: var(--eds-theme-color-button-secondary-brand-background-active);
+   color: var(--eds-theme-color-button-secondary-brand-text-active);
+   :where(svg) {
+     color: var(--eds-theme-color-button-secondary-brand-icon-focus);
+   }
+ }
+}
+
+/**
+* Secondary neutral clickable style
+*/
+:where(.button--secondary).button--neutral {
+ border-color: var(--eds-theme-color-button-secondary-neutral-border);
+ background-color: var(--eds-theme-color-button-secondary-neutral-background);
+ color: var(--eds-theme-color-button-secondary-neutral-text);
+
+ :where(svg) {
+   color: var(--eds-theme-color-button-secondary-neutral-icon);
+ }
+
+ &:hover {
+   border-color: var(--eds-theme-color-button-secondary-neutral-border-hover);
+   background-color: var(--eds-theme-color-button-secondary-neutral-background-hover);
+   color: var(--eds-theme-color-button-secondary-neutral-text-hover);
+   :where(svg) {
+     color: var(--eds-theme-color-button-secondary-neutral-icon-hover);
+   }
+ }
+
+ &:active {
+   border-color: var(--eds-theme-color-button-secondary-neutral-border-active);
+   background-color: var(--eds-theme-color-button-secondary-neutral-background-active);
+   color: var(--eds-theme-color-button-secondary-neutral-text-active);
+   :where(svg) {
+     color: var(--eds-theme-color-button-secondary-neutral-icon-active);
+   }
+ }
+}
+
+/**
+* Secondary success clickable style
+*/
+:where(.button--secondary).button--success {
+ border-color: var(--eds-theme-color-button-secondary-success-border);
+ background-color: var(--eds-theme-color-button-secondary-success-background);
+ color: var(--eds-theme-color-button-secondary-success-text);
+
+ :where(svg) {
+   color: var(--eds-theme-color-button-secondary-success-icon);
+ }
+
+ &:hover {
+   border-color: var(--eds-theme-color-button-secondary-success-border-hover);
+   background-color: var(--eds-theme-color-button-secondary-success-background-hover);
+   color: var(--eds-theme-color-button-secondary-success-text-hover);
+   :where(svg) {
+     color: var(--eds-theme-color-button-secondary-success-icon-hover);
+   }
+ }
+
+ &:active {
+   border-color: var(--eds-theme-color-button-secondary-success-border-active);
+   background-color: var(--eds-theme-color-button-secondary-success-background-active);
+   color: var(--eds-theme-color-button-secondary-success-text-active);
+   :where(svg) {
+     color: var(--eds-theme-color-button-secondary-success-icon-active);
+   }
+ }
+}
+
+/**
+* Secondary warning clickable style
+*/
+:where(.button--secondary).button--warning {
+ border-color: var(--eds-theme-color-button-secondary-warning-border);
+ background-color: var(--eds-theme-color-button-secondary-warning-background);
+ color: var(--eds-theme-color-button-secondary-warning-text);
+
+ :where(svg) {
+   color: var(--eds-theme-color-button-secondary-warning-icon);
+ }
+
+ &:hover {
+   border-color: var(--eds-theme-color-button-secondary-warning-border-hover);
+   background-color: var(--eds-theme-color-button-secondary-warning-background-hover);
+   color: var(--eds-theme-color-button-secondary-warning-text-hover);
+   :where(svg) {
+     color: var(--eds-theme-color-button-secondary-warning-icon-hover);
+   }
+ }
+
+ &:active {
+   border-color: var(--eds-theme-color-button-secondary-warning-border-active);
+   background-color: var(--eds-theme-color-button-secondary-warning-background-active);
+   color: var(--eds-theme-color-button-secondary-warning-text-active);
+   :where(svg) {
+     color: var(--eds-theme-color-button-secondary-warning-icon-active);
+   }
+ }
+}
+
+/**
+* Secondary error clickable style
+*/
+:where(.button--secondary).button--error {
+ border-color: var(--eds-theme-color-button-secondary-error-border);
+ background-color: var(--eds-theme-color-button-secondary-error-background);
+ color: var(--eds-theme-color-button-secondary-error-text);
+
+ :where(svg) {
+   color: var(--eds-theme-color-button-secondary-error-icon);
+ }
+
+ &:hover {
+   border-color: var(--eds-theme-color-button-secondary-error-border-hover);
+   background-color: var(--eds-theme-color-button-secondary-error-background-hover);
+   color: var(--eds-theme-color-button-secondary-error-text-hover);
+   :where(svg) {
+     color: var(--eds-theme-color-button-secondary-error-icon-hover);
+   }
+ }
+
+ &:active {
+   border-color: var(--eds-theme-color-button-secondary-error-border-active);
+   background-color: var(--eds-theme-color-button-secondary-error-background-active);
+   color: var(--eds-theme-color-button-secondary-error-text-active);
+   :where(svg) {
+     color: var(--eds-theme-color-button-secondary-error-icon-active);
+   }
+ }
+}
+
+/**
+* Icon brand clickable style
+* 
+* A clickable style that strips out borders, backgrounds, etc.
+*
+* Use for Close "X" buttons, tooltip icons, and other.
+*/
+:where(.button--icon).button--brand {
+ border-color: var(--eds-theme-color-button-icon-brand-border);
+ background-color: var(--eds-theme-color-button-icon-brand-background);
+ color: var(--eds-theme-color-button-icon-brand-text);
+
+ :where(svg) {
+   color: var(--eds-theme-color-button-icon-brand);
+ }
+
+ &:hover {
+   border-color: var(--eds-theme-color-button-icon-brand-border-hover);
+   background-color: var(--eds-theme-color-button-icon-brand-background-hover);
+   color: var(--eds-theme-color-button-icon-brand-text-hover);
+   :where(svg) {
+     color: var(--eds-theme-color-button-icon-brand-hover);
+   }
+ }
+
+ &:active {
+   border-color: var(--eds-theme-color-button-icon-brand-border-active);
+   background-color: var(--eds-theme-color-button-icon-brand-background-active);
+   color: var(--eds-theme-color-button-icon-brand-text-active);
+   :where(svg) {
+     color: var(--eds-theme-color-button-icon-brand-active);
+   }
+ }
+}
+
+/**
+* Icon neutral clickable style
+* 
+* A clickable style that strips out borders, backgrounds, etc.
+*
+* Use for Close "X" buttons, tooltip icons, and other.
+*/
+:where(.button--icon).button--neutral {
+ border-color: var(--eds-theme-color-button-icon-neutral-border);
+ background-color: var(--eds-theme-color-button-icon-neutral-background);
+ color: var(--eds-theme-color-button-icon-neutral-text);
+
+ :where(svg) {
+   color: var(--eds-theme-color-button-icon-neutral);
+ }
+
+ &:hover {
+   border-color: var(--eds-theme-color-button-icon-neutral-border-hover);
+   background-color: var(--eds-theme-color-button-icon-neutral-background-hover);
+   color: var(--eds-theme-color-button-icon-neutral-text-hover);
+   :where(svg) {
+     color: var(--eds-theme-color-button-icon-neutral-hover);
+   }
+ }
+
+ &:active {
+   border-color: var(--eds-theme-color-button-icon-neutral-border-active);
+   background-color: var(--eds-theme-color-button-icon-neutral-background-active);
+   color: var(--eds-theme-color-button-icon-neutral-text-active);
+   :where(svg) {
+     color: var(--eds-theme-color-button-icon-neutral-active);
+   }
+ }
+}
+
+/**
+* Icon success clickable style
+* 
+* A clickable style that strips out borders, backgrounds, etc.
+*
+* Use for Close "X" buttons, tooltip icons, and other.
+*/
+:where(.button--icon).button--success {
+ border-color: var(--eds-theme-color-button-icon-success-border);
+ background-color: var(--eds-theme-color-button-icon-success-background);
+ color: var(--eds-theme-color-button-icon-success-text);
+
+ :where(svg) {
+   color: var(--eds-theme-color-button-icon-success);
+ }
+
+ &:hover {
+   border-color: var(--eds-theme-color-button-icon-success-border-hover);
+   background-color: var(--eds-theme-color-button-icon-success-background-hover);
+   color: var(--eds-theme-color-button-icon-success-text-hover);
+   :where(svg) {
+     color: var(--eds-theme-color-button-icon-success-hover);
+   }
+ }
+
+ &:active {
+   border-color: var(--eds-theme-color-button-icon-success-border-active);
+   background-color: var(--eds-theme-color-button-icon-success-background-active);
+   color: var(--eds-theme-color-button-icon-success-text-active);
+   :where(svg) {
+     color: var(--eds-theme-color-button-icon-success-active);
+   }
+ }
+}
+
+/**
+* Icon warning clickable style
+* 
+* A clickable style that strips out borders, backgrounds, etc.
+*
+* Use for Close "X" buttons, tooltip icons, and other.
+*/
+:where(.button--icon).button--warning {
+ border-color: var(--eds-theme-color-button-icon-warning-border);
+ background-color: var(--eds-theme-color-button-icon-warning-background);
+ color: var(--eds-theme-color-button-icon-warning-text);
+
+ :where(svg) {
+   color: var(--eds-theme-color-button-icon-warning);
+ }
+
+ &:hover {
+   border-color: var(--eds-theme-color-button-icon-warning-border-hover);
+   background-color: var(--eds-theme-color-button-icon-warning-background-hover);
+   color: var(--eds-theme-color-button-icon-warning-text-hover);
+   :where(svg) {
+     color: var(--eds-theme-color-button-icon-warning-hover);
+   }
+ }
+
+ &:active {
+   border-color: var(--eds-theme-color-button-icon-warning-border-active);
+   background-color: var(--eds-theme-color-button-icon-warning-background-active);
+   color: var(--eds-theme-color-button-icon-warning-text-active);
+   :where(svg) {
+     color: var(--eds-theme-color-button-icon-warning-active);
+   }
+ }
+}
+
+/**
+* Icon error clickable style
+* 
+* A clickable style that strips out borders, backgrounds, etc.
+*
+* Use for Close "X" buttons, tooltip icons, and other.
+*/
+:where(.button--icon).button--error {
+ border-color: var(--eds-theme-color-button-icon-error-border);
+ background-color: var(--eds-theme-color-button-icon-error-background);
+ color: var(--eds-theme-color-button-icon-error-text);
+
+ :where(svg) {
+   color: var(--eds-theme-color-button-icon-error);
+ }
+
+ &:hover {
+   border-color: var(--eds-theme-color-button-icon-error-border-hover);
+   background-color: var(--eds-theme-color-button-icon-error-background-hover);
+   color: var(--eds-theme-color-button-icon-error-text-hover);
+   :where(svg) {
+     color: var(--eds-theme-color-button-icon-error-hover);
+   }
+ }
+
+ &:active {
+   border-color: var(--eds-theme-color-button-icon-error-border-active);
+   background-color: var(--eds-theme-color-button-icon-error-background-active);
+   color: var(--eds-theme-color-button-icon-error-text-active);
+   :where(svg) {
+     color: var(--eds-theme-color-button-icon-error-active);
+   }
+ }
+}
+
+/**
+* Small clickable style
+*/
+.button--sm {
+ font: var(--eds-theme-typography-button-label-sm);
+ /**
+  * Height is used instead of vertical padding because the icon size we use would
+  * cause the height to expand
+  */
+ height: var(--eds-size-3);
+ padding: 0 var(--eds-size-1);
+}
+
+/**
+* Medium clickable style
+*/
+.button--md {
+ /**
+  * Height is used instead of vertical padding because the icon size we use would
+  * cause the height to expand
+  */
+ height: var(--eds-size-4);
+ padding: 0 var(--eds-size-1);
+}
+
+/**
+* Large clickable style
+*/
+.button--lg {
+ /**
+  * Height is used instead of vertical padding because the icon size we use would
+  * cause the height to expand
+  */
+ height: var(--eds-size-5);
+ padding: 0 var(--eds-size-2);
+}
+
+/**
+* Full-width clickable style
+* A block clickable style that fills 100% of the width of its container
+*/
+.button--full-width {
+ width: 100%;
+}
+
+
+/**
+ * Primary disabled button styles
+ */
+.button--primary {
+  &:disabled,
+  &:disabled:hover {
+    border-color: var(--eds-theme-color-border-disabled);
+    background-color: var(--eds-theme-color-background-disabled);
+    color: var(--eds-theme-color-button-primary-brand-text);
+  }
+}
+
+/**
+ * Secondary disabled button styles
+ */
+.button--secondary {
+  &:disabled,
+  &:disabled:hover {
+    border-color: var(--eds-theme-color-border-disabled);
+    background-color: transparent;
+    color: var(--eds-theme-color-text-disabled);
+
+    svg {
+      color: var(--eds-theme-color-text-disabled);
+    }
+  }
+}
+
+/**
+ * Icon disabled button styles
+ */
+.button--icon {
+  &:disabled,
+  &:disabled:hover {
+    border-color: var(--eds-theme-color-button-icon-brand-border);
+    background-color: var(--eds-theme-color-button-icon-background);
+    color: var(--eds-theme-color-text-disabled);
+
+    svg {
+      color: var(--eds-theme-color-text-disabled);
+    }
+  }
+}
+
+/**
+ * Loading icon rotation style
+ */
+.button.eds-is-loading svg path {
+  stroke: var(--eds-theme-color-text-disabled);
+}
+
+/** TODO: Remove ability for buttons to look like the link component in the next major version */
+
+/**
+ * Link button styles
+ */
+ .button--link {
+  @mixin textLink;
+ 
+  /**
+   * Override default Clickable styles
+   */
+  border: 0;
+  border-radius: 0;
+  background-color: transparent;
+  /**
+   * Smaller gap between text and icon in link button style
+   */
+  gap: 0.25em;
+ 
+  &:disabled,
+  &:disabled:hover {
+    color: var(--eds-theme-color-text-disabled);
+    text-decoration-color: var(--eds-theme-color-text-disabled);
+  }
+ }
+ 
+ /**
+ * Needs `:where` pseudoclass to reduce specificity so class overrides
+ * for margin can happen where used, but needs to be specific enough to override preflight.
+ */
+ a:where(.button--link),
+ button:where(.button--link) {
+  /* 2px padding gives the text breathing room in the focus state */
+  padding: 2px;
+  /**
+   * -2px margin compensates for the padding so the link doesn't have too much space between it
+   *  and surrounding text
+   */
+  margin: -2px;
+ }
+ 
+ /**
+ * Link neutral clickable style
+ */
+ :where(.button--link).button--neutral {
+  text-decoration-color: var(--eds-theme-color-link-neutral-text-decoration);
+ 
+  &:hover {
+    text-decoration-color: var(--eds-theme-color-link-neutral-text-decoration-hover);
+  }
+ 
+  &:focus-visible {
+    background-color: var(--eds-theme-color-link-neutral-background-focus);
+  }
+ 
+  @supports not selector(:focus-visible) {
+    &:focus {
+      background-color: var(--eds-theme-color-link-neutral-background-focus);
+    }
+  }
+ }
\ No newline at end of file
diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button-v1.stories.tsx
similarity index 98%
rename from src/components/Button/Button.stories.tsx
rename to src/components/Button/Button-v1.stories.tsx
index 1fa73e552b..8815c5f0d9 100644
--- a/src/components/Button/Button.stories.tsx
+++ b/src/components/Button/Button-v1.stories.tsx
@@ -1,12 +1,12 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import React from 'react';
-import { Button } from './Button';
+import { Button } from './Button-v1';
 import { SIZES, STATUSES } from '../ClickableStyle';
 
 import Icon from '../Icon';
 
 export default {
-  title: 'Components/Button',
+  title: 'Components/Button-v1',
   component: Button,
   args: {
     children: 'Button',
diff --git a/src/components/Button/Button-v1.tsx b/src/components/Button/Button-v1.tsx
new file mode 100644
index 0000000000..7ec98bdadf
--- /dev/null
+++ b/src/components/Button/Button-v1.tsx
@@ -0,0 +1,119 @@
+import clsx from 'clsx';
+import type { ReactNode } from 'react';
+import React, { forwardRef } from 'react';
+import type { Size } from '../../util/variant-types';
+import type {
+  PrimaryStatus,
+  SecondaryStatus,
+  IconStatus,
+  LinkStatus,
+} from '../ClickableStyle/ClickableStyle';
+import LoadingIndicator from '../LoadingIndicator';
+
+import styles from './Button-v1.module.css';
+
+type ButtonHTMLElementProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+type ButtonVariants = IconStatus | PrimaryStatus | SecondaryStatus | LinkStatus;
+
+export type ButtonProps = ButtonHTMLElementProps & {
+  /**
+   * `Button` contents or label.
+   */
+  children: ReactNode;
+  /**
+   * Toggles clickable that fills the full width of its container
+   */
+  fullWidth?: boolean;
+  /**
+   * The size of the button on screen
+   */
+  size?: Extract<Size, 'sm' | 'md' | 'lg'>;
+  /**
+   * Disables the field and prevents editing the contents
+   */
+  disabled?: boolean;
+  /**
+   * Loading state passed down from higher level used to trigger loader and text change
+   */
+  loading?: boolean;
+  /**
+   * Determines type of clickable:
+   * - **button** The clickable is a clickable button.
+   * - **submit** The clickable is a submit clickable (submits form data).
+   * - **reset** The clickable is a reset clickable (resets the form-data to its initial values)
+   */
+  type?: 'button' | 'reset' | 'submit';
+  'data-testid'?: string;
+} & ButtonVariants;
+
+/**
+ * `import {Button} from "@chanzuckerberg/eds";`
+ *
+ * Component for making buttons that do not navigate the user to another page. Use button to trigger actions, menus,
+ * or other in-page activity.
+ *
+ * - If you need to style a navigation anchor, please use the `Link` component.
+ * - If you need to style a different element or component to
+ *   look like a button or link, you can use the `ClickableStyle` component.
+ */
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      children,
+      className,
+      fullWidth,
+      loading,
+      variant = 'secondary',
+      status = 'brand',
+      disabled = false,
+      type = 'button',
+      size = 'lg',
+      ...other
+    },
+    ref,
+  ) => {
+    const componentClassName = clsx(
+      // Base styles
+      styles['button'],
+      // Sizes
+      variant !== 'link' && [
+        size === 'sm' && styles['button--sm'],
+        size === 'md' && styles['button--md'],
+        size === 'lg' && styles['button--lg'],
+      ],
+      // Variants
+      variant === 'primary' && styles['button--primary'],
+      variant === 'secondary' && styles['button--secondary'],
+      variant === 'icon' && styles['button--icon'],
+      variant === 'link' && styles['button--link'],
+      // Colors
+      status === 'brand' && styles['button--brand'],
+      status === 'neutral' && styles['button--neutral'],
+      status === 'success' && styles['button--success'],
+      status === 'warning' && styles['button--warning'],
+      status === 'error' && styles['button--error'],
+      // Other options
+      fullWidth && styles['button--full-width'],
+      disabled && styles['button--disabled'],
+      loading && styles['eds-is-loading'],
+      className,
+    );
+
+    return (
+      <button
+        className={componentClassName}
+        disabled={disabled}
+        ref={ref}
+        tabIndex={disabled ? -1 : undefined}
+        type={type}
+        {...other}
+      >
+        {loading && <LoadingIndicator className="eds-is-loading" size="sm" />}
+        {children}
+      </button>
+    );
+  },
+);
+
+Button.displayName = 'Button';
diff --git a/src/components/Button/Button.module.css b/src/components/Button/Button.module.css
index 34a9c3f22a..2e559c5382 100644
--- a/src/components/Button/Button.module.css
+++ b/src/components/Button/Button.module.css
@@ -4,590 +4,137 @@
     # BUTTON
 \*------------------------------------*/
 
-/**
-* Styled clickable element that is based on the native <button> element.
-*/
 .button {
- font: var(--eds-theme-typography-button-label);
- display: inline-flex;
- justify-content: center;
- align-items: center;
- /* Adds a gap between children to automatically handle spacing between icons and text. */
- gap: 0.75rem;
- border-width: var(--eds-theme-border-width);
- border-style: solid;
- border-radius: var(--eds-theme-box-button-border-radius);
- cursor: pointer;
- transition-property: color, background-color, border-color;
- transition-duration: var(--eds-anim-fade-quick);
- transition-timing-function: var(--eds-anim-ease);
-
- :where(svg) {
-   /* Adds default size for icons passed in for consistency. */
-   --icon-size-default: 2em;
-   transition: color var(--eds-anim-fade-quick) var(--eds-anim-ease);
-
-   @media screen and (prefers-reduced-motion) {
-     transition: none;
-   }
- }
-
- &:focus-visible {
-   @mixin focus;
- }
-
- @supports not selector(:focus-visible) {
-   &:focus {
-     @mixin focus;
-   }
- }
-
- @media screen and (prefers-reduced-motion) {
-   transition: none;
- }
-
- &:disabled,
- &:disabled:hover {
-   cursor: not-allowed;
- }
-}
-
-/**
-* Margin 0 added becuase Safari has margin on buttons.
-* Needs `:where` pseudoclass to reduce specificity so class overrides
-*    for margin can happen where used.
-*/
-:where(.button) {
- margin: 0;
+  border-radius: var(--eds-border-radius-full);
+  border: 1px solid;
 }
 
 /**
-* Primary brand clickable style
-*/
-:where(.button--primary).button--brand {
- border-color: var(--eds-theme-color-button-primary-brand-border);
- background-color: var(--eds-theme-color-button-primary-brand-background);
- color: var(--eds-theme-color-button-primary-brand-text);
+ * Sizes and Widths
+ */
+.button--lg {
+  padding: 8px 20px;
+  font: var(--eds-theme-typography-button-lg);
 
- &:hover {
-   border-color: var(--eds-theme-color-button-primary-brand-border-hover);
-   background-color: var(--eds-theme-color-button-primary-brand-background-hover);
-   color: var(--eds-theme-color-button-primary-brand-text-hover);
- }
+  min-width: 72px;
+  max-width: 320px;
 
- &:active {
-   border-color: var(--eds-theme-color-button-primary-brand-border-active);
-   background-color: var(--eds-theme-color-button-primary-brand-background-active);
-   color: var(--eds-theme-color-button-primary-brand-text-active);
- }
 }
 
-/**
-* Primary error clickable style
-*/
-:where(.button--primary).button--error {
- border-color: var(--eds-theme-color-button-primary-error-border);
- background-color: var(--eds-theme-color-button-primary-error-background);
- color: var(--eds-theme-color-button-primary-error-text);
-
- &:hover {
-   border-color: var(--eds-theme-color-button-primary-error-border-hover);
-   background-color: var(--eds-theme-color-button-primary-error-background-hover);
-   color: var(--eds-theme-color-button-primary-error-text-hover);
- }
+.button--md {
+  padding: 4px 16px;
+  font: var(--eds-theme-typography-button-md);
 
- &:active {
-   border-color: var(--eds-theme-color-button-primary-error-border-active);
-   background-color: var(--eds-theme-color-button-primary-error-background-active);
-   color: var(--eds-theme-color-button-primary-error-text-active);
- }
+  min-width: 60px;
+  max-width: 256px;
 }
 
-/**
-* Secondary brand clickable style
-*/
-:where(.button--secondary).button--brand {
- border-color: var(--eds-theme-color-button-secondary-brand-border);
- background-color: var(--eds-theme-color-button-secondary-brand-background);
- color: var(--eds-theme-color-button-secondary-brand-text);
-
- :where(svg) {
-   color: var(--eds-theme-color-button-secondary-brand-icon);
- }
-
- &:hover {
-   border-color: var(--eds-theme-color-button-secondary-brand-border-hover);
-   background-color: var(--eds-theme-color-button-secondary-brand-background-hover);
-   color: var(--eds-theme-color-button-secondary-brand-text-hover);
-   :where(svg) {
-     color: var(--eds-theme-color-button-secondary-brand-icon-hover);
-   }
- }
+.button--sm {
+  padding: 4px 12px;
+  /* TODO: need eds-theme-typography-button-sm => preset-009 */
+  font: var(--eds-typography-preset-009);
 
- &:active {
-   border-color: var(--eds-theme-color-button-secondary-brand-border-active);
-   background-color: var(--eds-theme-color-button-secondary-brand-background-active);
-   color: var(--eds-theme-color-button-secondary-brand-text-active);
-   :where(svg) {
-     color: var(--eds-theme-color-button-secondary-brand-icon-focus);
-   }
- }
+  min-width: 48px;
+  max-width: 192px;
 }
 
-/**
-* Secondary neutral clickable style
-*/
-:where(.button--secondary).button--neutral {
- border-color: var(--eds-theme-color-button-secondary-neutral-border);
- background-color: var(--eds-theme-color-button-secondary-neutral-background);
- color: var(--eds-theme-color-button-secondary-neutral-text);
-
- :where(svg) {
-   color: var(--eds-theme-color-button-secondary-neutral-icon);
- }
-
- &:hover {
-   border-color: var(--eds-theme-color-button-secondary-neutral-border-hover);
-   background-color: var(--eds-theme-color-button-secondary-neutral-background-hover);
-   color: var(--eds-theme-color-button-secondary-neutral-text-hover);
-   :where(svg) {
-     color: var(--eds-theme-color-button-secondary-neutral-icon-hover);
-   }
- }
-
- &:active {
-   border-color: var(--eds-theme-color-button-secondary-neutral-border-active);
-   background-color: var(--eds-theme-color-button-secondary-neutral-background-active);
-   color: var(--eds-theme-color-button-secondary-neutral-text-active);
-   :where(svg) {
-     color: var(--eds-theme-color-button-secondary-neutral-icon-active);
-   }
- }
+.button--full-width {
+  width: 100%;
 }
 
 /**
-* Secondary success clickable style
-*/
-:where(.button--secondary).button--success {
- border-color: var(--eds-theme-color-button-secondary-success-border);
- background-color: var(--eds-theme-color-button-secondary-success-background);
- color: var(--eds-theme-color-button-secondary-success-text);
-
- :where(svg) {
-   color: var(--eds-theme-color-button-secondary-success-icon);
- }
-
- &:hover {
-   border-color: var(--eds-theme-color-button-secondary-success-border-hover);
-   background-color: var(--eds-theme-color-button-secondary-success-background-hover);
-   color: var(--eds-theme-color-button-secondary-success-text-hover);
-   :where(svg) {
-     color: var(--eds-theme-color-button-secondary-success-icon-hover);
-   }
- }
-
- &:active {
-   border-color: var(--eds-theme-color-button-secondary-success-border-active);
-   background-color: var(--eds-theme-color-button-secondary-success-background-active);
-   color: var(--eds-theme-color-button-secondary-success-text-active);
-   :where(svg) {
-     color: var(--eds-theme-color-button-secondary-success-icon-active);
-   }
- }
+ * Anatomy and iconLayout (w/ size)
+ */
+.button--lg.button--layout-left {
+  padding-left: 16px;
 }
 
-/**
-* Secondary warning clickable style
-*/
-:where(.button--secondary).button--warning {
- border-color: var(--eds-theme-color-button-secondary-warning-border);
- background-color: var(--eds-theme-color-button-secondary-warning-background);
- color: var(--eds-theme-color-button-secondary-warning-text);
-
- :where(svg) {
-   color: var(--eds-theme-color-button-secondary-warning-icon);
- }
-
- &:hover {
-   border-color: var(--eds-theme-color-button-secondary-warning-border-hover);
-   background-color: var(--eds-theme-color-button-secondary-warning-background-hover);
-   color: var(--eds-theme-color-button-secondary-warning-text-hover);
-   :where(svg) {
-     color: var(--eds-theme-color-button-secondary-warning-icon-hover);
-   }
- }
-
- &:active {
-   border-color: var(--eds-theme-color-button-secondary-warning-border-active);
-   background-color: var(--eds-theme-color-button-secondary-warning-background-active);
-   color: var(--eds-theme-color-button-secondary-warning-text-active);
-   :where(svg) {
-     color: var(--eds-theme-color-button-secondary-warning-icon-active);
-   }
- }
+.button--lg.button--layout-right {
+  padding-right: 16px;
 }
 
-/**
-* Secondary error clickable style
-*/
-:where(.button--secondary).button--error {
- border-color: var(--eds-theme-color-button-secondary-error-border);
- background-color: var(--eds-theme-color-button-secondary-error-background);
- color: var(--eds-theme-color-button-secondary-error-text);
-
- :where(svg) {
-   color: var(--eds-theme-color-button-secondary-error-icon);
- }
-
- &:hover {
-   border-color: var(--eds-theme-color-button-secondary-error-border-hover);
-   background-color: var(--eds-theme-color-button-secondary-error-background-hover);
-   color: var(--eds-theme-color-button-secondary-error-text-hover);
-   :where(svg) {
-     color: var(--eds-theme-color-button-secondary-error-icon-hover);
-   }
- }
-
- &:active {
-   border-color: var(--eds-theme-color-button-secondary-error-border-active);
-   background-color: var(--eds-theme-color-button-secondary-error-background-active);
-   color: var(--eds-theme-color-button-secondary-error-text-active);
-   :where(svg) {
-     color: var(--eds-theme-color-button-secondary-error-icon-active);
-   }
- }
+.button--lg.button-layout-icon-only {
+  padding: 8px;
 }
 
 /**
-* Icon brand clickable style
-* 
-* A clickable style that strips out borders, backgrounds, etc.
-*
-* Use for Close "X" buttons, tooltip icons, and other.
-*/
-:where(.button--icon).button--brand {
- border-color: var(--eds-theme-color-button-icon-brand-border);
- background-color: var(--eds-theme-color-button-icon-brand-background);
- color: var(--eds-theme-color-button-icon-brand-text);
-
- :where(svg) {
-   color: var(--eds-theme-color-button-icon-brand);
- }
-
- &:hover {
-   border-color: var(--eds-theme-color-button-icon-brand-border-hover);
-   background-color: var(--eds-theme-color-button-icon-brand-background-hover);
-   color: var(--eds-theme-color-button-icon-brand-text-hover);
-   :where(svg) {
-     color: var(--eds-theme-color-button-icon-brand-hover);
-   }
- }
+ * Rank & Emphasis
+ * TODO: replace temp tokens with new color tokens
+ */
+.button--primary.button--variant-default {
+  color: white;
 
- &:active {
-   border-color: var(--eds-theme-color-button-icon-brand-border-active);
-   background-color: var(--eds-theme-color-button-icon-brand-background-active);
-   color: var(--eds-theme-color-button-icon-brand-text-active);
-   :where(svg) {
-     color: var(--eds-theme-color-button-icon-brand-active);
-   }
- }
+  background-color: blue;
+  border-style: solid;
 }
 
-/**
-* Icon neutral clickable style
-* 
-* A clickable style that strips out borders, backgrounds, etc.
-*
-* Use for Close "X" buttons, tooltip icons, and other.
-*/
-:where(.button--icon).button--neutral {
- border-color: var(--eds-theme-color-button-icon-neutral-border);
- background-color: var(--eds-theme-color-button-icon-neutral-background);
- color: var(--eds-theme-color-button-icon-neutral-text);
+.button--secondary.button--variant-default {
+  background-color: white;
 
- :where(svg) {
-   color: var(--eds-theme-color-button-icon-neutral);
- }
-
- &:hover {
-   border-color: var(--eds-theme-color-button-icon-neutral-border-hover);
-   background-color: var(--eds-theme-color-button-icon-neutral-background-hover);
-   color: var(--eds-theme-color-button-icon-neutral-text-hover);
-   :where(svg) {
-     color: var(--eds-theme-color-button-icon-neutral-hover);
-   }
- }
-
- &:active {
-   border-color: var(--eds-theme-color-button-icon-neutral-border-active);
-   background-color: var(--eds-theme-color-button-icon-neutral-background-active);
-   color: var(--eds-theme-color-button-icon-neutral-text-active);
-   :where(svg) {
-     color: var(--eds-theme-color-button-icon-neutral-active);
-   }
- }
+  color: blue;
+  border-color: blue;
 }
 
-/**
-* Icon success clickable style
-* 
-* A clickable style that strips out borders, backgrounds, etc.
-*
-* Use for Close "X" buttons, tooltip icons, and other.
-*/
-:where(.button--icon).button--success {
- border-color: var(--eds-theme-color-button-icon-success-border);
- background-color: var(--eds-theme-color-button-icon-success-background);
- color: var(--eds-theme-color-button-icon-success-text);
-
- :where(svg) {
-   color: var(--eds-theme-color-button-icon-success);
- }
-
- &:hover {
-   border-color: var(--eds-theme-color-button-icon-success-border-hover);
-   background-color: var(--eds-theme-color-button-icon-success-background-hover);
-   color: var(--eds-theme-color-button-icon-success-text-hover);
-   :where(svg) {
-     color: var(--eds-theme-color-button-icon-success-hover);
-   }
- }
+.button--tertiary.button--variant-default {
+  border-color: white;
+  background-color: white;
 
- &:active {
-   border-color: var(--eds-theme-color-button-icon-success-border-active);
-   background-color: var(--eds-theme-color-button-icon-success-background-active);
-   color: var(--eds-theme-color-button-icon-success-text-active);
-   :where(svg) {
-     color: var(--eds-theme-color-button-icon-success-active);
-   }
- }
+  color: blue;
 }
 
-/**
-* Icon warning clickable style
-* 
-* A clickable style that strips out borders, backgrounds, etc.
-*
-* Use for Close "X" buttons, tooltip icons, and other.
-*/
-:where(.button--icon).button--warning {
- border-color: var(--eds-theme-color-button-icon-warning-border);
- background-color: var(--eds-theme-color-button-icon-warning-background);
- color: var(--eds-theme-color-button-icon-warning-text);
-
- :where(svg) {
-   color: var(--eds-theme-color-button-icon-warning);
- }
-
- &:hover {
-   border-color: var(--eds-theme-color-button-icon-warning-border-hover);
-   background-color: var(--eds-theme-color-button-icon-warning-background-hover);
-   color: var(--eds-theme-color-button-icon-warning-text-hover);
-   :where(svg) {
-     color: var(--eds-theme-color-button-icon-warning-hover);
-   }
- }
-
- &:active {
-   border-color: var(--eds-theme-color-button-icon-warning-border-active);
-   background-color: var(--eds-theme-color-button-icon-warning-background-active);
-   color: var(--eds-theme-color-button-icon-warning-text-active);
-   :where(svg) {
-     color: var(--eds-theme-color-button-icon-warning-active);
-   }
- }
+.button--tertiary.button--context-standalone {
+  color: darkblue;
 }
 
 /**
-* Icon error clickable style
-* 
-* A clickable style that strips out borders, backgrounds, etc.
-*
-* Use for Close "X" buttons, tooltip icons, and other.
-*/
-:where(.button--icon).button--error {
- border-color: var(--eds-theme-color-button-icon-error-border);
- background-color: var(--eds-theme-color-button-icon-error-background);
- color: var(--eds-theme-color-button-icon-error-text);
-
- :where(svg) {
-   color: var(--eds-theme-color-button-icon-error);
- }
-
- &:hover {
-   border-color: var(--eds-theme-color-button-icon-error-border-hover);
-   background-color: var(--eds-theme-color-button-icon-error-background-hover);
-   color: var(--eds-theme-color-button-icon-error-text-hover);
-   :where(svg) {
-     color: var(--eds-theme-color-button-icon-error-hover);
-   }
- }
+ * Button status variants
+ */
+.button--primary.button--variant-critical {
+  color: white;
 
- &:active {
-   border-color: var(--eds-theme-color-button-icon-error-border-active);
-   background-color: var(--eds-theme-color-button-icon-error-background-active);
-   color: var(--eds-theme-color-button-icon-error-text-active);
-   :where(svg) {
-     color: var(--eds-theme-color-button-icon-error-active);
-   }
- }
+  background-color: red;
+  border-color: red;
 }
 
-/**
-* Small clickable style
-*/
-.button--sm {
- font: var(--eds-theme-typography-button-label-sm);
- /**
-  * Height is used instead of vertical padding because the icon size we use would
-  * cause the height to expand
-  */
- height: var(--eds-size-3);
- padding: 0 var(--eds-size-1);
+.button--primary.button--variant-inverse {
+  color: blue;
+  background-color: white;
+  border-color: white;
 }
 
-/**
-* Medium clickable style
-*/
-.button--md {
- /**
-  * Height is used instead of vertical padding because the icon size we use would
-  * cause the height to expand
-  */
- height: var(--eds-size-4);
- padding: 0 var(--eds-size-1);
-}
+.button--secondary.button--variant-critical {
+  color: red;
 
-/**
-* Large clickable style
-*/
-.button--lg {
- /**
-  * Height is used instead of vertical padding because the icon size we use would
-  * cause the height to expand
-  */
- height: var(--eds-size-5);
- padding: 0 var(--eds-size-2);
+  background-color: white;
+  border-color: red;
 }
 
-/**
-* Full-width clickable style
-* A block clickable style that fills 100% of the width of its container
-*/
-.button--full-width {
- width: 100%;
+.button--secondary.button--variant-inverse {
+  color: white;
+  background-color: blue;
+  border-color: white;
 }
 
-
-/**
- * Primary disabled button styles
- */
-.button--primary {
-  &:disabled,
-  &:disabled:hover {
-    border-color: var(--eds-theme-color-border-disabled);
-    background-color: var(--eds-theme-color-background-disabled);
-    color: var(--eds-theme-color-button-primary-brand-text);
-  }
+.button--tertiary.button--variant-critical {
+  color: red;
+  border-color: white;
 }
 
-/**
- * Secondary disabled button styles
- */
-.button--secondary {
-  &:disabled,
-  &:disabled:hover {
-    border-color: var(--eds-theme-color-border-disabled);
-    background-color: transparent;
-    color: var(--eds-theme-color-text-disabled);
-
-    svg {
-      color: var(--eds-theme-color-text-disabled);
-    }
-  }
+.button--tertiary.button--variant-inverse {
+  color: white;
+  background-color: blue;
+  border-color: blue;
 }
 
-/**
- * Icon disabled button styles
- */
-.button--icon {
-  &:disabled,
-  &:disabled:hover {
-    border-color: var(--eds-theme-color-button-icon-brand-border);
-    background-color: var(--eds-theme-color-button-icon-background);
-    color: var(--eds-theme-color-text-disabled);
-
-    svg {
-      color: var(--eds-theme-color-text-disabled);
-    }
-  }
+.button--variant-default.button--disabled,
+.button--variant-critical.button--disabled {
+  border-color: gray;
+  background-color: gray;
+  color:darkslategray;
 }
 
-/**
- * Loading icon rotation style
- */
-.button.eds-is-loading svg path {
-  stroke: var(--eds-theme-color-text-disabled);
-}
-
-/** TODO: Remove ability for buttons to look like the link component in the next major version */
-
-/**
- * Link button styles
- */
- .button--link {
-  @mixin textLink;
- 
-  /**
-   * Override default Clickable styles
-   */
-  border: 0;
-  border-radius: 0;
-  background-color: transparent;
-  /**
-   * Smaller gap between text and icon in link button style
-   */
-  gap: 0.25em;
- 
-  &:disabled,
-  &:disabled:hover {
-    color: var(--eds-theme-color-text-disabled);
-    text-decoration-color: var(--eds-theme-color-text-disabled);
-  }
- }
- 
- /**
- * Needs `:where` pseudoclass to reduce specificity so class overrides
- * for margin can happen where used, but needs to be specific enough to override preflight.
- */
- a:where(.button--link),
- button:where(.button--link) {
-  /* 2px padding gives the text breathing room in the focus state */
-  padding: 2px;
-  /**
-   * -2px margin compensates for the padding so the link doesn't have too much space between it
-   *  and surrounding text
-   */
-  margin: -2px;
- }
- 
- /**
- * Link neutral clickable style
- */
- :where(.button--link).button--neutral {
-  text-decoration-color: var(--eds-theme-color-link-neutral-text-decoration);
- 
-  &:hover {
-    text-decoration-color: var(--eds-theme-color-link-neutral-text-decoration-hover);
-  }
- 
-  &:focus-visible {
-    background-color: var(--eds-theme-color-link-neutral-background-focus);
-  }
- 
-  @supports not selector(:focus-visible) {
-    &:focus {
-      background-color: var(--eds-theme-color-link-neutral-background-focus);
-    }
-  }
- }
\ No newline at end of file
+.button--variant-inverse.button--disabled {
+  border-color: darkslategray;
+  background-color: darkslategray;
+  color:gray;
+}
\ No newline at end of file
diff --git a/src/components/Button/Button.stories.ts b/src/components/Button/Button.stories.ts
new file mode 100644
index 0000000000..0d306f53ac
--- /dev/null
+++ b/src/components/Button/Button.stories.ts
@@ -0,0 +1,40 @@
+import type { StoryObj, Meta } from '@storybook/react';
+// import React from 'react';
+import { Button } from './Button';
+import { SIZES } from '../ClickableStyle';
+
+export default {
+  title: 'Components/Button',
+  component: Button,
+  args: {
+    children: 'Button',
+    isFullWidth: false,
+    size: 'lg',
+    isLoading: false,
+  },
+  argTypes: {
+    size: {
+      control: {
+        type: 'select',
+      },
+      options: SIZES,
+    },
+    isFullWidth: {
+      control: 'boolean',
+    },
+    isLoading: {
+      control: 'boolean',
+    },
+  },
+  parameters: {
+    badges: ['intro-1.0', 'current-2.0'],
+  },
+} as Meta<Args>;
+
+type Args = React.ComponentProps<typeof Button>;
+
+export const Default: StoryObj<Args> = {
+  args: {
+    children: 'Default',
+  },
+};
diff --git a/src/components/Button/Button.test.tsx b/src/components/Button/Button.test.tsx
index cb99b39843..9adf371964 100644
--- a/src/components/Button/Button.test.tsx
+++ b/src/components/Button/Button.test.tsx
@@ -3,8 +3,8 @@ import type { StoryFile } from '@storybook/testing-react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
-import { Button } from './Button';
-import * as stories from './Button.stories';
+import { Button } from './Button-v1';
+import * as stories from './Button-v1.stories';
 
 describe('<Button />', () => {
   generateSnapshots(stories as StoryFile);
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index b5ca2299d5..cc25478ab9 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -2,50 +2,81 @@ import clsx from 'clsx';
 import type { ReactNode } from 'react';
 import React, { forwardRef } from 'react';
 import type { Size } from '../../util/variant-types';
-import type {
-  PrimaryStatus,
-  SecondaryStatus,
-  IconStatus,
-  LinkStatus,
-} from '../ClickableStyle/ClickableStyle';
+import Icon from '../Icon';
+import type { IconName } from '../Icon';
 import LoadingIndicator from '../LoadingIndicator';
 
 import styles from './Button.module.css';
 
 type ButtonHTMLElementProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
 
-type ButtonVariants = IconStatus | PrimaryStatus | SecondaryStatus | LinkStatus;
-
 export type ButtonProps = ButtonHTMLElementProps & {
+  // Component API
   /**
-   * The button contents or label.
+   * `Button` contents or label.
    */
   children: ReactNode;
   /**
-   * Toggles clickable that fills the full width of its container
+   * Determine the behavior of the button upon click:
+   * - **button** `Button` is a clickable button with no default behavior
+   * - **submit** `Button` is a clickable button that submits form data
+   * - **reset** `Button` is a clickable button that resets the form-data to its initial values
+   */
+  type?: 'button' | 'reset' | 'submit';
+
+  // Design API
+  /**
+   * Sets the hierarchy rank of the button
+   *
+   * **Default is `"primary"`**.
    */
-  fullWidth?: boolean;
+  rank?: 'primary' | 'secondary' | 'tertiary';
+
   /**
    * The size of the button on screen
    */
   size?: Extract<Size, 'sm' | 'md' | 'lg'>;
+
   /**
-   * Disables the field and prevents editing the contents
+   * The variant of the default tertiary button.
    */
-  disabled?: boolean;
+  context?: 'default' | 'standalone';
+
   /**
-   * Loading state passed down from higher level used to trigger loader and text change
+   * Icon from the set of defined EDS icon set, when `iconLayout` is used.
    */
-  loading?: boolean;
+  icon?: IconName;
+
   /**
-   * Determines type of clickable:
-   * - **button** The clickable is a clickable button.
-   * - **submit** The clickable is a submit clickable (submits form data).
-   * - **reset** The clickable is a reset clickable (resets the form-data to its initial values)
+   * Allows configuation of the icon's positioning within `Button`.
+   *
+   * - When set to a value besides `"none"`, an icon must be specified.
+   * - When `"icon-only"`, `aria-label` must be given a value.
    */
-  type?: 'button' | 'reset' | 'submit';
-  'data-testid'?: string;
-} & ButtonVariants;
+  iconLayout?: 'none' | 'left' | 'right' | 'icon-only';
+
+  /**
+   * Status (color) variant for `Button`.
+   *
+   * **Default is `"default"`**.
+   */
+  variant?: 'default' | 'critical' | 'inverse';
+
+  /**
+   * Whether the width of the button is set to the full layout.
+   */
+  isFullWidth?: boolean;
+
+  /**
+   * Whether `Button` is set to disabled state (disables interaction and updates appearance).
+   */
+  isDisabled?: boolean;
+
+  /**
+   * Loading state passed down from higher level used to trigger loader and text change.
+   */
+  isLoading?: boolean;
+};
 
 /**
  * `import {Button} from "@chanzuckerberg/eds";`
@@ -62,55 +93,54 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     {
       children,
       className,
-      fullWidth,
-      loading,
-      variant = 'secondary',
-      status = 'brand',
-      disabled = false,
+      context,
+      icon = 'empty-circle',
+      iconLayout = 'none',
+      isDisabled,
+      isFullWidth,
+      isLoading,
       type = 'button',
+      rank = 'primary',
       size = 'lg',
+      variant = 'default',
       ...other
     },
     ref,
   ) => {
     const componentClassName = clsx(
-      // Base styles
       styles['button'],
-      // Sizes
-      variant !== 'link' && [
-        size === 'sm' && styles['button--sm'],
-        size === 'md' && styles['button--md'],
-        size === 'lg' && styles['button--lg'],
-      ],
-      // Variants
-      variant === 'primary' && styles['button--primary'],
-      variant === 'secondary' && styles['button--secondary'],
-      variant === 'icon' && styles['button--icon'],
-      variant === 'link' && styles['button--link'],
-      // Colors
-      status === 'brand' && styles['button--brand'],
-      status === 'neutral' && styles['button--neutral'],
-      status === 'success' && styles['button--success'],
-      status === 'warning' && styles['button--warning'],
-      status === 'error' && styles['button--error'],
-      // Other options
-      fullWidth && styles['button--full-width'],
-      disabled && styles['button--disabled'],
-      loading && styles['eds-is-loading'],
+      context && clsx(styles[`button--context-${context}`]),
+      iconLayout && clsx(styles[`button--layout-${iconLayout}`]),
+      isDisabled && clsx(styles['button--disabled']),
+      isFullWidth && clsx(styles['button--full-width']),
+      rank && clsx(styles[`button--${rank}`]),
+      size && clsx(styles[`button--${size}`]),
+      variant && clsx(styles[`button--variant-${variant}`]),
       className,
     );
 
     return (
       <button
         className={componentClassName}
-        disabled={disabled}
+        disabled={isDisabled}
         ref={ref}
-        tabIndex={disabled ? -1 : undefined}
+        tabIndex={isDisabled ? -1 : undefined}
         type={type}
         {...other}
       >
-        {loading && <LoadingIndicator className="eds-is-loading" size="sm" />}
-        {children}
+        {(iconLayout === 'left' || iconLayout === 'icon-only') && (
+          <Icon
+            name={icon}
+            purpose="decorative"
+            size={iconLayout === 'icon-only' ? '24px' : '16px'}
+          />
+        )}
+        {/* TODO: make buttons retain width on isLoading */}
+        {isLoading && <LoadingIndicator className="eds-is-loading" size="sm" />}
+        {iconLayout !== 'icon-only' && !isLoading && children}
+        {iconLayout === 'right' && (
+          <Icon name={icon} purpose="decorative" size="16px" />
+        )}
       </button>
     );
   },