diff --git a/.changeset/tender-queens-juggle.md b/.changeset/tender-queens-juggle.md
new file mode 100644
index 00000000000..4f1977e2bcd
--- /dev/null
+++ b/.changeset/tender-queens-juggle.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+feat(ButtonBase): Remove css modules feature flag from ButtonBase
diff --git a/packages/react/src/Button/ButtonBase.tsx b/packages/react/src/Button/ButtonBase.tsx
index 752525b1ad9..d49124a624f 100644
--- a/packages/react/src/Button/ButtonBase.tsx
+++ b/packages/react/src/Button/ButtonBase.tsx
@@ -1,13 +1,9 @@
 import type {ComponentPropsWithRef} from 'react'
-import React, {forwardRef, useMemo} from 'react'
+import React, {forwardRef} from 'react'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import Box from '../Box'
-import type {BetterSystemStyleObject} from '../sx'
-import {merge} from '../sx'
-import {useTheme} from '../ThemeProvider'
 import type {ButtonProps} from './types'
-import {StyledButton} from './types'
-import {getVariantStyles, getButtonStyles, getAlignContentSize} from './styles'
+import {getAlignContentSize} from './styles'
 import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef'
 import {defaultSxProp} from '../utils/defaultSxProp'
 import {VisuallyHidden} from '../VisuallyHidden'
@@ -18,20 +14,8 @@ import {ConditionalWrapper} from '../internal/components/ConditionalWrapper'
 import {AriaStatus} from '../live-region'
 import {clsx} from 'clsx'
 import classes from './ButtonBase.module.css'
-import {useFeatureFlag} from '../FeatureFlags'
 import {isElement} from 'react-is'
 
-const iconWrapStyles = {
-  display: 'flex',
-  pointerEvents: 'none',
-}
-
-const renderVisual = (Visual: React.ElementType | React.ReactElement, loading: boolean, visualName: string) => (
-  <Box as="span" data-component={visualName} sx={{...iconWrapStyles}}>
-    {loading ? <Spinner size="small" /> : isElement(Visual) ? Visual : <Visual />}
-  </Box>
-)
-
 const renderModuleVisual = (
   Visual: React.ElementType | React.ReactElement,
   loading: boolean,
@@ -70,17 +54,9 @@ const ButtonBase = forwardRef(
       ...rest
     } = props
 
-    const enabled = useFeatureFlag('primer_react_css_modules_ga')
     const innerRef = React.useRef<HTMLButtonElement>(null)
     useRefObjectAsForwardedRef(forwardedRef, innerRef)
 
-    const {theme} = useTheme()
-    const baseStyles = useMemo(() => {
-      return merge.all([getButtonStyles(theme), getVariantStyles(variant, theme)])
-    }, [theme, variant])
-    const sxStyles = useMemo(() => {
-      return merge<BetterSystemStyleObject>(baseStyles, sxProp)
-    }, [baseStyles, sxProp])
     const uuid = useId(id)
     const loadingAnnouncementID = `${uuid}-loading-announcement`
 
@@ -104,131 +80,7 @@ const ButtonBase = forwardRef(
       }, [innerRef])
     }
 
