diff --git a/static/app/components/core/button/index.tsx b/static/app/components/core/button/index.tsx
index be046c640e2c48..781d5819ade030 100644
--- a/static/app/components/core/button/index.tsx
+++ b/static/app/components/core/button/index.tsx
@@ -1,6 +1,6 @@
 import {forwardRef as reactForwardRef, useCallback} from 'react';
 import isPropValid from '@emotion/is-prop-valid';
-import type {Theme} from '@emotion/react';
+import type {SerializedStyles, Theme} from '@emotion/react';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 import type {LocationDescriptor} from 'history';
@@ -14,6 +14,17 @@ import HookStore from 'sentry/stores/hookStore';
 import {space} from 'sentry/styles/space';
 import mergeRefs from 'sentry/utils/mergeRefs';
 
+/**
+ * Default sizes to use for SVGIcon
+ */
+const ICON_SIZES: Partial<
+  Record<NonNullable<BaseButtonProps['size']>, SVGIconProps['size']>
+> = {
+  xs: 'xs',
+  sm: 'sm',
+  md: 'sm',
+};
+
 /**
  * The button can actually also be an anchor or React router Link (which seems
  * to be poorly typed as `any`). So this is a bit of a workaround to receive
@@ -50,20 +61,11 @@ interface CommonButtonProps {
    * Indicates that the button is "doing" something.
    */
   busy?: boolean;
-  /**
-   * Disables the button, assigning appropriate aria attributes and disallows
-   * interactions with the button.
-   */
-  disabled?: boolean;
   /**
    * The icon to render inside of the button. The size will be set
    * appropriately based on the size of the button.
    */
   icon?: React.ReactNode;
-  /**
-   * Used when the button is part of a form.
-   */
-  name?: string;
   /**
    * The semantic "priority" of the button. Use `primary` when the action is
    * contextually the primary action, `danger` if the button will do something
@@ -140,9 +142,7 @@ interface ButtonPropsWithAriaLabel extends BaseButtonProps {
 
 export type ButtonProps = ButtonPropsWithoutAriaLabel | ButtonPropsWithAriaLabel;
 
-export interface BaseLinkButtonProps
-  extends CommonButtonProps,
-    ElementProps<ButtonElement> {
+interface BaseLinkButtonProps extends CommonButtonProps, ElementProps<ButtonElement> {
   /**
    * @internal Used in the Button forwardRef
    */
@@ -201,17 +201,6 @@ export type LinkButtonProps =
   | HrefLinkButtonPropsWithChildren
   | HrefLinkButtonPropsWithAriaLabel;
 