-    if (enabled) {
-      if (sxProp !== defaultSxProp) {
-        return (
-          <ConditionalWrapper
-            // If anything is passsed to `loading`, we need the wrapper:
-            // If we just checked for `loading` as a boolean, the wrapper wouldn't be rendered
-            // when `loading` is `false`.
-            // Then, the component re-renders in a way that the button will lose focus when switching between loading states.
-            if={typeof loading !== 'undefined'}
-            className={block ? classes.ConditionalWrapper : undefined}
-            data-loading-wrapper
-          >
-            <Box
-              as={Component}
-              sx={sxProp}
-              aria-disabled={loading ? true : undefined}
-              {...rest}
-              ref={innerRef}
-              className={clsx(classes.ButtonBase, className)}
-              data-block={block ? 'block' : null}
-              data-inactive={inactive ? true : undefined}
-              data-loading={Boolean(loading)}
-              data-no-visuals={!LeadingVisual && !TrailingVisual && !TrailingAction ? true : undefined}
-              data-size={size}
-              data-variant={variant}
-              data-label-wrap={labelWrap}
-              aria-describedby={[loadingAnnouncementID, ariaDescribedBy]
-                .filter(descriptionID => Boolean(descriptionID))
-                .join(' ')}
-              // aria-labelledby is needed because the accessible name becomes unset when the button is in a loading state.
-              // We only set it when the button is in a loading state because it will supercede the aria-label when the screen
-              // reader announces the button name.
-              aria-labelledby={
-                loading
-                  ? [`${uuid}-label`, ariaLabelledBy].filter(labelID => Boolean(labelID)).join(' ')
-                  : ariaLabelledBy
-              }
-              id={id}
-              onClick={loading ? undefined : onClick}
-            >
-              {Icon ? (
-                loading ? (
-                  <Spinner size="small" />
-                ) : isElement(Icon) ? (
-                  Icon
-                ) : (
-                  <Icon />
-                )
-              ) : (
-                <>
-                  <Box
-                    as="span"
-                    data-component="buttonContent"
-                    sx={getAlignContentSize(alignContent)}
-                    className={classes.ButtonContent}
-                  >
-                    {
-                      /* If there are no leading/trailing visuals/actions to replace with a loading spinner,
-                     render a loading spiner in place of the button content. */
-                      loading &&
-                        !LeadingVisual &&
-                        !TrailingVisual &&
-                        !TrailingAction &&
-                        renderModuleVisual(Spinner, loading, 'loadingSpinner', false)
-                    }
-                    {
-                      /* Render a leading visual unless the button is in a loading state.
-                      Then replace the leading visual with a loading spinner. */
-                      LeadingVisual && renderModuleVisual(LeadingVisual, Boolean(loading), 'leadingVisual', false)
-                    }
-                    {children && (
-                      <span data-component="text" className={classes.Label} id={loading ? `${uuid}-label` : undefined}>
-                        {children}
-                      </span>
-                    )}
-                    {
-                      /* If there is a count, render a counter label unless there is a trailing visual.
-                     Then render the counter label as a trailing visual.
-                     Replace the counter label or the trailing visual with a loading spinner if:
-                     - the button is in a loading state
-                     - there is no leading visual to replace with a loading spinner
-                  */
-                      count !== undefined && !TrailingVisual
-                        ? renderModuleVisual(
-                            () => (
-                              <CounterLabel className={classes.CounterLabel} data-component="ButtonCounter">
-                                {count}
-                              </CounterLabel>
-                            ),
-                            Boolean(loading) && !LeadingVisual,
-                            'trailingVisual',
-                            true,
-                          )
-                        : TrailingVisual
-                          ? renderModuleVisual(
-                              TrailingVisual,
-                              Boolean(loading) && !LeadingVisual,
-                              'trailingVisual',
-                              false,
-                            )
-                          : null
-                    }
-                  </Box>
-                  {
-                    /* If there is a trailing action, render it unless the button is in a loading state
-                   and there is no leading or trailing visual to replace with a loading spinner. */
-                    TrailingAction &&
-                      renderModuleVisual(
-                        TrailingAction,
-                        Boolean(loading) && !LeadingVisual && !TrailingVisual,
-                        'trailingAction',
-                        false,
-                      )
-                  }
-                </>
-              )}
-            </Box>
-            {loading && (
-              <VisuallyHidden>
-                <AriaStatus id={loadingAnnouncementID}>{loadingAnnouncement}</AriaStatus>
-              </VisuallyHidden>
-            )}
-          </ConditionalWrapper>
-        )
-      }
+    if (sxProp !== defaultSxProp) {
       return (
         <ConditionalWrapper
           // If anything is passsed to `loading`, we need the wrapper:
@@ -239,10 +91,11 @@ const ButtonBase = forwardRef(
           className={block ? classes.ConditionalWrapper : undefined}
           data-loading-wrapper
         >
-          <Component
+          <Box
+            as={Component}
+            sx={sxProp}
             aria-disabled={loading ? true : undefined}
             {...rest}
-            // @ts-ignore temporary disable as we migrate to css modules, until we remove PolymorphicForwardRefComponent
             ref={innerRef}
             className={clsx(classes.ButtonBase, className)}
             data-block={block ? 'block' : null}
@@ -262,7 +115,6 @@ const ButtonBase = forwardRef(
               loading ? [`${uuid}-label`, ariaLabelledBy].filter(labelID => Boolean(labelID)).join(' ') : ariaLabelledBy
             }
             id={id}
-            // @ts-ignore temporary disable as we migrate to css modules, until we remove PolymorphicForwardRefComponent
             onClick={loading ? undefined : onClick}
           >
             {Icon ? (
@@ -275,7 +127,12 @@ const ButtonBase = forwardRef(
               )
             ) : (
               <>
-                <span data-component="buttonContent" data-align={alignContent} className={classes.ButtonContent}>
+                <Box
+                  as="span"
+                  data-component="buttonContent"
+                  sx={getAlignContentSize(alignContent)}
+                  className={classes.ButtonContent}
+                >
                   {
                     /* If there are no leading/trailing visuals/actions to replace with a loading spinner,
                      render a loading spiner in place of the button content. */
@@ -287,7 +144,7 @@ const ButtonBase = forwardRef(
                   }
                   {
                     /* Render a leading visual unless the button is in a loading state.
-                     Then replace the leading visual with a loading spinner. */
+                      Then replace the leading visual with a loading spinner. */
                     LeadingVisual && renderModuleVisual(LeadingVisual, Boolean(loading), 'leadingVisual', false)
                   }
                   {children && (
@@ -322,7 +179,7 @@ const ButtonBase = forwardRef(
                           )
                         : null
                   }
-                </span>
+                </Box>
                 {
                   /* If there is a trailing action, render it unless the button is in a loading state
                    and there is no leading or trailing visual to replace with a loading spinner. */
@@ -336,7 +193,7 @@ const ButtonBase = forwardRef(
                 }
               </>
             )}
-          </Component>
+          </Box>
           {loading && (
             <VisuallyHidden>
               <AriaStatus id={loadingAnnouncementID}>{loadingAnnouncement}</AriaStatus>
@@ -345,7 +202,6 @@ const ButtonBase = forwardRef(
         </ConditionalWrapper>
       )
     }
-
     return (
       <ConditionalWrapper
         // If anything is passsed to `loading`, we need the wrapper:
@@ -353,21 +209,21 @@ const ButtonBase = forwardRef(
         // when `loading` is `false`.
         // Then, the component re-renders in a way that the button will lose focus when switching between loading states.
         if={typeof loading !== 'undefined'}
-        sx={{display: block ? 'block' : 'inline-block'}}
+        className={block ? classes.ConditionalWrapper : undefined}
         data-loading-wrapper
       >
-        <StyledButton
-          as={Component}
-          sx={sxStyles}
+        <Component
           aria-disabled={loading ? true : undefined}
           {...rest}
+          // @ts-ignore temporary disable as we migrate to css modules, until we remove PolymorphicForwardRefComponent
           ref={innerRef}
-          className={className}
+          className={clsx(classes.ButtonBase, className)}
           data-block={block ? 'block' : null}
           data-inactive={inactive ? true : undefined}
           data-loading={Boolean(loading)}
           data-no-visuals={!LeadingVisual && !TrailingVisual && !TrailingAction ? true : undefined}
           data-size={size}
+          data-variant={variant}
           data-label-wrap={labelWrap}
           aria-describedby={[loadingAnnouncementID, ariaDescribedBy]
             .filter(descriptionID => Boolean(descriptionID))
@@ -379,6 +235,7 @@ const ButtonBase = forwardRef(
             loading ? [`${uuid}-label`, ariaLabelledBy].filter(labelID => Boolean(labelID)).join(' ') : ariaLabelledBy
           }
           id={id}
+          // @ts-ignore temporary disable as we migrate to css modules, until we remove PolymorphicForwardRefComponent
           onClick={loading ? undefined : onClick}
         >
           {Icon ? (
@@ -391,7 +248,7 @@ const ButtonBase = forwardRef(
             )
           ) : (
             <>
-              <Box as="span" data-component="buttonContent" sx={getAlignContentSize(alignContent)}>
+              <span data-component="buttonContent" data-align={alignContent} className={classes.ButtonContent}>
                 {
                   /* If there are no leading/trailing visuals/actions to replace with a loading spinner,
                      render a loading spiner in place of the button content. */
@@ -399,15 +256,15 @@ const ButtonBase = forwardRef(
                     !LeadingVisual &&
                     !TrailingVisual &&
                     !TrailingAction &&
-                    renderVisual(Spinner, loading, 'loadingSpinner')
+                    renderModuleVisual(Spinner, loading, 'loadingSpinner', false)
                 }
                 {
                   /* Render a leading visual unless the button is in a loading state.
                      Then replace the leading visual with a loading spinner. */
-                  LeadingVisual && renderVisual(LeadingVisual, Boolean(loading), 'leadingVisual')
+                  LeadingVisual && renderModuleVisual(LeadingVisual, Boolean(loading), 'leadingVisual', false)
                 }
                 {children && (
-                  <span data-component="text" id={loading ? `${uuid}-label` : undefined}>
+                  <span data-component="text" className={classes.Label} id={loading ? `${uuid}-label` : undefined}>
                     {children}
                   </span>
                 )}
@@ -419,25 +276,35 @@ const ButtonBase = forwardRef(
                      - there is no leading visual to replace with a loading spinner
                   */
                   count !== undefined && !TrailingVisual
-                    ? renderVisual(
-                        () => <CounterLabel data-component="ButtonCounter">{count}</CounterLabel>,
+                    ? renderModuleVisual(
+                        () => (
+                          <CounterLabel className={classes.CounterLabel} data-component="ButtonCounter">
+                            {count}
+                          </CounterLabel>
+                        ),
                         Boolean(loading) && !LeadingVisual,
                         'trailingVisual',
+                        true,
                       )
                     : TrailingVisual
-                      ? renderVisual(TrailingVisual, Boolean(loading) && !LeadingVisual, 'trailingVisual')
+                      ? renderModuleVisual(TrailingVisual, Boolean(loading) && !LeadingVisual, 'trailingVisual', false)
                       : null
                 }
-              </Box>
+              </span>
               {
                 /* If there is a trailing action, render it unless the button is in a loading state
                    and there is no leading or trailing visual to replace with a loading spinner. */
                 TrailingAction &&
-                  renderVisual(TrailingAction, Boolean(loading) && !LeadingVisual && !TrailingVisual, 'trailingAction')
+                  renderModuleVisual(
+                    TrailingAction,
+                    Boolean(loading) && !LeadingVisual && !TrailingVisual,
+                    'trailingAction',
+                    false,
+                  )
               }
             </>
           )}
-        </StyledButton>
+        </Component>
         {loading && (
           <VisuallyHidden>
             <AriaStatus id={loadingAnnouncementID}>{loadingAnnouncement}</AriaStatus>
diff --git a/packages/react/src/Button/__tests__/__snapshots__/Button.test.tsx.snap b/packages/react/src/Button/__tests__/__snapshots__/Button.test.tsx.snap
index 27d49686024..9808d784a94 100644
--- a/packages/react/src/Button/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/packages/react/src/Button/__tests__/__snapshots__/Button.test.tsx.snap
@@ -1,315 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Button respects block prop 1`] = `
-.c1 {
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
-.c0 {
-  border-radius: 2;
-  border: 1px solid;
-  border-color: var(--button-default-borderColor-rest,undefined);
-  font-family: inherit;
-  font-weight: semibold;
-  font-size: 14px;
-  cursor: pointer;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  text-align: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  height: 32px;
-  padding: 0 12px;
-  gap: 8px;
-  min-width: -webkit-max-content;
-  min-width: -moz-max-content;
-  min-width: max-content;
-  -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1);
-  transition: 80ms cubic-bezier(0.65,0,0.35,1);
-  -webkit-transition-property: color,fill,background-color,border-color;
-  transition-property: color,fill,background-color,border-color;
-  color: btn.text;
-  background-color: btn.bg;
-  box-shadow: undefined,undefined;
-}
-
-.c0:focus:not(:disabled) {
-  box-shadow: none;
-  outline: 2px solid;
-  outline-offset: -2px;
-}
-
-.c0:focus:not(:disabled):not(:focus-visible) {
-  outline: solid 1px transparent;
-}
-
-.c0:focus-visible:not(:disabled) {
-  box-shadow: none;
-  outline: 2px solid;
-  outline-offset: -2px;
-}
-
-.c0[href] {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c0[href]:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.c0:hover {
-  -webkit-transition-duration: 80ms;
-  transition-duration: 80ms;
-}
-
-.c0:active {
-  -webkit-transition: none;
-  transition: none;
-}
-
-.c0[data-inactive] {
-  cursor: auto;
-}
-
-.c0:disabled {
-  cursor: not-allowed;
-  box-shadow: none;
-  color: primer.fg.disabled;
-  border-color: var(--button-default-borderColor-disabled,undefined);
-  background-color: var(--button-default-bgColor-disabled,undefined);
-}
-
-.c0:disabled [data-component=ButtonCounter] {
-  color: inherit;
-}
-
-.c0 [data-component=ButtonCounter] {
-  font-size: 12px;
-  background-color: btn.counterBg;
-}
-
-.c0[data-component=IconButton] {
-  display: inline-grid;
-  padding: unset;
-  place-content: center;
-  width: 32px;
-  min-width: unset;
-}
-
-.c0[data-size="small"] {
-  padding: 0 8px;
-  height: 28px;
-  gap: 4px;
-  font-size: 12px;
-}
-
-.c0[data-size="small"] [data-component="text"] {
-  line-height: 1.6666667;
-}
-
-.c0[data-size="small"] [data-component=ButtonCounter] {
-  font-size: 12px;
-}
-
-.c0[data-size="small"] [data-component="buttonContent"] > :not(:last-child) {
-  margin-right: 4px;
-}
-
-.c0[data-size="small"][data-component=IconButton] {
-  width: 28px;
-  padding: unset;
-}
-
-.c0[data-size="large"] {
-  padding: 0 16px;
-  height: 40px;
-  gap: 8px;
-}
-
-.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
-  margin-right: 8px;
-}
-
-.c0[data-size="large"][data-component=IconButton] {
-  width: 40px;
-  padding: unset;
-}
-
-.c0[data-block="block"] {
-  width: 100%;
-}
-
-.c0[data-label-wrap="true"] {
-  min-width: -webkit-fit-content;
-  min-width: -moz-fit-content;
-  min-width: fit-content;
-  height: unset;
-  min-height: var(--control-medium-size,2rem);
-}
-
-.c0[data-label-wrap="true"] [data-component="buttonContent"] {
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-  padding-block: calc(var(--control-medium-paddingBlock,0.375rem) - 2px);
-}
-
-.c0[data-label-wrap="true"] [data-component="text"] {
-  white-space: unset;
-  word-break: break-word;
-}
-
-.c0[data-label-wrap="true"][data-size="small"] {
-  height: unset;
-  min-height: var(--control-small-size,1.75rem);
-}
-
-.c0[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"] {
-  padding-block: calc(var(--control-small-paddingBlock,0.25rem) - 2px);
-}
-
-.c0[data-label-wrap="true"][data-size="large"] {
-  height: unset;
-  min-height: var(--control-large-size,2.5rem);
-  padding-inline: var(--control-large-paddingInline-spacious,1rem);
-}
-
-.c0[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"] {
-  padding-block: calc(var(--control-large-paddingBlock,0.625rem) - 2px);
-}
-
-.c0[data-inactive]:not([disabled]) {
-  background-color: var(--button-inactive-bgColor,undefined);
-  border-color: var(--button-inactive-bgColor,undefined);
-  color: var(--button-inactive-fgColor,undefined);
-}
-
-.c0[data-inactive]:not([disabled]):focus-visible {
-  box-shadow: none;
-}
-
-.c0 [data-component="leadingVisual"] {
-  grid-area: leadingVisual;
-}
-
-.c0 [data-component="text"] {
-  grid-area: text;
-  line-height: 1.4285714;
-  white-space: nowrap;
-}
-
-.c0 [data-component="trailingVisual"] {
-  grid-area: trailingVisual;
-}
-
-.c0 [data-component="trailingAction"] {
-  margin-right: -4px;
-}
-
-.c0 [data-component="buttonContent"] {
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  display: grid;
-  grid-template-areas: "leadingVisual text trailingVisual";
-  grid-template-columns: min-content minmax(0,auto) min-content;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-align-content: center;
-  -ms-flex-line-pack: center;
-  align-content: center;
-}
-
-.c0 [data-component="buttonContent"] > :not(:last-child) {
-  margin-right: 8px;
-}
-
-.c0 [data-component="loadingSpinner"] {
-  grid-area: text;
-  margin-right: 0px !important;
-  place-self: center;
-  color: fg.muted;
-}
-
-.c0 [data-component="loadingSpinner"] + [data-component="text"] {
-  visibility: hidden;
-}
-
-.c0:hover:not([disabled]):not([data-inactive]) {
-  background-color: btn.hoverBg;
-  border-color: var(--button-default-borderColor-hover,undefined);
-}
-
-.c0:active:not([disabled]):not([data-inactive]) {
-  background-color: btn.activeBg;
-  border-color: var(--button-default-borderColor-active,undefined);
-}
-
-.c0[aria-expanded=true] {
-  background-color: btn.activeBg;
-  border-color: var(--button-default-borderColor-active,undefined);
-}
-
-.c0 [data-component="leadingVisual"],
-.c0 [data-component="trailingVisual"],
-.c0 [data-component="trailingAction"] {
-  color: var(--button-color,undefined);
-}
-
-.c0[data-component="IconButton"][data-no-visuals]:not(:disabled) {
-  color: fg.muted;
-}
-
-@media (forced-colors:active) {
-  .c0:focus {
-    outline: solid 1px transparent;
-  }
-}
-
 <button
   aria-describedby="test-button-loading-announcement"
-  class="c0"
+  class="ButtonBase"
   data-block="block"
   data-loading="false"
   data-no-visuals="true"
   data-size="medium"
+  data-variant="default"
   id="test-button"
   type="button"
 >
   <span
-    class="c1"
+    class="ButtonContent"
+    data-align="center"
     data-component="buttonContent"
   >
     <span
+      class="Label"
       data-component="text"
     >
       Block
@@ -319,314 +28,23 @@ exports[`Button respects block prop 1`] = `
 `;
 
 exports[`Button respects the alignContent prop 1`] = `
-.c1 {
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-}
-
-.c0 {
-  border-radius: 2;
-  border: 1px solid;
-  border-color: var(--button-default-borderColor-rest,undefined);
-  font-family: inherit;
-  font-weight: semibold;
-  font-size: 14px;
-  cursor: pointer;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  text-align: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  height: 32px;
-  padding: 0 12px;
-  gap: 8px;
-  min-width: -webkit-max-content;
-  min-width: -moz-max-content;
-  min-width: max-content;
-  -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1);
-  transition: 80ms cubic-bezier(0.65,0,0.35,1);
-  -webkit-transition-property: color,fill,background-color,border-color;
-  transition-property: color,fill,background-color,border-color;
-  color: btn.text;
-  background-color: btn.bg;
-  box-shadow: undefined,undefined;
-}
-
-.c0:focus:not(:disabled) {
-  box-shadow: none;
-  outline: 2px solid;
-  outline-offset: -2px;
-}
-
-.c0:focus:not(:disabled):not(:focus-visible) {
-  outline: solid 1px transparent;
-}
-
-.c0:focus-visible:not(:disabled) {
-  box-shadow: none;
-  outline: 2px solid;
-  outline-offset: -2px;
-}
-
-.c0[href] {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c0[href]:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.c0:hover {
-  -webkit-transition-duration: 80ms;
-  transition-duration: 80ms;
-}
-
-.c0:active {
-  -webkit-transition: none;
-  transition: none;
-}
-
-.c0[data-inactive] {
-  cursor: auto;
-}
-
-.c0:disabled {
-  cursor: not-allowed;
-  box-shadow: none;
-  color: primer.fg.disabled;
-  border-color: var(--button-default-borderColor-disabled,undefined);
-  background-color: var(--button-default-bgColor-disabled,undefined);
-}
-
-.c0:disabled [data-component=ButtonCounter] {
-  color: inherit;
-}
-
-.c0 [data-component=ButtonCounter] {
-  font-size: 12px;
-  background-color: btn.counterBg;
-}
-
-.c0[data-component=IconButton] {
-  display: inline-grid;
-  padding: unset;
-  place-content: center;
-  width: 32px;
-  min-width: unset;
-}
-
-.c0[data-size="small"] {
-  padding: 0 8px;
-  height: 28px;
-  gap: 4px;
-  font-size: 12px;
-}
-
-.c0[data-size="small"] [data-component="text"] {
-  line-height: 1.6666667;
-}
-
-.c0[data-size="small"] [data-component=ButtonCounter] {
-  font-size: 12px;
-}
-
-.c0[data-size="small"] [data-component="buttonContent"] > :not(:last-child) {
-  margin-right: 4px;
-}
-
-.c0[data-size="small"][data-component=IconButton] {
-  width: 28px;
-  padding: unset;
-}
-
-.c0[data-size="large"] {
-  padding: 0 16px;
-  height: 40px;
-  gap: 8px;
-}
-
-.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
-  margin-right: 8px;
-}
-
-.c0[data-size="large"][data-component=IconButton] {
-  width: 40px;
-  padding: unset;
-}
-
-.c0[data-block="block"] {
-  width: 100%;
-}
-
-.c0[data-label-wrap="true"] {
-  min-width: -webkit-fit-content;
-  min-width: -moz-fit-content;
-  min-width: fit-content;
-  height: unset;
-  min-height: var(--control-medium-size,2rem);
-}
-
-.c0[data-label-wrap="true"] [data-component="buttonContent"] {
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-  padding-block: calc(var(--control-medium-paddingBlock,0.375rem) - 2px);
-}
-
-.c0[data-label-wrap="true"] [data-component="text"] {
-  white-space: unset;
-  word-break: break-word;
-}
-
-.c0[data-label-wrap="true"][data-size="small"] {
-  height: unset;
-  min-height: var(--control-small-size,1.75rem);
-}
-
-.c0[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"] {
-  padding-block: calc(var(--control-small-paddingBlock,0.25rem) - 2px);
-}
-
-.c0[data-label-wrap="true"][data-size="large"] {
-  height: unset;
-  min-height: var(--control-large-size,2.5rem);
-  padding-inline: var(--control-large-paddingInline-spacious,1rem);
-}
-
-.c0[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"] {
-  padding-block: calc(var(--control-large-paddingBlock,0.625rem) - 2px);
-}
-
-.c0[data-inactive]:not([disabled]) {
-  background-color: var(--button-inactive-bgColor,undefined);
-  border-color: var(--button-inactive-bgColor,undefined);
-  color: var(--button-inactive-fgColor,undefined);
-}
-
-.c0[data-inactive]:not([disabled]):focus-visible {
-  box-shadow: none;
-}
-
-.c0 [data-component="leadingVisual"] {
-  grid-area: leadingVisual;
-}
-
-.c0 [data-component="text"] {
-  grid-area: text;
-  line-height: 1.4285714;
-  white-space: nowrap;
-}
-
-.c0 [data-component="trailingVisual"] {
-  grid-area: trailingVisual;
-}
-
-.c0 [data-component="trailingAction"] {
-  margin-right: -4px;
-}
-
-.c0 [data-component="buttonContent"] {
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  display: grid;
-  grid-template-areas: "leadingVisual text trailingVisual";
-  grid-template-columns: min-content minmax(0,auto) min-content;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-align-content: center;
-  -ms-flex-line-pack: center;
-  align-content: center;
-}
-
-.c0 [data-component="buttonContent"] > :not(:last-child) {
-  margin-right: 8px;
-}
-
-.c0 [data-component="loadingSpinner"] {
-  grid-area: text;
-  margin-right: 0px !important;
-  place-self: center;
-  color: fg.muted;
-}
-
-.c0 [data-component="loadingSpinner"] + [data-component="text"] {
-  visibility: hidden;
-}
-
-.c0:hover:not([disabled]):not([data-inactive]) {
-  background-color: btn.hoverBg;
-  border-color: var(--button-default-borderColor-hover,undefined);
-}
-
-.c0:active:not([disabled]):not([data-inactive]) {
-  background-color: btn.activeBg;
-  border-color: var(--button-default-borderColor-active,undefined);
-}
-
-.c0[aria-expanded=true] {
-  background-color: btn.activeBg;
-  border-color: var(--button-default-borderColor-active,undefined);
-}
-
-.c0 [data-component="leadingVisual"],
-.c0 [data-component="trailingVisual"],
-.c0 [data-component="trailingAction"] {
-  color: var(--button-color,undefined);
-}
-
-.c0[data-component="IconButton"][data-no-visuals]:not(:disabled) {
-  color: fg.muted;
-}
-
-@media (forced-colors:active) {
-  .c0:focus {
-    outline: solid 1px transparent;
-  }
-}
-
 <button
   aria-describedby="test-button-loading-announcement"
-  class="c0"
+  class="ButtonBase"
   data-loading="false"
   data-no-visuals="true"
   data-size="medium"
+  data-variant="default"
   id="test-button"
   type="button"
 >
   <span
-    class="c1"
+    class="ButtonContent"
+    data-align="start"
     data-component="buttonContent"
   >
     <span
+      class="Label"
       data-component="text"
     >
       Align start
@@ -636,314 +54,23 @@ exports[`Button respects the alignContent prop 1`] = `
 `;
 
 exports[`Button respects the large size prop 1`] = `
-.c1 {
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
-.c0 {
-  border-radius: 2;
-  border: 1px solid;
-  border-color: var(--button-default-borderColor-rest,undefined);
-  font-family: inherit;
-  font-weight: semibold;
-  font-size: 14px;
-  cursor: pointer;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  text-align: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  height: 32px;
-  padding: 0 12px;
-  gap: 8px;
-  min-width: -webkit-max-content;
-  min-width: -moz-max-content;
-  min-width: max-content;
-  -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1);
-  transition: 80ms cubic-bezier(0.65,0,0.35,1);
-  -webkit-transition-property: color,fill,background-color,border-color;
-  transition-property: color,fill,background-color,border-color;
-  color: btn.text;
-  background-color: btn.bg;
-  box-shadow: undefined,undefined;
-}
-
-.c0:focus:not(:disabled) {
-  box-shadow: none;
-  outline: 2px solid;
-  outline-offset: -2px;
-}
-
-.c0:focus:not(:disabled):not(:focus-visible) {
-  outline: solid 1px transparent;
-}
-
-.c0:focus-visible:not(:disabled) {
-  box-shadow: none;
-  outline: 2px solid;
-  outline-offset: -2px;
-}
-
-.c0[href] {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c0[href]:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.c0:hover {
-  -webkit-transition-duration: 80ms;
-  transition-duration: 80ms;
-}
-
-.c0:active {
-  -webkit-transition: none;
-  transition: none;
-}
-
-.c0[data-inactive] {
-  cursor: auto;
-}
-
-.c0:disabled {
-  cursor: not-allowed;
-  box-shadow: none;
-  color: primer.fg.disabled;
-  border-color: var(--button-default-borderColor-disabled,undefined);
-  background-color: var(--button-default-bgColor-disabled,undefined);
-}
-
-.c0:disabled [data-component=ButtonCounter] {
-  color: inherit;
-}
-
-.c0 [data-component=ButtonCounter] {
-  font-size: 12px;
-  background-color: btn.counterBg;
-}
-
-.c0[data-component=IconButton] {
-  display: inline-grid;
-  padding: unset;
-  place-content: center;
-  width: 32px;
-  min-width: unset;
-}
-
-.c0[data-size="small"] {
-  padding: 0 8px;
-  height: 28px;
-  gap: 4px;
-  font-size: 12px;
-}
-
-.c0[data-size="small"] [data-component="text"] {
-  line-height: 1.6666667;
-}
-
-.c0[data-size="small"] [data-component=ButtonCounter] {
-  font-size: 12px;
-}
-
-.c0[data-size="small"] [data-component="buttonContent"] > :not(:last-child) {
-  margin-right: 4px;
-}
-
-.c0[data-size="small"][data-component=IconButton] {
-  width: 28px;
-  padding: unset;
-}
-
-.c0[data-size="large"] {
-  padding: 0 16px;
-  height: 40px;
-  gap: 8px;
-}
-
-.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
-  margin-right: 8px;
-}
-
-.c0[data-size="large"][data-component=IconButton] {
-  width: 40px;
-  padding: unset;
-}
-
-.c0[data-block="block"] {
-  width: 100%;
-}
-
-.c0[data-label-wrap="true"] {
-  min-width: -webkit-fit-content;
-  min-width: -moz-fit-content;
-  min-width: fit-content;
-  height: unset;
-  min-height: var(--control-medium-size,2rem);
-}
-
-.c0[data-label-wrap="true"] [data-component="buttonContent"] {
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-  padding-block: calc(var(--control-medium-paddingBlock,0.375rem) - 2px);
-}
-
-.c0[data-label-wrap="true"] [data-component="text"] {
-  white-space: unset;
-  word-break: break-word;
-}
-
-.c0[data-label-wrap="true"][data-size="small"] {
-  height: unset;
-  min-height: var(--control-small-size,1.75rem);
-}
-
-.c0[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"] {
-  padding-block: calc(var(--control-small-paddingBlock,0.25rem) - 2px);
-}
-
-.c0[data-label-wrap="true"][data-size="large"] {
-  height: unset;
-  min-height: var(--control-large-size,2.5rem);
-  padding-inline: var(--control-large-paddingInline-spacious,1rem);
-}
-
-.c0[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"] {
-  padding-block: calc(var(--control-large-paddingBlock,0.625rem) - 2px);
-}
-
-.c0[data-inactive]:not([disabled]) {
-  background-color: var(--button-inactive-bgColor,undefined);
-  border-color: var(--button-inactive-bgColor,undefined);
-  color: var(--button-inactive-fgColor,undefined);
-}
-
-.c0[data-inactive]:not([disabled]):focus-visible {
-  box-shadow: none;
-}
-
-.c0 [data-component="leadingVisual"] {
-  grid-area: leadingVisual;
-}
-
-.c0 [data-component="text"] {
-  grid-area: text;
-  line-height: 1.4285714;
-  white-space: nowrap;
-}
-
-.c0 [data-component="trailingVisual"] {
-  grid-area: trailingVisual;
-}
-
-.c0 [data-component="trailingAction"] {
-  margin-right: -4px;
-}
-
-.c0 [data-component="buttonContent"] {
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  display: grid;
-  grid-template-areas: "leadingVisual text trailingVisual";
-  grid-template-columns: min-content minmax(0,auto) min-content;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-align-content: center;
-  -ms-flex-line-pack: center;
-  align-content: center;
-}
-
-.c0 [data-component="buttonContent"] > :not(:last-child) {
-  margin-right: 8px;
-}
-
-.c0 [data-component="loadingSpinner"] {
-  grid-area: text;
-  margin-right: 0px !important;
-  place-self: center;
-  color: fg.muted;
-}
-
-.c0 [data-component="loadingSpinner"] + [data-component="text"] {
-  visibility: hidden;
-}
-
-.c0:hover:not([disabled]):not([data-inactive]) {
-  background-color: btn.hoverBg;
-  border-color: var(--button-default-borderColor-hover,undefined);
-}
-
-.c0:active:not([disabled]):not([data-inactive]) {
-  background-color: btn.activeBg;
-  border-color: var(--button-default-borderColor-active,undefined);
-}
-
-.c0[aria-expanded=true] {
-  background-color: btn.activeBg;
-  border-color: var(--button-default-borderColor-active,undefined);
-}
-
-.c0 [data-component="leadingVisual"],
-.c0 [data-component="trailingVisual"],
-.c0 [data-component="trailingAction"] {
-  color: var(--button-color,undefined);
-}
-
-.c0[data-component="IconButton"][data-no-visuals]:not(:disabled) {
-  color: fg.muted;
-}
-
-@media (forced-colors:active) {
-  .c0:focus {
-    outline: solid 1px transparent;
-  }
-}
-
 <button
   aria-describedby="test-button-loading-announcement"
-  class="c0"
+  class="ButtonBase"
   data-loading="false"
   data-no-visuals="true"
   data-size="large"
+  data-variant="default"
   id="test-button"
   type="button"
 >
   <span
-    class="c1"
+    class="ButtonContent"
+    data-align="center"
     data-component="buttonContent"
   >
     <span
+      class="Label"
       data-component="text"
     >
       Smol
@@ -953,314 +80,23 @@ exports[`Button respects the large size prop 1`] = `
 `;
 
 exports[`Button respects the small size prop 1`] = `
-.c1 {
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
-.c0 {
-  border-radius: 2;
-  border: 1px solid;
-  border-color: var(--button-default-borderColor-rest,undefined);
-  font-family: inherit;
-  font-weight: semibold;
-  font-size: 14px;
-  cursor: pointer;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  text-align: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  height: 32px;
-  padding: 0 12px;
-  gap: 8px;
-  min-width: -webkit-max-content;
-  min-width: -moz-max-content;
-  min-width: max-content;
-  -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1);
-  transition: 80ms cubic-bezier(0.65,0,0.35,1);
-  -webkit-transition-property: color,fill,background-color,border-color;
-  transition-property: color,fill,background-color,border-color;
-  color: btn.text;
-  background-color: btn.bg;
-  box-shadow: undefined,undefined;
-}
-
-.c0:focus:not(:disabled) {
-  box-shadow: none;
-  outline: 2px solid;
-  outline-offset: -2px;
-}
-
-.c0:focus:not(:disabled):not(:focus-visible) {
-  outline: solid 1px transparent;
-}
-
-.c0:focus-visible:not(:disabled) {
-  box-shadow: none;
-  outline: 2px solid;
-  outline-offset: -2px;
-}
-
-.c0[href] {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c0[href]:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.c0:hover {
-  -webkit-transition-duration: 80ms;
-  transition-duration: 80ms;
-}
-
-.c0:active {
-  -webkit-transition: none;
-  transition: none;
-}
-
-.c0[data-inactive] {
-  cursor: auto;
-}
-
-.c0:disabled {
-  cursor: not-allowed;
-  box-shadow: none;
-  color: primer.fg.disabled;
-  border-color: var(--button-default-borderColor-disabled,undefined);
-  background-color: var(--button-default-bgColor-disabled,undefined);
-}
-
-.c0:disabled [data-component=ButtonCounter] {
-  color: inherit;
-}
-
-.c0 [data-component=ButtonCounter] {
-  font-size: 12px;
-  background-color: btn.counterBg;
-}
-
-.c0[data-component=IconButton] {
-  display: inline-grid;
-  padding: unset;
-  place-content: center;
-  width: 32px;
-  min-width: unset;
-}
-
-.c0[data-size="small"] {
-  padding: 0 8px;
-  height: 28px;
-  gap: 4px;
-  font-size: 12px;
-}
-
-.c0[data-size="small"] [data-component="text"] {
-  line-height: 1.6666667;
-}
-
-.c0[data-size="small"] [data-component=ButtonCounter] {
-  font-size: 12px;
-}
-
-.c0[data-size="small"] [data-component="buttonContent"] > :not(:last-child) {
-  margin-right: 4px;
-}
-
-.c0[data-size="small"][data-component=IconButton] {
-  width: 28px;
-  padding: unset;
-}
-
-.c0[data-size="large"] {
-  padding: 0 16px;
-  height: 40px;
-  gap: 8px;
-}
-
-.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
-  margin-right: 8px;
-}
-
-.c0[data-size="large"][data-component=IconButton] {
-  width: 40px;
-  padding: unset;
-}
-
-.c0[data-block="block"] {
-  width: 100%;
-}
-
-.c0[data-label-wrap="true"] {
-  min-width: -webkit-fit-content;
-  min-width: -moz-fit-content;
-  min-width: fit-content;
-  height: unset;
-  min-height: var(--control-medium-size,2rem);
-}
-
-.c0[data-label-wrap="true"] [data-component="buttonContent"] {
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-  padding-block: calc(var(--control-medium-paddingBlock,0.375rem) - 2px);
-}
-
-.c0[data-label-wrap="true"] [data-component="text"] {
-  white-space: unset;
-  word-break: break-word;
-}
-
-.c0[data-label-wrap="true"][data-size="small"] {
-  height: unset;
-  min-height: var(--control-small-size,1.75rem);
-}
-
-.c0[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"] {
-  padding-block: calc(var(--control-small-paddingBlock,0.25rem) - 2px);
-}
-
-.c0[data-label-wrap="true"][data-size="large"] {
-  height: unset;
-  min-height: var(--control-large-size,2.5rem);
-  padding-inline: var(--control-large-paddingInline-spacious,1rem);
-}
-
-.c0[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"] {
-  padding-block: calc(var(--control-large-paddingBlock,0.625rem) - 2px);
-}
-
-.c0[data-inactive]:not([disabled]) {
-  background-color: var(--button-inactive-bgColor,undefined);
-  border-color: var(--button-inactive-bgColor,undefined);
-  color: var(--button-inactive-fgColor,undefined);
-}
-
-.c0[data-inactive]:not([disabled]):focus-visible {
-  box-shadow: none;
-}
-
-.c0 [data-component="leadingVisual"] {
-  grid-area: leadingVisual;
-}
-
-.c0 [data-component="text"] {
-  grid-area: text;
-  line-height: 1.4285714;
-  white-space: nowrap;
-}
-
-.c0 [data-component="trailingVisual"] {
-  grid-area: trailingVisual;
-}
-
-.c0 [data-component="trailingAction"] {
-  margin-right: -4px;
-}
-
-.c0 [data-component="buttonContent"] {
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  display: grid;
-  grid-template-areas: "leadingVisual text trailingVisual";
-  grid-template-columns: min-content minmax(0,auto) min-content;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-align-content: center;
-  -ms-flex-line-pack: center;
-  align-content: center;
-}
-
-.c0 [data-component="buttonContent"] > :not(:last-child) {
-  margin-right: 8px;
-}
-
-.c0 [data-component="loadingSpinner"] {
-  grid-area: text;
-  margin-right: 0px !important;
-  place-self: center;
-  color: fg.muted;
-}
-
-.c0 [data-component="loadingSpinner"] + [data-component="text"] {
-  visibility: hidden;
-}
-
-.c0:hover:not([disabled]):not([data-inactive]) {
-  background-color: btn.hoverBg;
-  border-color: var(--button-default-borderColor-hover,undefined);
-}
-
-.c0:active:not([disabled]):not([data-inactive]) {
-  background-color: btn.activeBg;
-  border-color: var(--button-default-borderColor-active,undefined);
-}
-
-.c0[aria-expanded=true] {
-  background-color: btn.activeBg;
-  border-color: var(--button-default-borderColor-active,undefined);
-}
-
-.c0 [data-component="leadingVisual"],
-.c0 [data-component="trailingVisual"],
-.c0 [data-component="trailingAction"] {
-  color: var(--button-color,undefined);
-}
-
-.c0[data-component="IconButton"][data-no-visuals]:not(:disabled) {
-  color: fg.muted;
-}
-
-@media (forced-colors:active) {
-  .c0:focus {
-    outline: solid 1px transparent;
-  }
-}
-
 <button
   aria-describedby="test-button-loading-announcement"
-  class="c0"
+  class="ButtonBase"
   data-loading="false"
   data-no-visuals="true"
   data-size="small"
+  data-variant="default"
   id="test-button"
   type="button"
 >
   <span
-    class="c1"
+    class="ButtonContent"
+    data-align="center"
     data-component="buttonContent"
   >
     <span
+      class="Label"
       data-component="text"
     >
       Smol
@@ -1270,317 +106,23 @@ exports[`Button respects the small size prop 1`] = `
 `;
 
 exports[`Button styles danger button appropriately 1`] = `
-.c1 {
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
-.c0 {
-  border-radius: 2;
-  border: 1px solid;
-  border-color: var(--button-default-borderColor-rest,undefined);
-  font-family: inherit;
-  font-weight: semibold;
-  font-size: 14px;
-  cursor: pointer;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  text-align: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  height: 32px;
-  padding: 0 12px;
-  gap: 8px;
-  min-width: -webkit-max-content;
-  min-width: -moz-max-content;
-  min-width: max-content;
-  -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1);
-  transition: 80ms cubic-bezier(0.65,0,0.35,1);
-  -webkit-transition-property: color,fill,background-color,border-color;
-  transition-property: color,fill,background-color,border-color;
-  color: btn.danger.text;
-  background-color: btn.bg;
-  box-shadow: undefined;
-}
-
-.c0:focus:not(:disabled) {
-  box-shadow: none;
-  outline: 2px solid;
-  outline-offset: -2px;
-}
-
-.c0:focus:not(:disabled):not(:focus-visible) {
-  outline: solid 1px transparent;
-}
-
-.c0:focus-visible:not(:disabled) {
-  box-shadow: none;
-  outline: 2px solid;
-  outline-offset: -2px;
-}
-
-.c0[href] {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c0[href]:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.c0:hover {
-  -webkit-transition-duration: 80ms;
-  transition-duration: 80ms;
-}
-
-.c0:active {
-  -webkit-transition: none;
-  transition: none;
-}
-
-.c0[data-inactive] {
-  cursor: auto;
-}
-
-.c0:disabled {
-  cursor: not-allowed;
-  box-shadow: none;
-  color: btn.danger.disabledText;
-  background-color: btn.danger.disabledBg;
-  border-color: var(--button-default-borderColor-disabled,undefined);
-}
-
-.c0:disabled [data-component=ButtonCounter] {
-  color: btn.danger.disabledCounterFg;
-  background-color: btn.danger.disabledCounterBg;
-}
-
-.c0 [data-component=ButtonCounter] {
-  font-size: 12px;
-  color: btn.danger.counterFg;
-  background-color: btn.danger.counterBg;
-}
-
-.c0[data-component=IconButton] {
-  display: inline-grid;
-  padding: unset;
-  place-content: center;
-  width: 32px;
-  min-width: unset;
-}
-
-.c0[data-size="small"] {
-  padding: 0 8px;
-  height: 28px;
-  gap: 4px;
-  font-size: 12px;
-}
-
-.c0[data-size="small"] [data-component="text"] {
-  line-height: 1.6666667;
-}
-
-.c0[data-size="small"] [data-component=ButtonCounter] {
-  font-size: 12px;
-}
-
-.c0[data-size="small"] [data-component="buttonContent"] > :not(:last-child) {
-  margin-right: 4px;
-}
-
-.c0[data-size="small"][data-component=IconButton] {
-  width: 28px;
-  padding: unset;
-}
-
-.c0[data-size="large"] {
-  padding: 0 16px;
-  height: 40px;
-  gap: 8px;
-}
-
-.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
-  margin-right: 8px;
-}
-
-.c0[data-size="large"][data-component=IconButton] {
-  width: 40px;
-  padding: unset;
-}
-
-.c0[data-block="block"] {
-  width: 100%;
-}
-
-.c0[data-label-wrap="true"] {
-  min-width: -webkit-fit-content;
-  min-width: -moz-fit-content;
-  min-width: fit-content;
-  height: unset;
-  min-height: var(--control-medium-size,2rem);
-}
-
-.c0[data-label-wrap="true"] [data-component="buttonContent"] {
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-  padding-block: calc(var(--control-medium-paddingBlock,0.375rem) - 2px);
-}
-
-.c0[data-label-wrap="true"] [data-component="text"] {
-  white-space: unset;
-  word-break: break-word;
-}
-
-.c0[data-label-wrap="true"][data-size="small"] {
-  height: unset;
-  min-height: var(--control-small-size,1.75rem);
-}
-
-.c0[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"] {
-  padding-block: calc(var(--control-small-paddingBlock,0.25rem) - 2px);
-}
-
-.c0[data-label-wrap="true"][data-size="large"] {
-  height: unset;
-  min-height: var(--control-large-size,2.5rem);
-  padding-inline: var(--control-large-paddingInline-spacious,1rem);
-}
-
-.c0[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"] {
-  padding-block: calc(var(--control-large-paddingBlock,0.625rem) - 2px);
-}
-
-.c0[data-inactive]:not([disabled]) {
-  background-color: var(--button-inactive-bgColor,undefined);
-  border-color: var(--button-inactive-bgColor,undefined);
-  color: var(--button-inactive-fgColor,undefined);
-}
-
-.c0[data-inactive]:not([disabled]):focus-visible {
-  box-shadow: none;
-}
-
-.c0 [data-component="leadingVisual"] {
-  grid-area: leadingVisual;
-}
-
-.c0 [data-component="text"] {
-  grid-area: text;
-  line-height: 1.4285714;
-  white-space: nowrap;
-}
-
-.c0 [data-component="trailingVisual"] {
-  grid-area: trailingVisual;
-}
-
-.c0 [data-component="trailingAction"] {
-  margin-right: -4px;
-}
-
-.c0 [data-component="buttonContent"] {
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  display: grid;
-  grid-template-areas: "leadingVisual text trailingVisual";
-  grid-template-columns: min-content minmax(0,auto) min-content;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-align-content: center;
-  -ms-flex-line-pack: center;
-  align-content: center;
-}
-
-.c0 [data-component="buttonContent"] > :not(:last-child) {
-  margin-right: 8px;
-}
-
-.c0 [data-component="loadingSpinner"] {
-  grid-area: text;
-  margin-right: 0px !important;
-  place-self: center;
-  color: fg.muted;
-}
-
-.c0 [data-component="loadingSpinner"] + [data-component="text"] {
-  visibility: hidden;
-}
-
-.c0:hover:not([disabled]):not([data-inactive]) {
-  color: btn.danger.hoverText;
-  background-color: btn.danger.hoverBg;
-  border-color: btn.danger.hoverBorder;
-  box-shadow: undefined;
-}
-
-.c0:hover:not([disabled]):not([data-inactive]) [data-component=ButtonCounter] {
-  background-color: btn.danger.hoverCounterBg;
-  color: btn.danger.hoverCounterFg;
-}
-
-.c0:active:not([disabled]):not([data-inactive]) {
-  color: btn.danger.selectedText;
-  background-color: btn.danger.selectedBg;
-  box-shadow: undefined;
-  border-color: btn.danger.selectedBorder;
-}
-
-.c0[aria-expanded=true] {
-  color: btn.danger.selectedText;
-  background-color: btn.danger.selectedBg;
-  box-shadow: undefined;
-  border-color: btn.danger.selectedBorder;
-}
-
-@media (forced-colors:active) {
-  .c0:focus {
-    outline: solid 1px transparent;
-  }
-}
-
 <button
   aria-describedby="test-button-loading-announcement"
-  class="c0"
+  class="ButtonBase"
   data-loading="false"
   data-no-visuals="true"
   data-size="medium"
+  data-variant="danger"
   id="test-button"
   type="button"
 >
   <span
-    class="c1"
+    class="ButtonContent"
+    data-align="center"
     data-component="buttonContent"
   >
     <span
+      class="Label"
       data-component="text"
     >
       Danger
@@ -1590,324 +132,23 @@ exports[`Button styles danger button appropriately 1`] = `
 `;
 
 exports[`Button styles invisible button appropriately 1`] = `
-.c1 {
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
-.c0 {
-  border-radius: 2;
-  border: 1px solid;
-  border-color: transparent;
-  font-family: inherit;
-  font-weight: semibold;
-  font-size: 14px;
-  cursor: pointer;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  text-align: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  height: 32px;
-  padding: 0 12px;
-  gap: 8px;
-  min-width: -webkit-max-content;
-  min-width: -moz-max-content;
-  min-width: max-content;
-  -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1);
-  transition: 80ms cubic-bezier(0.65,0,0.35,1);
-  -webkit-transition-property: color,fill,background-color,border-color;
-  transition-property: color,fill,background-color,border-color;
-  color: var(--button-invisible-fgColor-rest,undefined);
-  background-color: transparent;
-  box-shadow: none;
-}
-
-.c0:focus:not(:disabled) {
-  box-shadow: none;
-  outline: 2px solid;
-  outline-offset: -2px;
-}
-
-.c0:focus:not(:disabled):not(:focus-visible) {
-  outline: solid 1px transparent;
-}
-
-.c0:focus-visible:not(:disabled) {
-  box-shadow: none;
-  outline: 2px solid;
-  outline-offset: -2px;
-}
-
-.c0[href] {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c0[href]:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.c0:hover {
-  -webkit-transition-duration: 80ms;
-  transition-duration: 80ms;
-}
-
-.c0:active {
-  -webkit-transition: none;
-  transition: none;
-}
-
-.c0[data-inactive] {
-  cursor: auto;
-}
-
-.c0:disabled {
-  cursor: not-allowed;
-  box-shadow: none;
-  color: primer.fg.disabled;
-  background-color: var(--button-invisible-bgColor-disabled,transparent);
-}
-
-.c0:disabled [data-component=ButtonCounter],
-.c0:disabled [data-component="leadingVisual"],
-.c0:disabled [data-component="trailingAction"] {
-  color: inherit;
-}
-
-.c0 [data-component=ButtonCounter] {
-  font-size: 12px;
-}
-
-.c0[data-component=IconButton] {
-  display: inline-grid;
-  padding: unset;
-  place-content: center;
-  width: 32px;
-  min-width: unset;
-}
-
-.c0[data-size="small"] {
-  padding: 0 8px;
-  height: 28px;
-  gap: 4px;
-  font-size: 12px;
-}
-
-.c0[data-size="small"] [data-component="text"] {
-  line-height: 1.6666667;
-}
-
-.c0[data-size="small"] [data-component=ButtonCounter] {
-  font-size: 12px;
-}
-
-.c0[data-size="small"] [data-component="buttonContent"] > :not(:last-child) {
-  margin-right: 4px;
-}
-
-.c0[data-size="small"][data-component=IconButton] {
-  width: 28px;
-  padding: unset;
-}
-
-.c0[data-size="large"] {
-  padding: 0 16px;
-  height: 40px;
-  gap: 8px;
-}
-
-.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
-  margin-right: 8px;
-}
-
-.c0[data-size="large"][data-component=IconButton] {
-  width: 40px;
-  padding: unset;
-}
-
-.c0[data-block="block"] {
-  width: 100%;
-}
-
-.c0[data-label-wrap="true"] {
-  min-width: -webkit-fit-content;
-  min-width: -moz-fit-content;
-  min-width: fit-content;
-  height: unset;
-  min-height: var(--control-medium-size,2rem);
-}
-
-.c0[data-label-wrap="true"] [data-component="buttonContent"] {
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-  padding-block: calc(var(--control-medium-paddingBlock,0.375rem) - 2px);
-}
-
-.c0[data-label-wrap="true"] [data-component="text"] {
-  white-space: unset;
-  word-break: break-word;
-}
-
-.c0[data-label-wrap="true"][data-size="small"] {
-  height: unset;
-  min-height: var(--control-small-size,1.75rem);
-}
-
-.c0[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"] {
-  padding-block: calc(var(--control-small-paddingBlock,0.25rem) - 2px);
-}
-
-.c0[data-label-wrap="true"][data-size="large"] {
-  height: unset;
-  min-height: var(--control-large-size,2.5rem);
-  padding-inline: var(--control-large-paddingInline-spacious,1rem);
-}
-
-.c0[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"] {
-  padding-block: calc(var(--control-large-paddingBlock,0.625rem) - 2px);
-}
-
-.c0[data-inactive]:not([disabled]) {
-  background-color: var(--button-inactive-bgColor,undefined);
-  border-color: var(--button-inactive-bgColor,undefined);
-  color: var(--button-inactive-fgColor,undefined);
-}
-
-.c0[data-inactive]:not([disabled]):focus-visible {
-  box-shadow: none;
-}
-
-.c0 [data-component="leadingVisual"] {
-  grid-area: leadingVisual;
-  color: var(--button-invisible-iconColor-rest,undefined);
-}
-
-.c0 [data-component="text"] {
-  grid-area: text;
-  line-height: 1.4285714;
-  white-space: nowrap;
-}
-
-.c0 [data-component="trailingVisual"] {
-  grid-area: trailingVisual;
-  color: var(--button-invisible-iconColor-rest,undefined);
-}
-
-.c0 [data-component="trailingAction"] {
-  margin-right: -4px;
-  color: var(--button-invisible-iconColor-rest,undefined);
-}
-
-.c0 [data-component="buttonContent"] {
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  display: grid;
-  grid-template-areas: "leadingVisual text trailingVisual";
-  grid-template-columns: min-content minmax(0,auto) min-content;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-align-content: center;
-  -ms-flex-line-pack: center;
-  align-content: center;
-}
-
-.c0 [data-component="buttonContent"] > :not(:last-child) {
-  margin-right: 8px;
-}
-
-.c0 [data-component="loadingSpinner"] {
-  grid-area: text;
-  margin-right: 0px !important;
-  place-self: center;
-  color: fg.muted;
-}
-
-.c0 [data-component="loadingSpinner"] + [data-component="text"] {
-  visibility: hidden;
-}
-
-.c0:hover:not([disabled]) {
-  background-color: actionListItem.default.hoverBg;
-}
-
-.c0:active:not([disabled]) {
-  background-color: actionListItem.default.activeBg;
-}
-
-.c0[aria-expanded=true] {
-  background-color: actionListItem.default.selectedBg;
-}
-
-.c0[data-component="IconButton"][data-no-visuals] {
-  color: var(--button-invisible-iconColor-rest,undefined);
-}
-
-.c0[data-no-visuals] {
-  color: var(--button-invisible-fgColor-rest,undefined);
-}
-
-.c0:has([data-component="ButtonCounter"]) {
-  color: var(--button-invisible-fgColor-rest,undefined);
-}
-
-.c0:disabled[data-no-visuals] {
-  color: primer.fg.disabled;
-}
-
-.c0:disabled[data-no-visuals] [data-component=ButtonCounter] {
-  color: inherit;
-}
-
-@media (forced-colors:active) {
-  .c0:focus {
-    outline: solid 1px transparent;
-  }
-}
-
 <button
   aria-describedby="test-button-loading-announcement"
-  class="c0"
+  class="ButtonBase"
   data-loading="false"
   data-no-visuals="true"
   data-size="medium"
+  data-variant="invisible"
   id="test-button"
   type="button"
 >
   <span
-    class="c1"
+    class="ButtonContent"
+    data-align="center"
     data-component="buttonContent"
   >
     <span
+      class="Label"
       data-component="text"
     >
       Invisible
@@ -1917,313 +158,23 @@ exports[`Button styles invisible button appropriately 1`] = `
 `;
 
 exports[`Button styles primary button appropriately 1`] = `
-.c1 {
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
-.c0 {
-  border-radius: 2;
-  border: 1px solid;
-  border-color: btn.primary.border;
-  font-family: inherit;
-  font-weight: semibold;
-  font-size: 14px;
-  cursor: pointer;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  text-align: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  height: 32px;
-  padding: 0 12px;
-  gap: 8px;
-  min-width: -webkit-max-content;
-  min-width: -moz-max-content;
-  min-width: max-content;
-  -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1);
-  transition: 80ms cubic-bezier(0.65,0,0.35,1);
-  -webkit-transition-property: color,fill,background-color,border-color;
-  transition-property: color,fill,background-color,border-color;
-  color: btn.primary.text;
-  background-color: btn.primary.bg;
-  box-shadow: undefined;
-}
-
-.c0:focus:not(:disabled) {
-  box-shadow: none;
-  outline: 2px solid;
-  outline-offset: -2px;
-}
-
-.c0:focus:not(:disabled):not(:focus-visible) {
-  outline: solid 1px transparent;
-}
-
-.c0:focus-visible:not(:disabled) {
-  box-shadow: none;
-  outline: 2px solid;
-  outline-offset: -2px;
-}
-
-.c0[href] {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c0[href]:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.c0:hover {
-  -webkit-transition-duration: 80ms;
-  transition-duration: 80ms;
-}
-
-.c0:active {
-  -webkit-transition: none;
-  transition: none;
-}
-
-.c0[data-inactive] {
-  cursor: auto;
-}
-
-.c0:disabled {
-  cursor: not-allowed;
-  box-shadow: none;
-  color: btn.primary.disabledText;
-  background-color: btn.primary.disabledBg;
-  border-color: btn.primary.disabledBorder;
-}
-
-.c0:disabled [data-component=ButtonCounter] {
-  color: inherit;
-}
-
-.c0 [data-component=ButtonCounter] {
-  font-size: 12px;
-  background-color: btn.primary.counterBg;
-  color: btn.primary.text;
-}
-
-.c0[data-component=IconButton] {
-  display: inline-grid;
-  padding: unset;
-  place-content: center;
-  width: 32px;
-  min-width: unset;
-}
-
-.c0[data-size="small"] {
-  padding: 0 8px;
-  height: 28px;
-  gap: 4px;
-  font-size: 12px;
-}
-
-.c0[data-size="small"] [data-component="text"] {
-  line-height: 1.6666667;
-}
-
-.c0[data-size="small"] [data-component=ButtonCounter] {
-  font-size: 12px;
-}
-
-.c0[data-size="small"] [data-component="buttonContent"] > :not(:last-child) {
-  margin-right: 4px;
-}
-
-.c0[data-size="small"][data-component=IconButton] {
-  width: 28px;
-  padding: unset;
-}
-
-.c0[data-size="large"] {
-  padding: 0 16px;
-  height: 40px;
-  gap: 8px;
-}
-
-.c0[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
-  margin-right: 8px;
-}
-
-.c0[data-size="large"][data-component=IconButton] {
-  width: 40px;
-  padding: unset;
-}
-
-.c0[data-block="block"] {
-  width: 100%;
-}
-
-.c0[data-label-wrap="true"] {
-  min-width: -webkit-fit-content;
-  min-width: -moz-fit-content;
-  min-width: fit-content;
-  height: unset;
-  min-height: var(--control-medium-size,2rem);
-}
-
-.c0[data-label-wrap="true"] [data-component="buttonContent"] {
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-  padding-block: calc(var(--control-medium-paddingBlock,0.375rem) - 2px);
-}
-
-.c0[data-label-wrap="true"] [data-component="text"] {
-  white-space: unset;
-  word-break: break-word;
-}
-
-.c0[data-label-wrap="true"][data-size="small"] {
-  height: unset;
-  min-height: var(--control-small-size,1.75rem);
-}
-
-.c0[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"] {
-  padding-block: calc(var(--control-small-paddingBlock,0.25rem) - 2px);
-}
-
-.c0[data-label-wrap="true"][data-size="large"] {
-  height: unset;
-  min-height: var(--control-large-size,2.5rem);
-  padding-inline: var(--control-large-paddingInline-spacious,1rem);
-}
-
-.c0[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"] {
-  padding-block: calc(var(--control-large-paddingBlock,0.625rem) - 2px);
-}
-
-.c0[data-inactive]:not([disabled]) {
-  background-color: var(--button-inactive-bgColor,undefined);
-  border-color: var(--button-inactive-bgColor,undefined);
-  color: var(--button-inactive-fgColor,undefined);
-}
-
-.c0[data-inactive]:not([disabled]):focus-visible {
-  box-shadow: none;
-}
-
-.c0 [data-component="leadingVisual"] {
-  grid-area: leadingVisual;
-}
-
-.c0 [data-component="text"] {
-  grid-area: text;
-  line-height: 1.4285714;
-  white-space: nowrap;
-}
-
-.c0 [data-component="trailingVisual"] {
-  grid-area: trailingVisual;
-}
-
-.c0 [data-component="trailingAction"] {
-  margin-right: -4px;
-}
-
-.c0 [data-component="buttonContent"] {
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  display: grid;
-  grid-template-areas: "leadingVisual text trailingVisual";
-  grid-template-columns: min-content minmax(0,auto) min-content;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-align-content: center;
-  -ms-flex-line-pack: center;
-  align-content: center;
-}
-
-.c0 [data-component="buttonContent"] > :not(:last-child) {
-  margin-right: 8px;
-}
-
-.c0 [data-component="loadingSpinner"] {
-  grid-area: text;
-  margin-right: 0px !important;
-  place-self: center;
-  color: fg.muted;
-}
-
-.c0 [data-component="loadingSpinner"] + [data-component="text"] {
-  visibility: hidden;
-}
-
-.c0:hover:not([disabled]):not([data-inactive]) {
-  color: btn.primary.hoverText;
-  background-color: btn.primary.hoverBg;
-}
-
-.c0:focus:not([disabled]) {
-  box-shadow: inset 0 0 0 3px;
-}
-
-.c0:focus-visible:not([disabled]) {
-  box-shadow: inset 0 0 0 3px;
-}
-
-.c0:active:not([disabled]):not([data-inactive]) {
-  background-color: btn.primary.selectedBg;
-  box-shadow: undefined;
-}
-
-.c0[aria-expanded=true] {
-  background-color: btn.primary.selectedBg;
-  box-shadow: undefined;
-}
-
-@media (forced-colors:active) {
-  .c0:focus {
-    outline: solid 1px transparent;
-  }
-}
-
 <button
   aria-describedby="test-button-loading-announcement"
-  class="c0"
+  class="ButtonBase"
   data-loading="false"
   data-no-visuals="true"
   data-size="medium"
+  data-variant="primary"
   id="test-button"
   type="button"
 >
   <span
-    class="c1"
+    class="ButtonContent"
+    data-align="center"
     data-component="buttonContent"
   >
     <span
+      class="Label"
       data-component="text"
     >
       Primary
diff --git a/packages/react/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap
index 38a2450ee5b..b09b34fe96f 100644
--- a/packages/react/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap
@@ -7,295 +7,7 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
-.c2 {
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
 .c1 {
-  border-radius: 6px;
-  border: 1px solid;
-  border-color: var(--button-default-borderColor-rest,var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15))));
-  font-family: inherit;
-  font-weight: 500;
-  font-size: 14px;
-  cursor: pointer;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  text-align: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  height: 32px;
-  padding: 0 12px;
-  gap: 8px;
-  min-width: -webkit-max-content;
-  min-width: -moz-max-content;
-  min-width: max-content;
-  -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1);
-  transition: 80ms cubic-bezier(0.65,0,0.35,1);
-  -webkit-transition-property: color,fill,background-color,border-color;
-  transition-property: color,fill,background-color,border-color;
-  color: var(--button-default-fgColor-rest,var(--color-btn-text,#24292f));
-  background-color: var(--button-default-bgColor-rest,var(--color-btn-bg,#f6f8fa));
-  box-shadow: var(--button-default-shadow-resting,var(--color-btn-shadow,0 1px 0 rgba(31,35,40,0.04))),var(--button-default-shadow-inset,var(--color-btn-inset-shadow,inset 0 1px 0 rgba(255,255,255,0.25)));
-}
-
-.c1:focus:not(:disabled) {
-  box-shadow: none;
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline-offset: -2px;
-}
-
-.c1:focus:not(:disabled):not(:focus-visible) {
-  outline: solid 1px transparent;
-}
-
-.c1:focus-visible:not(:disabled) {
-  box-shadow: none;
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline-offset: -2px;
-}
-
-.c1[href] {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c1[href]:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.c1:hover {
-  -webkit-transition-duration: 80ms;
-  transition-duration: 80ms;
-}
-
-.c1:active {
-  -webkit-transition: none;
-  transition: none;
-}
-
-.c1[data-inactive] {
-  cursor: auto;
-}
-
-.c1:disabled {
-  cursor: not-allowed;
-  box-shadow: none;
-  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
-  border-color: var(--button-default-borderColor-disabled,var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15))));
-  background-color: var(--button-default-bgColor-disabled,var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2))));
-}
-
-.c1:disabled [data-component=ButtonCounter] {
-  color: inherit;
-}
-
-.c1 [data-component=ButtonCounter] {
-  font-size: 12px;
-  background-color: var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg,rgba(31,35,40,0.08)));
-}
-
-.c1[data-component=IconButton] {
-  display: inline-grid;
-  padding: unset;
-  place-content: center;
-  width: 32px;
-  min-width: unset;
-}
-
-.c1[data-size="small"] {
-  padding: 0 8px;
-  height: 28px;
-  gap: 4px;
-  font-size: 12px;
-}
-
-.c1[data-size="small"] [data-component="text"] {
-  line-height: 1.6666667;
-}
-
-.c1[data-size="small"] [data-component=ButtonCounter] {
-  font-size: 12px;
-}
-
-.c1[data-size="small"] [data-component="buttonContent"] > :not(:last-child) {
-  margin-right: 4px;
-}
-
-.c1[data-size="small"][data-component=IconButton] {
-  width: 28px;
-  padding: unset;
-}
-
-.c1[data-size="large"] {
-  padding: 0 16px;
-  height: 40px;
-  gap: 8px;
-}
-
-.c1[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
-  margin-right: 8px;
-}
-
-.c1[data-size="large"][data-component=IconButton] {
-  width: 40px;
-  padding: unset;
-}
-
-.c1[data-block="block"] {
-  width: 100%;
-}
-
-.c1[data-label-wrap="true"] {
-  min-width: -webkit-fit-content;
-  min-width: -moz-fit-content;
-  min-width: fit-content;
-  height: unset;
-  min-height: var(--control-medium-size,2rem);
-}
-
-.c1[data-label-wrap="true"] [data-component="buttonContent"] {
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-  padding-block: calc(var(--control-medium-paddingBlock,0.375rem) - 2px);
-}
-
-.c1[data-label-wrap="true"] [data-component="text"] {
-  white-space: unset;
-  word-break: break-word;
-}
-
-.c1[data-label-wrap="true"][data-size="small"] {
-  height: unset;
-  min-height: var(--control-small-size,1.75rem);
-}
-
-.c1[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"] {
-  padding-block: calc(var(--control-small-paddingBlock,0.25rem) - 2px);
-}
-
-.c1[data-label-wrap="true"][data-size="large"] {
-  height: unset;
-  min-height: var(--control-large-size,2.5rem);
-  padding-inline: var(--control-large-paddingInline-spacious,1rem);
-}
-
-.c1[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"] {
-  padding-block: calc(var(--control-large-paddingBlock,0.625rem) - 2px);
-}
-
-.c1[data-inactive]:not([disabled]) {
-  background-color: var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));
-  border-color: var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));
-  color: var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-btn-inactive-text,#57606a)));
-}
-
-.c1[data-inactive]:not([disabled]):focus-visible {
-  box-shadow: none;
-}
-
-.c1 [data-component="leadingVisual"] {
-  grid-area: leadingVisual;
-}
-
-.c1 [data-component="text"] {
-  grid-area: text;
-  line-height: 1.4285714;
-  white-space: nowrap;
-}
-
-.c1 [data-component="trailingVisual"] {
-  grid-area: trailingVisual;
-}
-
-.c1 [data-component="trailingAction"] {
-  margin-right: -4px;
-}
-
-.c1 [data-component="buttonContent"] {
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  display: grid;
-  grid-template-areas: "leadingVisual text trailingVisual";
-  grid-template-columns: min-content minmax(0,auto) min-content;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-align-content: center;
-  -ms-flex-line-pack: center;
-  align-content: center;
-}
-
-.c1 [data-component="buttonContent"] > :not(:last-child) {
-  margin-right: 8px;
-}
-
-.c1 [data-component="loadingSpinner"] {
-  grid-area: text;
-  margin-right: 0px !important;
-  place-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
-}
-
-.c1 [data-component="loadingSpinner"] + [data-component="text"] {
-  visibility: hidden;
-}
-
-.c1:hover:not([disabled]):not([data-inactive]) {
-  background-color: var(--button-default-bgColor-hover,var(--color-btn-hover-bg,#f3f4f6));
-  border-color: var(--button-default-borderColor-hover,var(--button-default-borderColor-hover,var(--color-btn-hover-border,rgba(31,35,40,0.15))));
-}
-
-.c1:active:not([disabled]):not([data-inactive]) {
-  background-color: var(--button-default-bgColor-active,var(--color-btn-active-bg,hsla(220,14%,93%,1)));
-  border-color: var(--button-default-borderColor-active,var(--button-default-borderColor-active,var(--color-btn-active-border,rgba(31,35,40,0.15))));
-}
-
-.c1[aria-expanded=true] {
-  background-color: var(--button-default-bgColor-active,var(--color-btn-active-bg,hsla(220,14%,93%,1)));
-  border-color: var(--button-default-borderColor-active,var(--button-default-borderColor-active,var(--color-btn-active-border,rgba(31,35,40,0.15))));
-}
-
-.c1 [data-component="leadingVisual"],
-.c1 [data-component="trailingVisual"],
-.c1 [data-component="trailingAction"] {
-  color: var(--button-color,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c1[data-component="IconButton"][data-no-visuals]:not(:disabled) {
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
-}
-
-.c3 {
   background-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
   box-shadow: var(--shadow-floating-small,var(--color-overlay-shadow,0 1px 3px rgba(31,35,40,0.12),0 8px 24px rgba(66,74,83,0.12)));
   position: absolute;
@@ -309,22 +21,16 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
   visibility: var(--styled-overlay-visibility);
 }
 
-.c3:focus {
+.c1:focus {
   outline: none;
 }
 
-.c3[data-reflow-container='true'] {
+.c1[data-reflow-container='true'] {
   max-width: calc(100vw - 2rem);
 }
 
 @media (forced-colors:active) {
-  .c1:focus {
-    outline: solid 1px transparent;
-  }
-}
-
-@media (forced-colors:active) {
-  .c3 {
+  .c1 {
     outline: solid 1px transparent;
   }
 }
@@ -343,19 +49,22 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
       aria-describedby=":rj:-loading-announcement"
       aria-expanded="true"
       aria-haspopup="true"
-      class="c1"
+      class="ButtonBase"
       data-loading="false"
       data-no-visuals="true"
       data-size="medium"
+      data-variant="default"
       id=":rj:"
       tabindex="0"
       type="button"
     >
       <span
-        class="c2"
+        class="ButtonContent"
+        data-align="center"
         data-component="buttonContent"
       >
         <span
+          class="Label"
           data-component="text"
         >
           Anchor Button
@@ -370,7 +79,7 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
         style="position: relative; z-index: 1;"
       >
         <div
-          class="c3"
+          class="c1"
           data-focus-trap="active"
           height="auto"
           role="none"
diff --git a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index 633e7f42c4f..6996356cf3f 100644
--- a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -2919,297 +2919,6 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   line-height: 0;
 }
 
-.c4 {
-  border-radius: 6px;
-  border: 1px solid;
-  border-color: transparent;
-  font-family: inherit;
-  font-weight: 500;
-  font-size: 14px;
-  cursor: pointer;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  text-align: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  height: 32px;
-  padding: 0 12px;
-  gap: 8px;
-  min-width: -webkit-max-content;
-  min-width: -moz-max-content;
-  min-width: max-content;
-  -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1);
-  transition: 80ms cubic-bezier(0.65,0,0.35,1);
-  -webkit-transition-property: color,fill,background-color,border-color;
-  transition-property: color,fill,background-color,border-color;
-  color: var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));
-  background-color: transparent;
-  box-shadow: none;
-}
-
-.c4:focus:not(:disabled) {
-  box-shadow: none;
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline-offset: -2px;
-}
-
-.c4:focus:not(:disabled):not(:focus-visible) {
-  outline: solid 1px transparent;
-}
-
-.c4:focus-visible:not(:disabled) {
-  box-shadow: none;
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline-offset: -2px;
-}
-
-.c4[href] {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c4[href]:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.c4:hover {
-  -webkit-transition-duration: 80ms;
-  transition-duration: 80ms;
-}
-
-.c4:active {
-  -webkit-transition: none;
-  transition: none;
-}
-
-.c4[data-inactive] {
-  cursor: auto;
-}
-
-.c4:disabled {
-  cursor: not-allowed;
-  box-shadow: none;
-  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
-  background-color: var(--button-invisible-bgColor-disabled,transparent);
-}
-
-.c4:disabled [data-component=ButtonCounter],
-.c4:disabled [data-component="leadingVisual"],
-.c4:disabled [data-component="trailingAction"] {
-  color: inherit;
-}
-
-.c4 [data-component=ButtonCounter] {
-  font-size: 12px;
-}
-
-.c4[data-component=IconButton] {
-  display: inline-grid;
-  padding: unset;
-  place-content: center;
-  width: 32px;
-  min-width: unset;
-}
-
-.c4[data-size="small"] {
-  padding: 0 8px;
-  height: 28px;
-  gap: 4px;
-  font-size: 12px;
-}
-
-.c4[data-size="small"] [data-component="text"] {
-  line-height: 1.6666667;
-}
-
-.c4[data-size="small"] [data-component=ButtonCounter] {
-  font-size: 12px;
-}
-
-.c4[data-size="small"] [data-component="buttonContent"] > :not(:last-child) {
-  margin-right: 4px;
-}
-
-.c4[data-size="small"][data-component=IconButton] {
-  width: 28px;
-  padding: unset;
-}
-
-.c4[data-size="large"] {
-  padding: 0 16px;
-  height: 40px;
-  gap: 8px;
-}
-
-.c4[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
-  margin-right: 8px;
-}
-
-.c4[data-size="large"][data-component=IconButton] {
-  width: 40px;
-  padding: unset;
-}
-
-.c4[data-block="block"] {
-  width: 100%;
-}
-
-.c4[data-label-wrap="true"] {
-  min-width: -webkit-fit-content;
-  min-width: -moz-fit-content;
-  min-width: fit-content;
-  height: unset;
-  min-height: var(--control-medium-size,2rem);
-}
-
-.c4[data-label-wrap="true"] [data-component="buttonContent"] {
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-  padding-block: calc(var(--control-medium-paddingBlock,0.375rem) - 2px);
-}
-
-.c4[data-label-wrap="true"] [data-component="text"] {
-  white-space: unset;
-  word-break: break-word;
-}
-
-.c4[data-label-wrap="true"][data-size="small"] {
-  height: unset;
-  min-height: var(--control-small-size,1.75rem);
-}
-
-.c4[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"] {
-  padding-block: calc(var(--control-small-paddingBlock,0.25rem) - 2px);
-}
-
-.c4[data-label-wrap="true"][data-size="large"] {
-  height: unset;
-  min-height: var(--control-large-size,2.5rem);
-  padding-inline: var(--control-large-paddingInline-spacious,1rem);
-}
-
-.c4[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"] {
-  padding-block: calc(var(--control-large-paddingBlock,0.625rem) - 2px);
-}
-
-.c4[data-inactive]:not([disabled]) {
-  background-color: var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));
-  border-color: var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));
-  color: var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-btn-inactive-text,#57606a)));
-}
-
-.c4[data-inactive]:not([disabled]):focus-visible {
-  box-shadow: none;
-}
-
-.c4 [data-component="leadingVisual"] {
-  grid-area: leadingVisual;
-  color: var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c4 [data-component="text"] {
-  grid-area: text;
-  line-height: 1.4285714;
-  white-space: nowrap;
-}
-
-.c4 [data-component="trailingVisual"] {
-  grid-area: trailingVisual;
-  color: var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c4 [data-component="trailingAction"] {
-  margin-right: -4px;
-  color: var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c4 [data-component="buttonContent"] {
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  display: grid;
-  grid-template-areas: "leadingVisual text trailingVisual";
-  grid-template-columns: min-content minmax(0,auto) min-content;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-align-content: center;
-  -ms-flex-line-pack: center;
-  align-content: center;
-}
-
-.c4 [data-component="buttonContent"] > :not(:last-child) {
-  margin-right: 8px;
-}
-
-.c4 [data-component="loadingSpinner"] {
-  grid-area: text;
-  margin-right: 0px !important;
-  place-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
-}
-
-.c4 [data-component="loadingSpinner"] + [data-component="text"] {
-  visibility: hidden;
-}
-
-.c4:hover:not([disabled]) {
-  background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
-}
-
-.c4:active:not([disabled]) {
-  background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
-}
-
-.c4[aria-expanded=true] {
-  background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
-}
-
-.c4[data-component="IconButton"][data-no-visuals] {
-  color: var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c4[data-no-visuals] {
-  color: var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));
-}
-
-.c4:has([data-component="ButtonCounter"]) {
-  color: var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));
-}
-
-.c4:disabled[data-no-visuals] {
-  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
-}
-
-.c4:disabled[data-no-visuals] [data-component=ButtonCounter] {
-  color: inherit;
-}
-
 .c4[data-size="small"][data-no-visuals] {
   padding-top: 2px;
   padding-right: 4px;
@@ -3548,12 +3257,6 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   padding-right: var(--base-size-12);
 }
 
-@media (forced-colors:active) {
-  .c4:focus {
-    outline: solid 1px transparent;
-  }
-}
-
 @media (pointer:coarse) {
   .c4[data-size="small"][data-no-visuals]:after {
     content: "";
@@ -3601,12 +3304,13 @@ exports[`TextInput renders trailingAction icon button 1`] = `
     <button
       aria-describedby=":r2k:-loading-announcement"
       aria-labelledby=":r2j:"
-      className="c4 IconButton"
+      className="c4 ButtonBase IconButton"
       data-block={null}
       data-component="IconButton"
       data-loading={false}
       data-no-visuals={true}
       data-size="small"
+      data-variant="invisible"
       onBlur={[Function]}
       onClick={[MockFunction]}
       onFocus={[Function]}
@@ -3657,304 +3361,6 @@ exports[`TextInput renders trailingAction text button 1`] = `
   line-height: 0;
 }
 
-.c5 {
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
-.c4 {
-  border-radius: 6px;
-  border: 1px solid;
-  border-color: transparent;
-  font-family: inherit;
-  font-weight: 500;
-  font-size: 14px;
-  cursor: pointer;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  text-align: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  height: 32px;
-  padding: 0 12px;
-  gap: 8px;
-  min-width: -webkit-max-content;
-  min-width: -moz-max-content;
-  min-width: max-content;
-  -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1);
-  transition: 80ms cubic-bezier(0.65,0,0.35,1);
-  -webkit-transition-property: color,fill,background-color,border-color;
-  transition-property: color,fill,background-color,border-color;
-  color: var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));
-  background-color: transparent;
-  box-shadow: none;
-}
-
-.c4:focus:not(:disabled) {
-  box-shadow: none;
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline-offset: -2px;
-}
-
-.c4:focus:not(:disabled):not(:focus-visible) {
-  outline: solid 1px transparent;
-}
-
-.c4:focus-visible:not(:disabled) {
-  box-shadow: none;
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline-offset: -2px;
-}
-
-.c4[href] {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c4[href]:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.c4:hover {
-  -webkit-transition-duration: 80ms;
-  transition-duration: 80ms;
-}
-
-.c4:active {
-  -webkit-transition: none;
-  transition: none;
-}
-
-.c4[data-inactive] {
-  cursor: auto;
-}
-
-.c4:disabled {
-  cursor: not-allowed;
-  box-shadow: none;
-  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
-  background-color: var(--button-invisible-bgColor-disabled,transparent);
-}
-
-.c4:disabled [data-component=ButtonCounter],
-.c4:disabled [data-component="leadingVisual"],
-.c4:disabled [data-component="trailingAction"] {
-  color: inherit;
-}
-
-.c4 [data-component=ButtonCounter] {
-  font-size: 12px;
-}
-
-.c4[data-component=IconButton] {
-  display: inline-grid;
-  padding: unset;
-  place-content: center;
-  width: 32px;
-  min-width: unset;
-}
-
-.c4[data-size="small"] {
-  padding: 0 8px;
-  height: 28px;
-  gap: 4px;
-  font-size: 12px;
-}
-
-.c4[data-size="small"] [data-component="text"] {
-  line-height: 1.6666667;
-}
-
-.c4[data-size="small"] [data-component=ButtonCounter] {
-  font-size: 12px;
-}
-
-.c4[data-size="small"] [data-component="buttonContent"] > :not(:last-child) {
-  margin-right: 4px;
-}
-
-.c4[data-size="small"][data-component=IconButton] {
-  width: 28px;
-  padding: unset;
-}
-
-.c4[data-size="large"] {
-  padding: 0 16px;
-  height: 40px;
-  gap: 8px;
-}
-
-.c4[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
-  margin-right: 8px;
-}
-
-.c4[data-size="large"][data-component=IconButton] {
-  width: 40px;
-  padding: unset;
-}
-
-.c4[data-block="block"] {
-  width: 100%;
-}
-
-.c4[data-label-wrap="true"] {
-  min-width: -webkit-fit-content;
-  min-width: -moz-fit-content;
-  min-width: fit-content;
-  height: unset;
-  min-height: var(--control-medium-size,2rem);
-}
-
-.c4[data-label-wrap="true"] [data-component="buttonContent"] {
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-  padding-block: calc(var(--control-medium-paddingBlock,0.375rem) - 2px);
-}
-
-.c4[data-label-wrap="true"] [data-component="text"] {
-  white-space: unset;
-  word-break: break-word;
-}
-
-.c4[data-label-wrap="true"][data-size="small"] {
-  height: unset;
-  min-height: var(--control-small-size,1.75rem);
-}
-
-.c4[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"] {
-  padding-block: calc(var(--control-small-paddingBlock,0.25rem) - 2px);
-}
-
-.c4[data-label-wrap="true"][data-size="large"] {
-  height: unset;
-  min-height: var(--control-large-size,2.5rem);
-  padding-inline: var(--control-large-paddingInline-spacious,1rem);
-}
-
-.c4[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"] {
-  padding-block: calc(var(--control-large-paddingBlock,0.625rem) - 2px);
-}
-
-.c4[data-inactive]:not([disabled]) {
-  background-color: var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));
-  border-color: var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));
-  color: var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-btn-inactive-text,#57606a)));
-}
-
-.c4[data-inactive]:not([disabled]):focus-visible {
-  box-shadow: none;
-}
-
-.c4 [data-component="leadingVisual"] {
-  grid-area: leadingVisual;
-  color: var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c4 [data-component="text"] {
-  grid-area: text;
-  line-height: 1.4285714;
-  white-space: nowrap;
-}
-
-.c4 [data-component="trailingVisual"] {
-  grid-area: trailingVisual;
-  color: var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c4 [data-component="trailingAction"] {
-  margin-right: -4px;
-  color: var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c4 [data-component="buttonContent"] {
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  display: grid;
-  grid-template-areas: "leadingVisual text trailingVisual";
-  grid-template-columns: min-content minmax(0,auto) min-content;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-align-content: center;
-  -ms-flex-line-pack: center;
-  align-content: center;
-}
-
-.c4 [data-component="buttonContent"] > :not(:last-child) {
-  margin-right: 8px;
-}
-
-.c4 [data-component="loadingSpinner"] {
-  grid-area: text;
-  margin-right: 0px !important;
-  place-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
-}
-
-.c4 [data-component="loadingSpinner"] + [data-component="text"] {
-  visibility: hidden;
-}
-
-.c4:hover:not([disabled]) {
-  background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
-}
-
-.c4:active:not([disabled]) {
-  background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
-}
-
-.c4[aria-expanded=true] {
-  background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
-}
-
-.c4[data-component="IconButton"][data-no-visuals] {
-  color: var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c4[data-no-visuals] {
-  color: var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));
-}
-
-.c4:has([data-component="ButtonCounter"]) {
-  color: var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));
-}
-
-.c4:disabled[data-no-visuals] {
-  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
-}
-
-.c4:disabled[data-no-visuals] [data-component=ButtonCounter] {
-  color: inherit;
-}
-
 .c4[data-size="medium"][data-no-visuals] {
   padding-top: 2px;
   padding-right: 4px;
@@ -3975,6 +3381,13 @@ exports[`TextInput renders trailingAction text button 1`] = `
   height: var(--inner-action-size);
 }
 
+.c5 {
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
 .c2 {
   border: 0;
   font-size: inherit;
@@ -4187,12 +3600,6 @@ exports[`TextInput renders trailingAction text button 1`] = `
   padding-right: var(--base-size-12);
 }
 
-@media (forced-colors:active) {
-  .c4:focus {
-    outline: solid 1px transparent;
-  }
-}
-
 @media (pointer:coarse) {
   .c4[data-size="medium"][data-no-visuals]:after {
     content: "";
@@ -4233,11 +3640,12 @@ exports[`TextInput renders trailingAction text button 1`] = `
   >
     <button
       aria-describedby=":r28:-loading-announcement"
-      className="c4"
+      className="c4 ButtonBase"
       data-block={null}
       data-loading={false}
       data-no-visuals={true}
       data-size="medium"
+      data-variant="invisible"
       onClick={[MockFunction]}
       style={
         {
@@ -4247,10 +3655,11 @@ exports[`TextInput renders trailingAction text button 1`] = `
       type="button"
     >
       <span
-        className="c5"
+        className="c5 ButtonContent"
         data-component="buttonContent"
       >
         <span
+          className="Label"
           data-component="text"
         >
           Clear
@@ -4268,304 +3677,6 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   line-height: 0;
 }
 
-.c5 {
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
-.c4 {
-  border-radius: 6px;
-  border: 1px solid;
-  border-color: transparent;
-  font-family: inherit;
-  font-weight: 500;
-  font-size: 14px;
-  cursor: pointer;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  text-align: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  height: 32px;
-  padding: 0 12px;
-  gap: 8px;
-  min-width: -webkit-max-content;
-  min-width: -moz-max-content;
-  min-width: max-content;
-  -webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1);
-  transition: 80ms cubic-bezier(0.65,0,0.35,1);
-  -webkit-transition-property: color,fill,background-color,border-color;
-  transition-property: color,fill,background-color,border-color;
-  color: var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));
-  background-color: transparent;
-  box-shadow: none;
-}
-
-.c4:focus:not(:disabled) {
-  box-shadow: none;
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline-offset: -2px;
-}
-
-.c4:focus:not(:disabled):not(:focus-visible) {
-  outline: solid 1px transparent;
-}
-
-.c4:focus-visible:not(:disabled) {
-  box-shadow: none;
-  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
-  outline-offset: -2px;
-}
-
-.c4[href] {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c4[href]:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.c4:hover {
-  -webkit-transition-duration: 80ms;
-  transition-duration: 80ms;
-}
-
-.c4:active {
-  -webkit-transition: none;
-  transition: none;
-}
-
-.c4[data-inactive] {
-  cursor: auto;
-}
-
-.c4:disabled {
-  cursor: not-allowed;
-  box-shadow: none;
-  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
-  background-color: var(--button-invisible-bgColor-disabled,transparent);
-}
-
-.c4:disabled [data-component=ButtonCounter],
-.c4:disabled [data-component="leadingVisual"],
-.c4:disabled [data-component="trailingAction"] {
-  color: inherit;
-}
-
-.c4 [data-component=ButtonCounter] {
-  font-size: 12px;
-}
-
-.c4[data-component=IconButton] {
-  display: inline-grid;
-  padding: unset;
-  place-content: center;
-  width: 32px;
-  min-width: unset;
-}
-
-.c4[data-size="small"] {
-  padding: 0 8px;
-  height: 28px;
-  gap: 4px;
-  font-size: 12px;
-}
-
-.c4[data-size="small"] [data-component="text"] {
-  line-height: 1.6666667;
-}
-
-.c4[data-size="small"] [data-component=ButtonCounter] {
-  font-size: 12px;
-}
-
-.c4[data-size="small"] [data-component="buttonContent"] > :not(:last-child) {
-  margin-right: 4px;
-}
-
-.c4[data-size="small"][data-component=IconButton] {
-  width: 28px;
-  padding: unset;
-}
-
-.c4[data-size="large"] {
-  padding: 0 16px;
-  height: 40px;
-  gap: 8px;
-}
-
-.c4[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
-  margin-right: 8px;
-}
-
-.c4[data-size="large"][data-component=IconButton] {
-  width: 40px;
-  padding: unset;
-}
-
-.c4[data-block="block"] {
-  width: 100%;
-}
-
-.c4[data-label-wrap="true"] {
-  min-width: -webkit-fit-content;
-  min-width: -moz-fit-content;
-  min-width: fit-content;
-  height: unset;
-  min-height: var(--control-medium-size,2rem);
-}
-
-.c4[data-label-wrap="true"] [data-component="buttonContent"] {
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-  padding-block: calc(var(--control-medium-paddingBlock,0.375rem) - 2px);
-}
-
-.c4[data-label-wrap="true"] [data-component="text"] {
-  white-space: unset;
-  word-break: break-word;
-}
-
-.c4[data-label-wrap="true"][data-size="small"] {
-  height: unset;
-  min-height: var(--control-small-size,1.75rem);
-}
-
-.c4[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"] {
-  padding-block: calc(var(--control-small-paddingBlock,0.25rem) - 2px);
-}
-
-.c4[data-label-wrap="true"][data-size="large"] {
-  height: unset;
-  min-height: var(--control-large-size,2.5rem);
-  padding-inline: var(--control-large-paddingInline-spacious,1rem);
-}
-
-.c4[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"] {
-  padding-block: calc(var(--control-large-paddingBlock,0.625rem) - 2px);
-}
-
-.c4[data-inactive]:not([disabled]) {
-  background-color: var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));
-  border-color: var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));
-  color: var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-btn-inactive-text,#57606a)));
-}
-
-.c4[data-inactive]:not([disabled]):focus-visible {
-  box-shadow: none;
-}
-
-.c4 [data-component="leadingVisual"] {
-  grid-area: leadingVisual;
-  color: var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c4 [data-component="text"] {
-  grid-area: text;
-  line-height: 1.4285714;
-  white-space: nowrap;
-}
-
-.c4 [data-component="trailingVisual"] {
-  grid-area: trailingVisual;
-  color: var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c4 [data-component="trailingAction"] {
-  margin-right: -4px;
-  color: var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c4 [data-component="buttonContent"] {
-  -webkit-flex: 1 0 auto;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  display: grid;
-  grid-template-areas: "leadingVisual text trailingVisual";
-  grid-template-columns: min-content minmax(0,auto) min-content;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-align-content: center;
-  -ms-flex-line-pack: center;
-  align-content: center;
-}
-
-.c4 [data-component="buttonContent"] > :not(:last-child) {
-  margin-right: 8px;
-}
-
-.c4 [data-component="loadingSpinner"] {
-  grid-area: text;
-  margin-right: 0px !important;
-  place-self: center;
-  color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
-}
-
-.c4 [data-component="loadingSpinner"] + [data-component="text"] {
-  visibility: hidden;
-}
-
-.c4:hover:not([disabled]) {
-  background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
-}
-
-.c4:active:not([disabled]) {
-  background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
-}
-
-.c4[aria-expanded=true] {
-  background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
-}
-
-.c4[data-component="IconButton"][data-no-visuals] {
-  color: var(--button-invisible-iconColor-rest,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
-}
-
-.c4[data-no-visuals] {
-  color: var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));
-}
-
-.c4:has([data-component="ButtonCounter"]) {
-  color: var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));
-}
-
-.c4:disabled[data-no-visuals] {
-  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
-}
-
-.c4:disabled[data-no-visuals] [data-component=ButtonCounter] {
-  color: inherit;
-}
-
 .c4[data-size="medium"][data-no-visuals] {
   padding-top: 2px;
   padding-right: 4px;
@@ -4586,6 +3697,13 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   height: var(--inner-action-size);
 }
 
+.c5 {
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
 .c6 {
   display: none;
   display: inline-block;
@@ -4905,12 +4023,6 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   padding-right: var(--base-size-12);
 }
 
-@media (forced-colors:active) {
-  .c4:focus {
-    outline: solid 1px transparent;
-  }
-}
-
 @media (pointer:coarse) {
   .c4[data-size="medium"][data-no-visuals]:after {
     content: "";
@@ -4957,11 +4069,12 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   >
     <button
       aria-describedby=":r2e:-loading-announcement :r2d:"
-      className="c4"
+      className="c4 ButtonBase"
       data-block={null}
       data-loading={false}
       data-no-visuals={true}
       data-size="medium"
+      data-variant="invisible"
       onBlur={[Function]}
       onClick={[MockFunction]}
       onFocus={[Function]}
@@ -4975,10 +4088,11 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
       type="button"
     >
       <span
-        className="c5"
+        className="c5 ButtonContent"
         data-component="buttonContent"
       >
         <span
+          className="Label"
           data-component="text"
         >
           Clear