-/**
- * Default sizes to use for SVGIcon
- */
-const ICON_SIZES: Partial<
-  Record<NonNullable<BaseButtonProps['size']>, SVGIconProps['size']>
-> = {
-  xs: 'xs',
-  sm: 'sm',
-  md: 'sm',
-};
-
 function BaseButton({
   size = 'md',
   to,
@@ -225,7 +214,8 @@ function BaseButton({
   borderless,
   translucentBorder,
   priority,
-  disabled = false,
+  disabled,
+  type = 'button',
   tooltipProps,
   onClick,
   analyticsEventName,
@@ -287,8 +277,8 @@ function BaseButton({
   );
 
   const hasChildren = Array.isArray(children)
-    ? children.some(child => !isEmptyChild(child))
-    : !isEmptyChild(children);
+    ? children.some(child => !!child || String(child) === '0')
+    : !!children || String(children) === '0';
 
   // Buttons come in 4 flavors: <Link>, <ExternalLink>, <a>, and <button>.
   // Let's use props to determine which to serve up, so we don't have to think about it.
@@ -306,6 +296,7 @@ function BaseButton({
       priority={priority}
       borderless={borderless}
       translucentBorder={translucentBorder}
+      type={type}
       {...buttonProps}
       onClick={handleClick}
       role="button"
@@ -326,16 +317,15 @@ function BaseButton({
     </StyledButton>
   );
 
-  // Doing this instead of using `Tooltip`'s `disabled` prop so that we can minimize snapshot nesting
-  if (title) {
-    return (
-      <Tooltip skipWrapper {...tooltipProps} title={title}>
-        {button}
-      </Tooltip>
-    );
+  if (!title) {
+    return button;
   }
 
-  return button;
+  return (
+    <Tooltip skipWrapper {...tooltipProps} title={title}>
+      {button}
+    </Tooltip>
+  );
 }
 
 export const Button = reactForwardRef<ButtonElement, ButtonProps>((props, ref) => (
@@ -355,6 +345,61 @@ type StyledButtonProps =
   | StyledButtonPropsWithAriaLabel
   | StyledButtonPropsWithoutAriaLabel;
 
+export const StyledButton = styled(
+  reactForwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
+    (
+      {
+        forwardRef,
+        size: _size,
+        title: _title,
+        type,
+        external,
+        to,
+        replace,
+        href,
+        disabled,
+        ...props
+      }: ButtonProps,
+      forwardRefAlt
+    ) => {
+      // XXX: There may be two forwarded refs here, one potentially passed from a
+      // wrapped Tooltip, another from callers of Button.
+      const ref = mergeRefs([forwardRef, forwardRefAlt]);
+
+      // Get component to use based on existence of `to` or `href` properties
+      // Can be react-router `Link`, `a`, or `button`
+      if (to) {
+        return (
+          <Link {...props} ref={ref} to={to} replace={replace} disabled={disabled} />
+        );
+      }
+
+      if (href) {
+        return (
+          <a
+            {...props}
+            ref={ref}
+            href={href}
+            aria-disabled={disabled}
+            {...(external ? {target: '_blank', rel: 'noreferrer noopener'} : {})}
+          />
+        );
+      }
+
+      return <button {...props} type={type} ref={ref} disabled={disabled} />;
+    }
+  ),
+  {
+    shouldForwardProp: prop =>
+      prop === 'forwardRef' ||
+      prop === 'external' ||
+      prop === 'replace' ||
+      (typeof prop === 'string' && isPropValid(prop)),
+  }
+)<ButtonProps>`
+  ${getButtonStyles}
+`;
+
 const getBoxShadow = ({
   priority,
   borderless,
@@ -362,9 +407,11 @@ const getBoxShadow = ({
   disabled,
   size,
   theme,
-}: StyledButtonProps) => {
+}: StyledButtonProps): SerializedStyles => {
   if (disabled || borderless || priority === 'link') {
-    return 'box-shadow: none';
+    return css`
+      box-shadow: none;
+    `;
   }
 
   const themeName = disabled ? 'disabled' : priority || 'default';
@@ -374,12 +421,12 @@ const getBoxShadow = ({
     : '';
   const dropShadow = size === 'xs' ? theme.dropShadowLight : theme.dropShadowMedium;
 
-  return `
-      box-shadow: ${translucentBorderString} ${dropShadow};
-      &:active {
-        box-shadow: ${translucentBorderString} inset ${dropShadow};
-      }
-    `;
+  return css`
+    box-shadow: ${translucentBorderString} ${dropShadow};
+    &:active {
+      box-shadow: ${translucentBorderString} inset ${dropShadow};
+    }
+  `;
 };
 
 const getColors = ({
@@ -389,60 +436,59 @@ const getColors = ({
   borderless,
   translucentBorder,
   theme,
-}: StyledButtonProps) => {
+}: StyledButtonProps): SerializedStyles => {
   const themeName = disabled ? 'disabled' : priority || 'default';
   const {color, colorActive, background, border, borderActive, focusBorder, focusShadow} =
     theme.button[themeName];
 
-  const getFocusState = () => {
+  const getFocusState = (): SerializedStyles => {
     switch (priority) {
       case 'primary':
       case 'danger':
-        return `
+        return css`
           border-color: ${focusBorder};
-          box-shadow: ${focusBorder} 0 0 0 1px, ${focusShadow} 0 0 0 4px;`;
+          box-shadow:
+            ${focusBorder} 0 0 0 1px,
+            ${focusShadow} 0 0 0 4px;
+        `;
       default:
         if (translucentBorder) {
-          return `
+          return css`
             border-color: ${focusBorder};
-            box-shadow: ${focusBorder} 0 0 0 2px;`;
+            box-shadow: ${focusBorder} 0 0 0 2px;
+          `;
         }
-        return `
+        return css`
           border-color: ${focusBorder};
-          box-shadow: ${focusBorder} 0 0 0 1px;`;
-    }
-  };
-
-  const getBackgroundColor = () => {
-    switch (priority) {
-      case 'primary':
-      case 'danger':
-        return `background-color: ${background};`;
-      default:
-        if (borderless) {
-          return `background-color: transparent;`;
-        }
-        return `background-color: ${background};`;
+          box-shadow: ${focusBorder} 0 0 0 1px;
+        `;
     }
   };
 
   return css`
     color: ${color};
-    ${getBackgroundColor()}
+    background-color: ${priority === 'primary' || priority === 'danger'
+      ? background
+      : borderless
+        ? 'transparent'
+        : background};
 
     border: 1px solid ${borderless || priority === 'link' ? 'transparent' : border};
 
-    ${translucentBorder && `border-width: 0;`}
+    ${translucentBorder &&
+    css`
+      border-width: 0;
+    `}
 
     &:hover {
       color: ${color};
     }
 
     ${size !== 'zero' &&
-    `
+    css`
       &:hover,
       &:active,
-      &[aria-expanded="true"] {
+      &[aria-expanded='true'] {
         color: ${colorActive || color};
         border-color: ${borderless || priority === 'link' ? 'transparent' : borderActive};
       }
@@ -460,7 +506,11 @@ const getColors = ({
   `;
 };
 
-const getSizeStyles = ({size = 'md', translucentBorder, theme}: StyledButtonProps) => {
+const getSizeStyles = ({
+  size = 'md',
+  translucentBorder,
+  theme,
+}: StyledButtonProps): SerializedStyles => {
   const buttonSize = size === 'zero' ? 'md' : size;
   const formStyles = theme.form[buttonSize];
   const buttonPadding = theme.buttonPadding[buttonSize];
@@ -477,103 +527,59 @@ const getSizeStyles = ({size = 'md', translucentBorder, theme}: StyledButtonProp
       }
     : {};
 
-  return {...formStyles, ...buttonPadding, ...borderStyles};
+  return css`
+    ${formStyles}
+    ${buttonPadding}
+    ${borderStyles}
+  `;
 };
 
-export const StyledButton = styled(
-  reactForwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
-    (
-      {
-        forwardRef,
-        size: _size,
-        title: _title,
-        external,
-        to,
-        replace,
-        href,
-        disabled,
-        ...props
-      }: ButtonProps,
-      forwardRefAlt
-    ) => {
-      // XXX: There may be two forwarded refs here, one potentially passed from a
-      // wrapped Tooltip, another from callers of Button.
-
-      const ref = mergeRefs([forwardRef, forwardRefAlt]);
-
-      // Get component to use based on existence of `to` or `href` properties
-      // Can be react-router `Link`, `a`, or `button`
-      if (to) {
-        return (
-          <Link {...props} ref={ref} to={to} replace={replace} disabled={disabled} />
-        );
-      }
-
-      if (href && external) {
-        return (
-          <a
-            {...props}
-            ref={ref}
-            href={href}
-            aria-disabled={disabled}
-            target="_blank"
-            rel="noreferrer noopener"
-          />
-        );
-      }
-
-      if (href) {
-        return <a {...props} ref={ref} href={href} />;
-      }
-
-      // The default `type` of a native button element is `submit` when inside
-      // of a form. This is typically not what we want, and if we do want it we
-      // should explicitly set type submit.
-      props.type ??= 'button';
-
-      return <button {...props} ref={ref} disabled={disabled} />;
-    }
-  ),
-  {
-    shouldForwardProp: prop =>
-      prop === 'forwardRef' ||
-      prop === 'external' ||
-      prop === 'replace' ||
-      (typeof prop === 'string' && isPropValid(prop)),
-  }
-)<ButtonProps>`
-  position: relative;
-  display: inline-block;
-  border-radius: ${p => p.theme.borderRadius};
-  text-transform: none;
-  font-weight: ${p => p.theme.fontWeightBold};
-  ${getColors};
-  ${getSizeStyles};
-  ${getBoxShadow};
-  cursor: ${p => (p.disabled ? 'not-allowed' : 'pointer')};
-  opacity: ${p => (p.busy || p.disabled) && '0.65'};
-  transition:
-    background 0.1s,
-    border 0.1s,
-    box-shadow 0.1s;
-
-  ${p =>
-    p.priority === 'link' &&
-    `font-size: inherit; font-weight: inherit; padding: 0; height: auto; min-height: auto;`}
-  ${p => p.size === 'zero' && `height: auto; min-height: auto; padding: ${space(0.25)};`}
+function getButtonStyles(p: StyledButtonProps & {theme: Theme}): SerializedStyles {
+  return css`
+    position: relative;
+    display: inline-block;
+    border-radius: ${p.theme.borderRadius};
+    text-transform: none;
+    font-weight: ${p.theme.fontWeightBold};
+    cursor: ${p.disabled ? 'not-allowed' : 'pointer'};
+    opacity: ${(p.busy || p.disabled) && '0.65'};
+
+    ${getColors(p)}
+    ${getSizeStyles(p)}
+    ${getBoxShadow(p)}
+
+    transition:
+      background 0.1s,
+      border 0.1s,
+      box-shadow 0.1s;
+
+    ${p.priority === 'link' &&
+    css`
+      font-size: inherit;
+      font-weight: inherit;
+      padding: 0;
+      height: auto;
+      min-height: auto;
+    `}
+    ${p.size === 'zero' &&
+    css`
+      height: auto;
+      min-height: auto;
+      padding: ${space(0.25)};
+    `}
 
   &:focus {
-    outline: none;
-  }
-`;
-
-const buttonLabelPropKeys = ['size', 'borderless'];
-type ButtonLabelProps = Pick<ButtonProps, 'size' | 'borderless'>;
+      outline: none;
+    }
+  `;
+}
 
 export const ButtonLabel = styled('span', {
   shouldForwardProp: prop =>
-    typeof prop === 'string' && isPropValid(prop) && !buttonLabelPropKeys.includes(prop),
-})<ButtonLabelProps>`
+    typeof prop === 'string' &&
+    isPropValid(prop) &&
+    !['size', 'borderless'].includes(prop),
+})<Pick<ButtonProps, 'size' | 'borderless'>>`
   height: 100%;
   display: flex;
   align-items: center;
@@ -581,45 +587,15 @@ export const ButtonLabel = styled('span', {
   white-space: nowrap;
 `;
 
-type ChildrenIconProps = {
-  hasChildren?: boolean;
-  size?: ButtonProps['size'];
-};
-
-const getIconMargin = ({size, hasChildren}: ChildrenIconProps) => {
-  // If button is only an icon, then it shouldn't have margin
-  if (!hasChildren) {
-    return '0';
-  }
-
-  switch (size) {
-    case 'xs':
-    case 'zero':
-      return space(0.75);
-    default:
-      return space(1);
-  }
-};
-
-function isEmptyChild(child: React.ReactNode) {
-  // truthy values are non empty
-  if (child) {
-    return false;
-  }
-
-  // out of the falsey values, 0 is the only one that takes space
-  if (child === 0) {
-    return false;
-  }
-
-  return true;
-}
-
-interface IconProps extends ChildrenIconProps, Omit<StyledButtonProps, 'theme'> {}
-const Icon = styled('span')<IconProps>`
+const Icon = styled('span')<{hasChildren?: boolean; size?: ButtonProps['size']}>`
   display: flex;
   align-items: center;
-  margin-right: ${getIconMargin};
+  margin-right: ${p =>
+    p.hasChildren
+      ? p.size === 'xs' || p.size === 'zero'
+        ? space(0.75)
+        : space(1)
+      : '0'};
   flex-shrink: 0;
 `;
 
diff --git a/static/app/views/settings/organizationDeveloperSettings/index.spec.tsx b/static/app/views/settings/organizationDeveloperSettings/index.spec.tsx
index a435cf7a4b7774..29cb730edc6529 100644
--- a/static/app/views/settings/organizationDeveloperSettings/index.spec.tsx
+++ b/static/app/views/settings/organizationDeveloperSettings/index.spec.tsx
@@ -106,7 +106,7 @@ describe('Organization Developer Settings', function () {
       });
 
       const deleteButton = await screen.findByRole('button', {name: 'Delete'});
-      expect(deleteButton).toHaveAttribute('aria-disabled', 'false');
+      expect(deleteButton).toBeEnabled();
 
       await userEvent.click(deleteButton);
       renderGlobalModal();
@@ -137,7 +137,7 @@ describe('Organization Developer Settings', function () {
 
       const publishButton = await screen.findByRole('button', {name: 'Publish'});
 
-      expect(publishButton).toHaveAttribute('aria-disabled', 'false');
+      expect(publishButton).toBeEnabled();
       await userEvent.click(publishButton);
 
       renderGlobalModal();
@@ -252,7 +252,7 @@ describe('Organization Developer Settings', function () {
         router,
       });
       const deleteButton = await screen.findByRole('button', {name: 'Delete'});
-      expect(deleteButton).toHaveAttribute('aria-disabled', 'true');
+      expect(deleteButton).toBeDisabled();
     });
 
     it('publish button is disabled', async () => {
@@ -263,7 +263,7 @@ describe('Organization Developer Settings', function () {
         router,
       });
       const publishButton = await screen.findByRole('button', {name: 'Publish'});
-      expect(publishButton).toHaveAttribute('aria-disabled', 'true');
+      expect(publishButton).toBeDisabled();
     });
   });
 
@@ -280,7 +280,7 @@ describe('Organization Developer Settings', function () {
     it('allows deleting', async () => {
       render(<OrganizationDeveloperSettings />);
       const deleteButton = await screen.findByRole('button', {name: 'Delete'});
-      expect(deleteButton).toHaveAttribute('aria-disabled', 'false');
+      expect(deleteButton).toBeEnabled();
     });
 
     it('publish button does not exist', () => {
@@ -306,7 +306,7 @@ describe('Organization Developer Settings', function () {
         organization: newOrg,
       });
       const deleteButton = await screen.findByRole('button', {name: 'Delete'});
-      expect(deleteButton).toHaveAttribute('aria-disabled', 'true');
+      expect(deleteButton).toBeDisabled();
     });
 
     it('publish button is disabled', async () => {
@@ -318,7 +318,7 @@ describe('Organization Developer Settings', function () {
         router,
       });
       const publishButton = await screen.findByRole('button', {name: 'Publish'});
-      expect(publishButton).toHaveAttribute('aria-disabled', 'true');
+      expect(publishButton).toBeDisabled();
     });
   });
 });