diff --git a/MIGRATION.md b/MIGRATION.md
index ceb73feaba6a..fea774ce9279 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -3,6 +3,7 @@
 - [From version 7.x to 8.0.0](#from-version-7x-to-800)
   - [Core changes](#core-changes)
     - [UI layout state has changed shape](#ui-layout-state-has-changed-shape)
+    - [New UI and props for Button and IconButton components](#new-ui-and-props-for-button-and-iconbutton-components)
 - [From version 7.4.0 to 7.5.0](#from-version-740-to-750)
   - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated)
   - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers)
@@ -320,6 +321,24 @@ In Storybook 7 it was possible to use `addons.setConfig({...});` to configure St
 - `showPanel: boolean` is now split into `bottomPanelHeight: number` and `rightPanelWidth: number`, where the numbers represents the size of the panel in pixels.
 - `isFullscreen: boolean` is no longer supported, but can be achieved by setting a combination of the above.
 
+#### New UI and props for Button and IconButton components
+
+We used to have a lot of different buttons in `@storybook/components` that were not used anywhere. In Storybook 8.0 we are deprecating `Form.Button` and added a new `Button` component that can be used in all places. The `IconButton` component has also been updated to use the new `Button` component under the hood. Going forward addon creators and Storybook maintainers should use the new `Button` component instead of `Form.Button`.
+
+For the `Button` component, the following props are now deprecated:
+
+- `isLink` - Please use the `asChild` prop instead like this: `<Button asChild><a href="">Link</a></Button>`
+- `primary` - Please use the `variant` prop instead.
+- `secondary` - Please use the `variant` prop instead.
+- `tertiary` - Please use the `variant` prop instead.
+- `gray` - Please use the `variant` prop instead.
+- `inForm` - Please use the `variant` prop instead.
+- `small` - Please use the `size` prop instead.
+- `outline` - Please use the `variant` prop instead.
+- `containsIcon`. Please add your icon as a child directly. No need for this prop anymore.
+
+The `IconButton` doesn't have any deprecated props but it now uses the new `Button` component under the hood so all props for `IconButton` will be the same as `Button`.
+
 ## From version 7.4.0 to 7.5.0
 
 #### `storyStoreV6` and `storiesOf` is deprecated
diff --git a/code/ui/blocks/src/controls/Object.tsx b/code/ui/blocks/src/controls/Object.tsx
index 11c51f8f6392..e3cf71bef394 100644
--- a/code/ui/blocks/src/controls/Object.tsx
+++ b/code/ui/blocks/src/controls/Object.tsx
@@ -288,7 +288,6 @@ export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange }) => {
     <Wrapper>
       {['Object', 'Array'].includes(getObjectType(data)) && (
         <RawButton
-          href="#"
           onClick={(e: SyntheticEvent) => {
             e.preventDefault();
             setShowRaw((v) => !v);
diff --git a/code/ui/components/package.json b/code/ui/components/package.json
index 85c425ea05bf..4ae6bbe3e2f7 100644
--- a/code/ui/components/package.json
+++ b/code/ui/components/package.json
@@ -59,8 +59,7 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@radix-ui/react-select": "^1.2.2",
-    "@radix-ui/react-toolbar": "^1.0.4",
+    "@radix-ui/react-slot": "^1.0.2",
     "@storybook/client-logger": "workspace:*",
     "@storybook/csf": "^0.1.0",
     "@storybook/global": "^5.0.0",
diff --git a/code/ui/components/src/components/Button/Button.deprecated.stories.tsx b/code/ui/components/src/components/Button/Button.deprecated.stories.tsx
new file mode 100644
index 000000000000..7aaadc6140b4
--- /dev/null
+++ b/code/ui/components/src/components/Button/Button.deprecated.stories.tsx
@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { Button } from './Button';
+import { Icons } from '../icon/icon';
+import { Form } from '../form';
+
+const meta: Meta<typeof Button> = {
+  title: 'Button/Deprecated',
+  component: Button,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Default = { args: { children: 'Default' } };
+
+export const FormButton: Story = {
+  render: (args) => <Form.Button {...args} />,
+  args: { children: 'Form.Button' },
+};
+
+export const Primary: Story = { args: { primary: true, children: 'Primary' } };
+export const Secondary: Story = { args: { secondary: true, children: 'Secondary' } };
+export const Tertiary: Story = { args: { tertiary: true, children: 'Tertiary' } };
+export const Gray: Story = { args: { gray: true, children: 'Gray' } };
+
+export const Outline: Story = { args: { outline: true, children: 'Outline' } };
+export const OutlinePrimary: Story = {
+  args: { outline: true, primary: true, children: 'Outline Primary' },
+};
+export const OutlineSecondary: Story = {
+  args: { outline: true, secondary: true, children: 'Outline Secondary' },
+};
+export const OutlineTertiary: Story = {
+  args: { outline: true, tertiary: true, children: 'Outline Tertiary' },
+};
+
+export const Disabled: Story = { args: { disabled: true, children: 'Disabled' } };
+export const DisabledPrimary: Story = {
+  args: { disabled: true, primary: true, children: 'Disabled Priary' },
+};
+export const DisabledSecondary: Story = {
+  args: { disabled: true, secondary: true, children: 'Disabled Secondary' },
+};
+export const DisabledTertiary: Story = {
+  args: { disabled: true, tertiary: true, children: 'Disabled Tertiary' },
+};
+export const DisabledGray: Story = {
+  args: { disabled: true, gray: true, children: 'Disabled Gray' },
+};
+
+export const Small: Story = { args: { small: true, children: 'Small' } };
+export const SmallPrimary: Story = {
+  args: { small: true, primary: true, children: 'Small Priary' },
+};
+export const SmallSecondary: Story = {
+  args: { small: true, secondary: true, children: 'Small Secondary' },
+};
+export const SmallTertiary: Story = {
+  args: { small: true, tertiary: true, children: 'Small Tertiary' },
+};
+export const SmallGray: Story = {
+  args: { small: true, gray: true, children: 'Small Gray' },
+};
+
+export const IsLink: Story = {
+  args: { isLink: true, children: 'Button as a link' },
+};
+
+export const IconPrimary: Story = {
+  args: {
+    primary: true,
+    containsIcon: true,
+    title: 'link',
+    children: <Icons icon="link" />,
+  },
+};
+export const IconOutline: Story = {
+  args: { outline: true, containsIcon: true, title: 'link', children: <Icons icon="link" /> },
+};
+export const IconOutlineSmall: Story = {
+  args: {
+    outline: true,
+    containsIcon: true,
+    small: true,
+    title: 'link',
+    children: <Icons icon="link" />,
+  },
+};
diff --git a/code/ui/components/src/components/Button/Button.stories.tsx b/code/ui/components/src/components/Button/Button.stories.tsx
index e1fc021087b8..bdf87aeab2e7 100644
--- a/code/ui/components/src/components/Button/Button.stories.tsx
+++ b/code/ui/components/src/components/Button/Button.stories.tsx
@@ -1,82 +1,185 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import type { ReactNode } from 'react';
 import React from 'react';
-import type { Args } from '@storybook/types';
-
 import { Button } from './Button';
 import { Icons } from '../icon/icon';
-import { Form } from '../form/index';
 
-export default {
+const meta = {
+  title: 'Button',
   component: Button,
-};
+  args: { children: 'Button' },
+} satisfies Meta<typeof Button>;
 
-export const Default = { args: { children: 'Default' } };
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-export const FormButton = {
-  render: (args: Args) => <Form.Button {...args} />,
-  args: { children: 'Form.Button' },
-};
+const Stack = ({ children }: { children: ReactNode }) => (
+  <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>{children}</div>
+);
 
-export const Primary = { args: { primary: true, children: 'Primary' } };
-export const Secondary = { args: { secondary: true, children: 'Secondary' } };
-export const Tertiary = { args: { tertiary: true, children: 'Tertiary' } };
-export const Gray = { args: { gray: true, children: 'Gray' } };
+const Row = ({ children }: { children: ReactNode }) => (
+  <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>{children}</div>
+);
 
-export const Outline = { args: { outline: true, children: 'Outline' } };
-export const OutlinePrimary = {
-  args: { outline: true, primary: true, children: 'Outline Primary' },
-};
-export const OutlineSecondary = {
-  args: { outline: true, secondary: true, children: 'Outline Secondary' },
-};
-export const OutlineTertiary = {
-  args: { outline: true, tertiary: true, children: 'Outline Tertiary' },
-};
+export const Base: Story = {};
 
-export const Disabled = { args: { disabled: true, children: 'Disabled' } };
-export const DisabledPrimary = {
-  args: { disabled: true, primary: true, children: 'Disabled Priary' },
-};
-export const DisabledSecondary = {
-  args: { disabled: true, secondary: true, children: 'Disabled Secondary' },
-};
-export const DisabledTertiary = {
-  args: { disabled: true, tertiary: true, children: 'Disabled Tertiary' },
-};
-export const DisabledGray = {
-  args: { disabled: true, gray: true, children: 'Disabled Gray' },
+export const Variants: Story = {
+  render: (args) => (
+    <Stack>
+      <Row>
+        <Button variant="solid" {...args}>
+          Solid
+        </Button>
+        <Button variant="outline" {...args}>
+          Outline
+        </Button>
+        <Button variant="ghost" {...args}>
+          Ghost
+        </Button>
+      </Row>
+      <Row>
+        <Button variant="solid" {...args}>
+          <Icons icon="facehappy" /> Solid
+        </Button>
+        <Button variant="outline" {...args}>
+          <Icons icon="facehappy" /> Outline
+        </Button>
+        <Button variant="ghost" {...args}>
+          <Icons icon="facehappy" /> Ghost
+        </Button>
+      </Row>
+      <Row>
+        <Button variant="solid" padding="small" {...args}>
+          <Icons icon="facehappy" />
+        </Button>
+        <Button variant="outline" padding="small" {...args}>
+          <Icons icon="facehappy" />
+        </Button>
+        <Button variant="ghost" padding="small" {...args}>
+          <Icons icon="facehappy" />
+        </Button>
+      </Row>
+    </Stack>
+  ),
 };
 
-export const Small = { args: { small: true, children: 'Small' } };
-export const SmallPrimary = {
-  args: { small: true, primary: true, children: 'Small Priary' },
+export const Active: Story = {
+  args: {
+    active: true,
+    children: (
+      <>
+        <Icons icon="facehappy" />
+        Button
+      </>
+    ),
+  },
+  render: (args) => (
+    <Row>
+      <Button variant="solid" {...args} />
+      <Button variant="outline" {...args} />
+      <Button variant="ghost" {...args} />
+    </Row>
+  ),
 };
-export const SmallSecondary = {
-  args: { small: true, secondary: true, children: 'Small Secondary' },
+
+export const WithIcon: Story = {
+  args: {
+    children: (
+      <>
+        <Icons icon="facehappy" />
+        Button
+      </>
+    ),
+  },
+  render: (args) => (
+    <Row>
+      <Button variant="solid" {...args} />
+      <Button variant="outline" {...args} />
+      <Button variant="ghost" {...args} />
+    </Row>
+  ),
 };
-export const SmallTertiary = {
-  args: { small: true, tertiary: true, children: 'Small Tertiary' },
+
+export const IconOnly: Story = {
+  args: {
+    children: <Icons icon="facehappy" />,
+    padding: 'small',
+  },
+  render: (args) => (
+    <Row>
+      <Button variant="solid" {...args} />
+      <Button variant="outline" {...args} />
+      <Button variant="ghost" {...args} />
+    </Row>
+  ),
 };
-export const SmallGray = {
-  args: { small: true, gray: true, children: 'Small Gray' },
+
+export const Sizes: Story = {
+  render: () => (
+    <Row>
+      <Button size="small">Small Button</Button>
+      <Button size="medium">Medium Button</Button>
+    </Row>
+  ),
 };
 
-export const IconPrimary = {
+export const Disabled: Story = {
   args: {
-    primary: true,
-    containsIcon: true,
-    title: 'link',
-    children: <Icons icon="link" />,
+    disabled: true,
+    children: 'Disabled Button',
   },
 };
-export const IconOutline = {
-  args: { outline: true, containsIcon: true, title: 'link', children: <Icons icon="link" /> },
+
+export const WithHref: Story = {
+  render: () => (
+    <Row>
+      <Button onClick={() => console.log('Hello')}>I am a button using onClick</Button>
+      <Button asChild>
+        <a href="https://storybook.js.org/">I am an anchor using Href</a>
+      </Button>
+    </Row>
+  ),
 };
-export const IconOutlineSmall = {
+
+export const Animated: Story = {
   args: {
-    outline: true,
-    containsIcon: true,
-    small: true,
-    title: 'link',
-    children: <Icons icon="link" />,
+    variant: 'outline',
   },
+  render: (args) => (
+    <Stack>
+      <Row>
+        <Button animation="glow" {...args}>
+          Button
+        </Button>
+        <Button animation="jiggle" {...args}>
+          Button
+        </Button>
+        <Button animation="rotate360" {...args}>
+          Button
+        </Button>
+      </Row>
+      <Row>
+        <Button animation="glow" {...args}>
+          <Icons icon="facehappy" /> Button
+        </Button>
+        <Button animation="jiggle" {...args}>
+          <Icons icon="facehappy" /> Button
+        </Button>
+        <Button animation="rotate360" {...args}>
+          <Icons icon="facehappy" /> Button
+        </Button>
+      </Row>
+      <Row>
+        <Button animation="glow" padding="small" {...args}>
+          <Icons icon="facehappy" />
+        </Button>
+        <Button animation="jiggle" padding="small" {...args}>
+          <Icons icon="facehappy" />
+        </Button>
+        <Button animation="rotate360" padding="small" {...args}>
+          <Icons icon="facehappy" />
+        </Button>
+      </Row>
+    </Stack>
+  ),
 };
diff --git a/code/ui/components/src/components/Button/Button.tsx b/code/ui/components/src/components/Button/Button.tsx
index 72598c214ec7..16744abb3472 100644
--- a/code/ui/components/src/components/Button/Button.tsx
+++ b/code/ui/components/src/components/Button/Button.tsx
@@ -1,272 +1,218 @@
-import type { FC, ComponentProps, ReactNode } from 'react';
-import React, { forwardRef } from 'react';
-import { styled } from '@storybook/theming';
+import type { ButtonHTMLAttributes, SyntheticEvent } from 'react';
+import React, { forwardRef, useEffect, useState } from 'react';
+import { isPropValid, styled } from '@storybook/theming';
 import { darken, lighten, rgba, transparentize } from 'polished';
+import { Slot } from '@radix-ui/react-slot';
+import { deprecate } from '@storybook/client-logger';
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  asChild?: boolean;
+  size?: 'small' | 'medium';
+  padding?: 'small' | 'medium';
+  variant?: 'outline' | 'solid' | 'ghost';
+  onClick?: (event: SyntheticEvent) => void;
+  disabled?: boolean;
+  active?: boolean;
+  animation?: 'none' | 'rotate360' | 'glow' | 'jiggle';
 
-const ButtonWrapper = styled.button<{
+  /** @deprecated Use {@link asChild} instead */
   isLink?: boolean;
+  /** @deprecated Use {@link variant} instead */
   primary?: boolean;
+  /** @deprecated Use {@link variant} instead */
   secondary?: boolean;
+  /** @deprecated Use {@link variant} instead */
   tertiary?: boolean;
+  /** @deprecated Use {@link variant} instead */
   gray?: boolean;
+  /** @deprecated Use {@link variant} instead */
   inForm?: boolean;
-  disabled?: boolean;
+  /** @deprecated Use {@link size} instead */
   small?: boolean;
+  /** @deprecated Use {@link variant} instead */
   outline?: boolean;
+  /** @deprecated Add your icon as a child directly */
   containsIcon?: boolean;
-  children?: ReactNode;
-  href?: string;
-}>(
-  ({ small, theme }) => ({
-    border: 0,
-    borderRadius: '3em',
-    cursor: 'pointer',
-    display: 'inline-block',
-    overflow: 'hidden',
-    padding: small ? '8px 16px' : '13px 20px',
-    position: 'relative',
-    textAlign: 'center',
-    textDecoration: 'none',
-    transitionProperty: 'background, box-shadow',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease-out',
-    verticalAlign: 'top',
-    whiteSpace: 'nowrap',
-    userSelect: 'none',
-    opacity: 1,
-    margin: 0,
-    background: 'transparent',
-
-    fontSize: `${small ? theme.typography.size.s1 : theme.typography.size.s2 - 1}px`,
-    fontWeight: theme.typography.weight.bold,
-    lineHeight: '1',
-
-    svg: {
-      display: 'inline-block',
-      height: small ? 12 : 14,
-      width: small ? 12 : 14,
-
-      verticalAlign: 'top',
-      marginRight: small ? 4 : 6,
-      marginTop: small ? 0 : -1,
-      marginBottom: small ? 0 : -1,
+}
 
-      /* Necessary for js mouse events to not glitch out when hovering on svgs */
-      pointerEvents: 'none',
-
-      path: {
-        fill: 'currentColor',
-      },
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      asChild = false,
+      animation = 'none',
+      size = 'small',
+      variant = 'outline',
+      padding = 'medium',
+      disabled = false,
+      active = false,
+      onClick,
+      ...props
     },
-  }),
-  ({ disabled }) =>
-    disabled
-      ? {
-          cursor: 'not-allowed !important',
-          opacity: 0.5,
-          '&:hover': {
-            transform: 'none',
-          },
-        }
-      : {},
-  ({ containsIcon, small }) =>
-    containsIcon
-      ? {
-          svg: {
-            display: 'block',
-            margin: 0,
-          },
-          ...(small ? { padding: 10 } : { padding: 13 }),
-        }
-      : {},
-  ({ theme, primary, secondary, gray }) => {
-    let color;
-
-    if (gray) {
-      color = theme.color.mediumlight;
-    } else if (secondary) {
-      color = theme.color.secondary;
-    } else if (primary) {
-      color = theme.color.primary;
+    ref
+  ) => {
+    let Comp: 'button' | 'a' | typeof Slot = 'button';
+    if (props.isLink) Comp = 'a';
+    if (asChild) Comp = Slot;
+    let localVariant = variant;
+    let localSize = size;
+
+    const [isAnimating, setIsAnimating] = useState(false);
+
+    const handleClick = (event: SyntheticEvent) => {
+      if (onClick) onClick(event);
+      if (animation === 'none') return;
+      setIsAnimating(true);
+    };
+
+    useEffect(() => {
+      const timer = setTimeout(() => {
+        if (isAnimating) setIsAnimating(false);
+      }, 1000);
+      return () => clearTimeout(timer);
+    }, [isAnimating]);
+
+    // Match the old API with the new API
+    // TODO: Remove this after 9.0
+    if (props.primary) {
+      localVariant = 'solid';
+      localSize = 'medium';
     }
 
-    return color
-      ? {
-          background: color,
-          color: gray ? theme.color.darkest : theme.color.lightest,
-
-          '&:hover': {
-            background: darken(0.05, color),
-          },
-          '&:active': {
-            boxShadow: 'rgba(0, 0, 0, 0.1) 0 0 0 3em inset',
-          },
-          '&:focus': {
-            boxShadow: `${rgba(color, 1)} 0 1px 9px 2px`,
-            outline: 'none',
-          },
-          '&:focus:hover': {
-            boxShadow: `${rgba(color, 0.2)} 0 8px 18px 0px`,
-          },
-        }
-      : {};
-  },
-  ({ theme, tertiary, inForm, small }) =>
-    tertiary
-      ? {
-          background: theme.button.background,
-          color: theme.input.color,
-          boxShadow: `${theme.button.border} 0 0 0 1px inset`,
-          borderRadius: theme.input.borderRadius,
-
-          ...(inForm && small ? { padding: '10px 16px' } : {}),
-
-          '&:hover': {
-            background:
-              theme.base === 'light'
-                ? darken(0.02, theme.button.background)
-                : lighten(0.03, theme.button.background),
-            ...(inForm
-              ? {}
-              : {
-                  boxShadow: 'rgba(0,0,0,.2) 0 2px 6px 0, rgba(0,0,0,.1) 0 0 0 1px inset',
-                }),
-          },
-          '&:active': {
-            background: theme.button.background,
-          },
-          '&:focus': {
-            boxShadow: `${rgba(theme.color.secondary, 1)} 0 0 0 1px inset`,
-            outline: 'none',
-          },
-        }
-      : {},
-  ({ theme, outline }) =>
-    outline
-      ? {
-          boxShadow: `${transparentize(0.8, theme.color.defaultText)} 0 0 0 1px inset`,
-          color: transparentize(0.3, theme.color.defaultText),
-          background: 'transparent',
-
-          '&:hover, &:focus': {
-            boxShadow: `${transparentize(0.5, theme.color.defaultText)} 0 0 0 1px inset`,
-            outline: 'none',
-          },
+    // Match the old API with the new API
+    // TODO: Remove this after 9.0
+    if (props.secondary || props.tertiary || props.gray || props.outline || props.inForm) {
+      localVariant = 'outline';
+      localSize = 'medium';
+    }
 
-          '&:active': {
-            boxShadow: `${transparentize(0.5, theme.color.defaultText)} 0 0 0 2px inset`,
-            color: transparentize(0, theme.color.defaultText),
-          },
-        }
-      : {},
-  ({ theme, outline, primary }) => {
-    const color = theme.color.primary;
+    if (
+      props.small ||
+      props.isLink ||
+      props.primary ||
+      props.secondary ||
+      props.tertiary ||
+      props.gray ||
+      props.outline ||
+      props.inForm ||
+      props.containsIcon
+    ) {
+      const buttonContent = React.Children.toArray(props.children).filter(
+        (e) => typeof e === 'string' && e !== ''
+      );
 
-    return outline && primary
-      ? {
-          boxShadow: `${color} 0 0 0 1px inset`,
-          color,
+      deprecate(
+        `Use of deprecated props in the button ${
+          buttonContent.length > 0 ? `"${buttonContent.join(' ')}"` : 'component'
+        } detected, see the migration notes at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#new-ui-and-props-for-button-and-iconbutton-components`
+      );
+    }
 
-          'svg path:not([fill])': {
-            fill: color,
-          },
+    return (
+      <StyledButton
+        as={Comp}
+        ref={ref}
+        variant={localVariant}
+        size={localSize}
+        padding={padding}
+        disabled={disabled}
+        active={active}
+        animating={isAnimating}
+        animation={animation}
+        onClick={handleClick}
+        {...props}
+      />
+    );
+  }
+);
 
-          '&:hover': {
-            boxShadow: `${color} 0 0 0 1px inset`,
-            background: 'transparent',
-          },
+Button.displayName = 'Button';
 
-          '&:active': {
-            background: color,
-            boxShadow: `${color} 0 0 0 1px inset`,
-            color: theme.color.tertiary,
-          },
-          '&:focus': {
-            boxShadow: `${color} 0 0 0 1px inset, ${rgba(color, 0.4)} 0 1px 9px 2px`,
-            outline: 'none',
-          },
-          '&:focus:hover': {
-            boxShadow: `${color} 0 0 0 1px inset, ${rgba(color, 0.2)} 0 8px 18px 0px`,
-          },
-        }
-      : {};
+const StyledButton = styled('button', {
+  shouldForwardProp: (prop) => isPropValid(prop),
+})<
+  ButtonProps & {
+    animating: boolean;
+    animation: ButtonProps['animation'];
+  }
+>(({ theme, variant, size, disabled, active, animating, animation, padding }) => ({
+  border: 0,
+  cursor: disabled ? 'not-allowed' : 'pointer',
+  display: 'inline-flex',
+  gap: '6px',
+  alignItems: 'center',
+  justifyContent: 'center',
+  overflow: 'hidden',
+  padding: (() => {
+    if (padding === 'small' && size === 'small') return '0 7px';
+    if (padding === 'small' && size === 'medium') return '0 9px';
+    if (size === 'small') return '0 10px';
+    if (size === 'medium') return '0 12px';
+    return 0;
+  })(),
+  height: size === 'small' ? '28px' : '32px',
+  position: 'relative',
+  textAlign: 'center',
+  textDecoration: 'none',
+  transitionProperty: 'background, box-shadow',
+  transitionDuration: '150ms',
+  transitionTimingFunction: 'ease-out',
+  verticalAlign: 'top',
+  whiteSpace: 'nowrap',
+  userSelect: 'none',
+  opacity: disabled ? 0.5 : 1,
+  margin: 0,
+  fontSize: `${theme.typography.size.s1}px`,
+  fontWeight: theme.typography.weight.bold,
+  lineHeight: '1',
+  background: (() => {
+    if (variant === 'solid') return theme.color.secondary;
+    if (variant === 'outline') return theme.button.background;
+    if (variant === 'ghost' && active) return theme.background.hoverable;
+    return 'transparent';
+  })(),
+  color: (() => {
+    if (variant === 'solid') return theme.color.lightest;
+    if (variant === 'outline') return theme.input.color;
+    if (variant === 'ghost' && active) return theme.color.secondary;
+    if (variant === 'ghost') return theme.color.mediumdark;
+    return theme.input.color;
+  })(),
+  boxShadow: variant === 'outline' ? `${theme.button.border} 0 0 0 1px inset` : 'none',
+  borderRadius: theme.input.borderRadius,
+  // Making sure that the button never shrinks below its minimum size
+  flexShrink: 0,
+
+  '&:hover': {
+    color: variant === 'ghost' ? theme.color.secondary : null,
+    background: (() => {
+      let bgColor = theme.color.secondary;
+      if (variant === 'solid') bgColor = theme.color.secondary;
+      if (variant === 'outline') bgColor = theme.button.background;
+
+      if (variant === 'ghost') return transparentize(0.86, theme.color.secondary);
+      return theme.base === 'light' ? darken(0.02, bgColor) : lighten(0.03, bgColor);
+    })(),
   },
-  ({ theme, outline, primary, secondary }) => {
-    let color;
-
-    if (secondary) {
-      color = theme.color.secondary;
-    } else if (primary) {
-      color = theme.color.primary;
-    }
-
-    return outline && color
-      ? {
-          boxShadow: `${color} 0 0 0 1px inset`,
-          color,
 
-          'svg path:not([fill])': {
-            fill: color,
-          },
+  '&:active': {
+    color: variant === 'ghost' ? theme.color.secondary : null,
+    background: (() => {
+      let bgColor = theme.color.secondary;
+      if (variant === 'solid') bgColor = theme.color.secondary;
+      if (variant === 'outline') bgColor = theme.button.background;
 
-          '&:hover': {
-            boxShadow: `${color} 0 0 0 1px inset`,
-            background: 'transparent',
-          },
-
-          '&:active': {
-            background: color,
-            boxShadow: `${color} 0 0 0 1px inset`,
-            color: theme.color.tertiary,
-          },
-          '&:focus': {
-            boxShadow: `${color} 0 0 0 1px inset, ${rgba(color, 0.4)} 0 1px 9px 2px`,
-            outline: 'none',
-          },
-          '&:focus:hover': {
-            boxShadow: `${color} 0 0 0 1px inset, ${rgba(color, 0.2)} 0 8px 18px 0px`,
-          },
-        }
-      : {};
-  }
-);
+      if (variant === 'ghost') return theme.background.hoverable;
+      return theme.base === 'light' ? darken(0.02, bgColor) : lighten(0.03, bgColor);
+    })(),
+  },
 
-const ButtonLink = ButtonWrapper.withComponent('a');
+  '&:focus': {
+    boxShadow: `${rgba(theme.color.secondary, 1)} 0 0 0 1px inset`,
+    outline: 'none',
+  },
 
-export const Button: FC<ComponentProps<typeof ButtonWrapper>> = Object.assign(
-  forwardRef<
-    any,
-    {
-      isLink?: boolean;
-      primary?: boolean;
-      secondary?: boolean;
-      tertiary?: boolean;
-      gray?: boolean;
-      inForm?: boolean;
-      disabled?: boolean;
-      small?: boolean;
-      outline?: boolean;
-      containsIcon?: boolean;
-      children?: ReactNode;
-      href?: string;
-    }
-  >(function Button({ isLink, children, ...props }, ref) {
-    if (isLink) {
-      return (
-        <ButtonLink {...props} ref={ref}>
-          {children}
-        </ButtonLink>
-      );
-    }
-    return (
-      <ButtonWrapper {...props} ref={ref}>
-        {children}
-      </ButtonWrapper>
-    );
-  }),
-  {
-    defaultProps: {
-      isLink: false,
-    },
-  }
-);
+  '> svg': {
+    animation:
+      animating && animation !== 'none' ? `${theme.animation[animation]} 1000ms ease-out` : '',
+  },
+}));
diff --git a/code/ui/components/src/components/Button/Docs.mdx b/code/ui/components/src/components/Button/Docs.mdx
new file mode 100644
index 000000000000..a3259c4667c3
--- /dev/null
+++ b/code/ui/components/src/components/Button/Docs.mdx
@@ -0,0 +1,159 @@
+import { Canvas, Meta, Controls, Source } from '@storybook/blocks';
+
+import * as ButtonStories from './Button.stories';
+
+<Meta of={ButtonStories} />
+
+# Button
+
+Button component is used to trigger an action or event, such as submitting a form, opening a Dialog, canceling an action, or performing a delete operation.
+
+## Import
+
+<Source
+  language="tsx"
+  dark={true}
+  code={`
+import { Button } from '@storybook/components
+
+// If you would like to use icons, please import them from the icons library
+import { FaceHappy, Heart } from '@storybook/icons'
+`} />
+
+## Usage
+<Source
+  language="tsx"
+  dark={true}
+  code={`
+// Using the onClick event handler
+<Button onClick={}>Hello world!</Button>
+
+// Using the asChild prop to render a custom child
+<Button asChild>
+  <a href="https://storybook.js.org">Hello world!</a>
+</Button>
+`} />
+<Canvas of={ButtonStories.Base} />
+<Controls />
+
+### Button sizes
+
+Use the `size` prop to change the size of the button. You can set the value to `small` or `medium`.
+
+<Canvas of={ButtonStories.Sizes} />
+<Source
+  language="tsx"
+  dark={true}
+  code={`
+<Button size="small">Small Button</Button>
+<Button size="medium">Medium Button</Button>
+`} />
+
+### Button variants
+
+Use the `variant` prop to change the visual style of the button. You can set the value to `outline`, `solid` or `ghost`.
+
+<Canvas of={ButtonStories.Variants} />
+<Source
+  language="tsx"
+  dark={true}
+  code={`
+<Button variant="outline">Outline</Button>
+<Button variant="solid">Solid</Button>
+<Button variant="Ghost">Ghost</Button>
+`} />
+
+### Button with icon
+
+You can add an icon to the button by adding the icon on the left of the text. Please use any icon from the icon library `@storybook/icons`.
+
+<Canvas of={ButtonStories.WithIcon} />
+<Source
+  language="tsx"
+  dark={true}
+  code={`
+<Button>
+  <FaceHappy />Button
+</Button>
+`} />
+
+### Icon only buttons
+
+You can also use the button as an icon only button by removing the text. to make sure the button is square, please set the padding prop to `small`
+
+<Canvas of={ButtonStories.IconOnly} />
+<Source
+  language="tsx"
+  dark={true}
+  code={`
+<Button padding="small">
+  <FaceHappy />
+</Button>
+`} />
+
+### Button with custom wrapper
+
+If you want to use a custom wrapper to set the button as an external link or to use your custom router, you can use the `asChild` prop. This will render the button as a child of the wrapper.
+
+<Canvas of={ButtonStories.WithHref} />
+<Source
+  language="tsx"
+  dark={true}
+  code={`
+<Button asChild>
+  <a href="https://storybook.js.org">Hello world!</a>
+</Button>
+<Button asChild>
+  <Link href='/home'>Hello world!</Link>
+</Button>
+`} />
+
+### Button with animations
+
+You can use the `animate` prop to add animations to the button. You can set the value to `glow`, `jiggle` or `rotate360`.
+
+<Canvas of={ButtonStories.Animated} />
+<Source
+  language="tsx"
+  dark={true}
+  code={`
+<Button animation="glow">
+  <Icons icon="facehappy" />Button
+</Button>
+<Button animation="jiggle">
+  <Icons icon="facehappy" />Button
+</Button>
+<Button animation="rotate360">
+  <Icons icon="facehappy" />Button
+</Button>
+`} />
+
+### Active button
+
+You can use the `active` prop to set the button as active. This will change the background color of the button.
+
+<Canvas of={ButtonStories.Active} />
+<Source
+  language="tsx"
+  dark={true}
+  code={`
+<Button active>
+  <Icons icon="facehappy" />Button
+</Button>
+ `}
+/>
+
+### Disabled button
+
+You can use the `disabled` prop to set the button as disabled.
+
+<Canvas of={ButtonStories.Disabled} />
+<Source
+  language="tsx"
+  dark={true}
+  code={`
+<Button disabled>
+  <Icons icon="facehappy" />Button
+</Button>
+ `}
+/>
\ No newline at end of file
diff --git a/code/ui/components/src/components/IconButton/IconButton.stories.tsx b/code/ui/components/src/components/IconButton/IconButton.stories.tsx
new file mode 100644
index 000000000000..2f88a3e898a2
--- /dev/null
+++ b/code/ui/components/src/components/IconButton/IconButton.stories.tsx
@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { IconButton } from './IconButton';
+import { Icons } from '../icon/icon';
+
+const meta = {
+  title: 'IconButton',
+  component: IconButton,
+  tags: ['autodocs'],
+  args: { children: <Icons icon="facehappy" /> },
+} satisfies Meta<typeof IconButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Base = {};
+
+export const Types: Story = {
+  render: ({ ...args }) => (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+      <IconButton {...args} variant="solid" />
+      <IconButton {...args} variant="outline" />
+      <IconButton {...args} variant="ghost" />
+    </div>
+  ),
+};
+
+export const Active: Story = {
+  args: { active: true },
+  render: ({ ...args }) => (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+      <IconButton {...args} variant="solid" />
+      <IconButton {...args} variant="outline" />
+      <IconButton {...args} variant="ghost" />
+    </div>
+  ),
+};
+
+export const Sizes: Story = {
+  args: { variant: 'solid' },
+  render: ({ ...args }) => (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+      <IconButton {...args} size="small" />
+      <IconButton {...args} size="medium" />
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  args: { disabled: true },
+  render: ({ ...args }) => (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+      <IconButton {...args} variant="solid" />
+      <IconButton {...args} variant="outline" />
+      <IconButton {...args} variant="ghost" />
+    </div>
+  ),
+};
+
+export const Animated: Story = {
+  render: ({ ...args }) => (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+      <IconButton {...args} animation="glow" />
+      <IconButton {...args} animation="rotate360" />
+      <IconButton {...args} animation="jiggle" />
+    </div>
+  ),
+};
+
+export const WithHref: Story = {
+  render: ({ ...args }) => (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+      <IconButton {...args} onClick={() => console.log('Hello')} />
+      <IconButton {...args} asChild>
+        <a href="https://storybook.js.org/" aria-label="Visit Storybook website">
+          <Icons icon="facehappy" />
+        </a>
+      </IconButton>
+    </div>
+  ),
+};
diff --git a/code/ui/components/src/components/IconButton/IconButton.tsx b/code/ui/components/src/components/IconButton/IconButton.tsx
new file mode 100644
index 000000000000..87088d342b52
--- /dev/null
+++ b/code/ui/components/src/components/IconButton/IconButton.tsx
@@ -0,0 +1,11 @@
+import React, { forwardRef } from 'react';
+import type { ButtonProps } from '../Button/Button';
+import { Button } from '../Button/Button';
+
+export const IconButton = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ padding = 'small', variant = 'ghost', ...props }, ref) => {
+    return <Button padding={padding} variant={variant} ref={ref} {...props} />;
+  }
+);
+
+IconButton.displayName = 'IconButton';
diff --git a/code/ui/components/src/components/bar/button.stories.tsx b/code/ui/components/src/components/bar/button.stories.tsx
deleted file mode 100644
index 6f2fb250168f..000000000000
--- a/code/ui/components/src/components/bar/button.stories.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react';
-
-import { IconButton, IconButtonSkeleton } from './button';
-import { Icons } from '../icon/icon';
-
-export default {
-  component: IconButton,
-};
-
-export const Loading = () => <IconButtonSkeleton />;
-
-// eslint-disable-next-line no-underscore-dangle, @typescript-eslint/naming-convention
-export const _IconButton = () => (
-  <IconButton>
-    <Icons icon="bookmark" />
-  </IconButton>
-);
-
-export const Active = () => (
-  <IconButton active>
-    <Icons icon="beaker" />
-  </IconButton>
-);
-
-export const Disabled = () => (
-  <IconButton disabled>
-    <Icons icon="beaker" />
-  </IconButton>
-);
-
-export const WithText = () => (
-  <IconButton>
-    <Icons icon="circlehollow" />
-    &nbsp;Howdy!
-  </IconButton>
-);
-
-export const WithTextActive = () => (
-  <IconButton active>
-    <Icons icon="circlehollow" />
-    &nbsp;Howdy!
-  </IconButton>
-);
-
-export const WithTextDisabled = () => (
-  <IconButton disabled>
-    <Icons icon="circlehollow" />
-    &nbsp;Howdy!
-  </IconButton>
-);
diff --git a/code/ui/components/src/components/bar/button.tsx b/code/ui/components/src/components/bar/button.tsx
index ebc97f41fa50..6392b6710209 100644
--- a/code/ui/components/src/components/bar/button.tsx
+++ b/code/ui/components/src/components/bar/button.tsx
@@ -1,8 +1,6 @@
 import type { AnchorHTMLAttributes, ButtonHTMLAttributes, DetailedHTMLProps } from 'react';
 import React from 'react';
 import { styled, isPropValid } from '@storybook/theming';
-import { transparentize } from 'polished';
-import { auto } from '@popperjs/core';
 
 interface BarButtonProps
   extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
@@ -95,54 +93,6 @@ export interface IconButtonProps {
   disabled?: boolean;
 }
 
-export const IconButton = styled(ButtonOrLink, { shouldForwardProp: isPropValid })<IconButtonProps>(
-  () => ({
-    alignItems: 'center',
-    background: 'transparent',
-    border: 'none',
-    borderRadius: 4,
-    color: 'inherit',
-    cursor: 'pointer',
-    display: 'inline-flex',
-    fontSize: 13,
-    fontWeight: 'bold',
-    height: 28,
-    justifyContent: 'center',
-    marginTop: 6,
-    padding: '8px 7px',
-
-    '& > svg': {
-      width: 14,
-    },
-  }),
-  ({ active, theme }) =>
-    active
-      ? {
-          backgroundColor: theme.background.hoverable,
-          color: theme.barSelectedColor,
-        }
-      : {},
-  ({ disabled, theme }) =>
-    disabled
-      ? {
-          opacity: 0.5,
-          cursor: 'not-allowed',
-        }
-      : {
-          '&:hover, &:focus-visible': {
-            background: transparentize(0.88, theme.color.secondary),
-            color: theme.barHoverColor,
-          },
-          '&:focus-visible': {
-            outline: auto, // Ensures links have the same focus style
-          },
-          '&:focus:not(:focus-visible)': {
-            outline: 'none',
-          },
-        }
-);
-IconButton.displayName = 'IconButton';
-
 const IconPlaceholder = styled.div(({ theme }) => ({
   width: 14,
   height: 14,
diff --git a/code/ui/components/src/components/bar/separator.tsx b/code/ui/components/src/components/bar/separator.tsx
index c43ebebad7b9..6a24a11d3386 100644
--- a/code/ui/components/src/components/bar/separator.tsx
+++ b/code/ui/components/src/components/bar/separator.tsx
@@ -6,8 +6,7 @@ export const Separator = styled.span<SeparatorProps>(
     width: 1,
     height: 20,
     background: theme.appBorderColor,
-    marginTop: 10,
-    marginLeft: 6,
+    marginLeft: 2,
     marginRight: 2,
   }),
   ({ force }) =>
diff --git a/code/ui/components/src/components/tabs/tabs.stories.tsx b/code/ui/components/src/components/tabs/tabs.stories.tsx
index cac0a76b4deb..ae766ca6f51f 100644
--- a/code/ui/components/src/components/tabs/tabs.stories.tsx
+++ b/code/ui/components/src/components/tabs/tabs.stories.tsx
@@ -12,8 +12,8 @@ import {
 } from '@storybook/testing-library';
 import { Tabs, TabsState, TabWrapper } from './tabs';
 import type { ChildrenList } from './tabs.helpers';
-import { IconButton } from '../bar/button';
 import { Icons } from '../icon/icon';
+import { IconButton } from '../IconButton/IconButton';
 
 const colours = Array.from(new Array(15), (val, index) => index).map((i) =>
   Math.floor((1 / 15) * i * 16777215)
diff --git a/code/ui/components/src/index.ts b/code/ui/components/src/index.ts
index 44934fc3ad00..ccc7053f7b1f 100644
--- a/code/ui/components/src/index.ts
+++ b/code/ui/components/src/index.ts
@@ -50,6 +50,7 @@ export { ErrorFormatter } from './components/ErrorFormatter/ErrorFormatter';
 
 // Forms
 export { Button } from './components/Button/Button';
+export { IconButton } from './components/IconButton/IconButton';
 export { Form } from './components/form/index';
 
 // Tooltips
@@ -64,7 +65,7 @@ export { default as ListItem } from './components/tooltip/ListItem';
 
 // Toolbar and subcomponents
 export { Tabs, TabsState, TabBar, TabWrapper } from './components/tabs/tabs';
-export { IconButton, IconButtonSkeleton, TabButton } from './components/bar/button';
+export { IconButtonSkeleton, TabButton } from './components/bar/button';
 export { Separator, interleaveSeparators } from './components/bar/separator';
 export { Bar, FlexBar } from './components/bar/bar';
 export { AddonPanel } from './components/addon-panel/addon-panel';
diff --git a/code/ui/manager/src/components/panel/Panel.tsx b/code/ui/manager/src/components/panel/Panel.tsx
index b153e83fe0c4..1ad1b563a303 100644
--- a/code/ui/manager/src/components/panel/Panel.tsx
+++ b/code/ui/manager/src/components/panel/Panel.tsx
@@ -1,8 +1,9 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import { Tabs, Icons, IconButton } from '@storybook/components';
 import type { State } from '@storybook/manager-api';
 import { shortcutToHumanString } from '@storybook/manager-api';
 import type { Addon_BaseType } from '@storybook/types';
+import { styled } from '@storybook/theming';
 import { useLayout } from '../layout/LayoutProvider';
 
 export interface SafeTabProps {
@@ -58,30 +59,32 @@ export const AddonPanel = React.memo<{
         menuName="Addons"
         actions={actions}
         tools={
-          isDesktop ? (
-            <Fragment>
-              <IconButton
-                key="position"
-                onClick={actions.togglePosition}
-                title={`Change addon orientation [${shortcutToHumanString(
-                  shortcuts.panelPosition
-                )}]`}
-              >
-                <Icons icon={panelPosition === 'bottom' ? 'sidebaralt' : 'bottombar'} />
-              </IconButton>
-              <IconButton
-                key="visibility"
-                onClick={actions.toggleVisibility}
-                title={`Hide addons [${shortcutToHumanString(shortcuts.togglePanel)}]`}
-              >
+          <Actions>
+            {isDesktop ? (
+              <>
+                <IconButton
+                  key="position"
+                  onClick={actions.togglePosition}
+                  title={`Change addon orientation [${shortcutToHumanString(
+                    shortcuts.panelPosition
+                  )}]`}
+                >
+                  <Icons icon={panelPosition === 'bottom' ? 'sidebaralt' : 'bottombar'} />
+                </IconButton>
+                <IconButton
+                  key="visibility"
+                  onClick={actions.toggleVisibility}
+                  title={`Hide addons [${shortcutToHumanString(shortcuts.togglePanel)}]`}
+                >
+                  <Icons icon="close" />
+                </IconButton>
+              </>
+            ) : (
+              <IconButton onClick={() => setMobilePanelOpen(false)} title="Close addon panel">
                 <Icons icon="close" />
               </IconButton>
-            </Fragment>
-          ) : (
-            <IconButton onClick={() => setMobilePanelOpen(false)} title="Close addon panel">
-              <Icons icon="close" />
-            </IconButton>
-          )
+            )}
+          </Actions>
         }
         id="storybook-panel-root"
       >
@@ -96,3 +99,9 @@ export const AddonPanel = React.memo<{
 );
 
 AddonPanel.displayName = 'AddonPanel';
+
+const Actions = styled.div({
+  display: 'flex',
+  alignItems: 'center',
+  gap: 6,
+});
diff --git a/code/ui/manager/src/components/preview/FramesRenderer.tsx b/code/ui/manager/src/components/preview/FramesRenderer.tsx
index fbd7d4cf1867..a1a89a9e5041 100644
--- a/code/ui/manager/src/components/preview/FramesRenderer.tsx
+++ b/code/ui/manager/src/components/preview/FramesRenderer.tsx
@@ -96,8 +96,10 @@ export const FramesRenderer: FC<FramesRendererProps> = ({
             return null;
           }
           return (
-            <SkipToSidebarLink secondary isLink tabIndex={0} href={`#${selectedStoryId}`}>
-              Skip to sidebar
+            <SkipToSidebarLink asChild>
+              <a href={`#${selectedStoryId}`} tabIndex={0} title="Skip to sidebar">
+                Skip to sidebar
+              </a>
             </SkipToSidebarLink>
           );
         }}
diff --git a/code/ui/manager/src/components/preview/Toolbar.tsx b/code/ui/manager/src/components/preview/Toolbar.tsx
index 9e81c650e02d..f7a29c09985f 100644
--- a/code/ui/manager/src/components/preview/Toolbar.tsx
+++ b/code/ui/manager/src/components/preview/Toolbar.tsx
@@ -278,7 +278,8 @@ const ToolbarLeft = styled.div({
   display: 'flex',
   whiteSpace: 'nowrap',
   flexBasis: 'auto',
-  gap: 4,
+  gap: 6,
+  alignItems: 'center',
 });
 
 const ToolbarRight = styled(ToolbarLeft)({
diff --git a/code/ui/manager/src/components/preview/tools/eject.tsx b/code/ui/manager/src/components/preview/tools/eject.tsx
index 65688038b859..4d0a903919f3 100644
--- a/code/ui/manager/src/components/preview/tools/eject.tsx
+++ b/code/ui/manager/src/components/preview/tools/eject.tsx
@@ -28,13 +28,15 @@ export const ejectTool: Addon_BaseType = {
     <Consumer filter={ejectMapper}>
       {({ baseUrl, storyId, queryParams }) =>
         storyId ? (
-          <IconButton
-            key="opener"
-            href={getStoryHref(baseUrl, storyId, queryParams)}
-            target="_blank"
-            title="Open canvas in new tab"
-          >
-            <Icons icon="sharealt" />
+          <IconButton key="opener" asChild>
+            <a
+              href={getStoryHref(baseUrl, storyId, queryParams)}
+              target="_blank"
+              rel="noopener noreferrer"
+              title="Open canvas in new tab"
+            >
+              <Icons icon="sharealt" />
+            </a>
           </IconButton>
         ) : null
       }
diff --git a/code/ui/manager/src/components/sidebar/Heading.tsx b/code/ui/manager/src/components/sidebar/Heading.tsx
index f360cab313d0..1cdb6e5fa2aa 100644
--- a/code/ui/manager/src/components/sidebar/Heading.tsx
+++ b/code/ui/manager/src/components/sidebar/Heading.tsx
@@ -88,8 +88,10 @@ export const Heading: FC<HeadingProps & ComponentProps<typeof HeadingWrapper>> =
   return (
     <HeadingWrapper {...props}>
       {skipLinkHref && (
-        <SkipToCanvasLink secondary isLink tabIndex={0} href={skipLinkHref}>
-          Skip to canvas
+        <SkipToCanvasLink asChild>
+          <a href={skipLinkHref} tabIndex={0}>
+            Skip to canvas
+          </a>
         </SkipToCanvasLink>
       )}
 
diff --git a/code/ui/manager/src/components/sidebar/Tree.tsx b/code/ui/manager/src/components/sidebar/Tree.tsx
index a430061f5bf4..dd50c5085115 100644
--- a/code/ui/manager/src/components/sidebar/Tree.tsx
+++ b/code/ui/manager/src/components/sidebar/Tree.tsx
@@ -241,8 +241,8 @@ const Node = React.memo<NodeProps>(function Node({
           {(item.renderLabel as (i: typeof item) => React.ReactNode)?.(item) || item.name}
         </LeafNode>
         {isSelected && (
-          <SkipToContentLink secondary outline isLink href="#storybook-preview-wrapper">
-            Skip to canvas
+          <SkipToContentLink asChild>
+            <a href="#storybook-preview-wrapper">Skip to canvas</a>
           </SkipToContentLink>
         )}
         {icon ? (
diff --git a/code/ui/manager/src/settings/About.tsx b/code/ui/manager/src/settings/About.tsx
index 5a62c40e6667..bd65795a66b4 100644
--- a/code/ui/manager/src/settings/About.tsx
+++ b/code/ui/manager/src/settings/About.tsx
@@ -72,20 +72,18 @@ const AboutScreen: FC<{ onNavigateToWhatsNew?: () => void }> = ({ onNavigateToWh
       <div style={{ flex: '1.2' }} />
       <Footer>
         <div style={{ marginBottom: 12 }}>
-          <SquareButton
-            isLink
-            outline
-            small
-            href="https://github.com/storybookjs/storybook"
-            style={{ marginRight: 12 }}
-          >
-            <Icons icon="github" style={{ display: 'inline', marginRight: 5 }} />
-            GitHub
+          <SquareButton asChild style={{ marginRight: 12 }}>
+            <a href="https://github.com/storybookjs/storybook">
+              <Icons icon="github" />
+              GitHub
+            </a>
           </SquareButton>
 
-          <SquareButton isLink outline small href="https://storybook.js.org/docs">
-            <Icons icon="document" style={{ display: 'inline', marginRight: 5 }} />
-            Documentation
+          <SquareButton asChild>
+            <a href="https://storybook.js.org/docs">
+              <Icons icon="document" style={{ display: 'inline', marginRight: 5 }} />
+              Documentation
+            </a>
           </SquareButton>
         </div>
         <div>
diff --git a/code/yarn.lock b/code/yarn.lock
index 488f1fa15fdc..a9ed2e401580 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -2985,44 +2985,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@floating-ui/core@npm:^1.4.1":
-  version: 1.4.1
-  resolution: "@floating-ui/core@npm:1.4.1"
-  dependencies:
-    "@floating-ui/utils": ^0.1.1
-  checksum: 6a738ff3b5bcca2470904a2462a2700e32081f6e681e077fd63c8d0b389439511a2a16187589df156fac6e8f47d56bdc0afea64303b9341fb5886cff82d87758
-  languageName: node
-  linkType: hard
-
-"@floating-ui/dom@npm:^1.5.1":
-  version: 1.5.2
-  resolution: "@floating-ui/dom@npm:1.5.2"
-  dependencies:
-    "@floating-ui/core": ^1.4.1
-    "@floating-ui/utils": ^0.1.1
-  checksum: ce0e7dca2d36667ef4a72a2200bd7c49bf1b1bb94a5a09efc27e9d225175d92f41f00a037f1ef060f8fe78af242bc0889e4b12dd0be4dcd7a772f4a63804e693
-  languageName: node
-  linkType: hard
-
-"@floating-ui/react-dom@npm:^2.0.0":
-  version: 2.0.2
-  resolution: "@floating-ui/react-dom@npm:2.0.2"
-  dependencies:
-    "@floating-ui/dom": ^1.5.1
-  peerDependencies:
-    react: ">=16.8.0"
-    react-dom: ">=16.8.0"
-  checksum: bfd07cfc9047a31e92e223dbbe48f2cdb75460126217b35cfbf8555eaf1718ce7c11f4ee4d39bdee89eaf9ad0a5c4dd9af443a552116fc3478a19a9f6283bdf6
-  languageName: node
-  linkType: hard
-
-"@floating-ui/utils@npm:^0.1.1":
-  version: 0.1.2
-  resolution: "@floating-ui/utils@npm:0.1.2"
-  checksum: a26fa0ca4d143ac925c3a966200abb2fcc43af47abfd42e57fb1aff1c9bdc0001d133c4c6575f1c15d328e8984149efa43a1f5803f02b6af9d9303b69b41c059
-  languageName: node
-  linkType: hard
-
 "@gar/promisify@npm:^1.1.3":
   version: 1.1.3
   resolution: "@gar/promisify@npm:1.1.3"
@@ -5096,67 +5058,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/number@npm:1.0.1":
-  version: 1.0.1
-  resolution: "@radix-ui/number@npm:1.0.1"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-  checksum: 42e4870cd14459da6da03e43c7507dc4c807ed787a87bda52912a0d1d6d5013326b697c18c9625fc6a2cf0af2b45d9c86747985b45358fd92ab646b983978e3c
-  languageName: node
-  linkType: hard
-
-"@radix-ui/primitive@npm:1.0.1":
-  version: 1.0.1
-  resolution: "@radix-ui/primitive@npm:1.0.1"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-  checksum: 912216455537db3ca77f3e7f70174fb2b454fbd4a37a0acb7cfadad9ab6131abdfb787472242574460a3c301edf45738340cc84f6717982710082840fde7d916
-  languageName: node
-  linkType: hard
-
-"@radix-ui/react-arrow@npm:1.0.3":
-  version: 1.0.3
-  resolution: "@radix-ui/react-arrow@npm:1.0.3"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/react-primitive": 1.0.3
-  peerDependencies:
-    "@types/react": "*"
-    "@types/react-dom": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8 || ^17.0 || ^18.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-    "@types/react-dom":
-      optional: true
-  checksum: c931f6d7e0bac50fd1654a0303a303aff74a68a13a33a851a43a7c88677b53a92ca6557920b9105144a3002f899ce888437d20ddd7803a5c716edac99587626d
-  languageName: node
-  linkType: hard
-
-"@radix-ui/react-collection@npm:1.0.3":
-  version: 1.0.3
-  resolution: "@radix-ui/react-collection@npm:1.0.3"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/react-compose-refs": 1.0.1
-    "@radix-ui/react-context": 1.0.1
-    "@radix-ui/react-primitive": 1.0.3
-    "@radix-ui/react-slot": 1.0.2
-  peerDependencies:
-    "@types/react": "*"
-    "@types/react-dom": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8 || ^17.0 || ^18.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-    "@types/react-dom":
-      optional: true
-  checksum: cefa56383d7451ca79e4bd5a29aaeef6c205a04297213efd149aaead82fc8cde4fb8298e20e6b3613e5696e43f814fb4489805428f6604834fb31f73c6725fa8
-  languageName: node
-  linkType: hard
-
 "@radix-ui/react-compose-refs@npm:1.0.1":
   version: 1.0.1
   resolution: "@radix-ui/react-compose-refs@npm:1.0.1"
@@ -5172,271 +5073,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-context@npm:1.0.1":
-  version: 1.0.1
-  resolution: "@radix-ui/react-context@npm:1.0.1"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-  peerDependencies:
-    "@types/react": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: 3de5761b32cc70cd61715527f29d8c699c01ab28c195ced972ccbc7025763a373a68f18c9f948c7a7b922e469fd2df7fee5f7536e3f7bad44ffc06d959359333
-  languageName: node
-  linkType: hard
-
-"@radix-ui/react-direction@npm:1.0.1":
-  version: 1.0.1
-  resolution: "@radix-ui/react-direction@npm:1.0.1"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-  peerDependencies:
-    "@types/react": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: b1a45b4d1d5070ca3b5864b920f6c6210c962bdb519abb62b38b1baef9d06737dc3d8ecdb61860b7504a735235a539652f5977c7299ec021da84e6b0f64d988a
-  languageName: node
-  linkType: hard
-
-"@radix-ui/react-dismissable-layer@npm:1.0.4":
-  version: 1.0.4
-  resolution: "@radix-ui/react-dismissable-layer@npm:1.0.4"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/primitive": 1.0.1
-    "@radix-ui/react-compose-refs": 1.0.1
-    "@radix-ui/react-primitive": 1.0.3
-    "@radix-ui/react-use-callback-ref": 1.0.1
-    "@radix-ui/react-use-escape-keydown": 1.0.3
-  peerDependencies:
-    "@types/react": "*"
-    "@types/react-dom": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8 || ^17.0 || ^18.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-    "@types/react-dom":
-      optional: true
-  checksum: a7b9695092cd4109a7b4a4a66b7f634c42d4f39aa0893621a8ee5e8bc90f8ae27e741df66db726c341a60d2115e3f813520fee1f5cc4fb05d77914b4ade3819f
-  languageName: node
-  linkType: hard
-
-"@radix-ui/react-focus-guards@npm:1.0.1":
-  version: 1.0.1
-  resolution: "@radix-ui/react-focus-guards@npm:1.0.1"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-  peerDependencies:
-    "@types/react": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: d5fd4e5aa9d9a87c8ad490b3b4992d6f1d9eddf18e56df2a2bcf8744c4332b275d73377fd193df3e6ba0ad9608dc497709beca5c64de2b834d5f5350b3c9a272
-  languageName: node
-  linkType: hard
-
-"@radix-ui/react-focus-scope@npm:1.0.3":
-  version: 1.0.3
-  resolution: "@radix-ui/react-focus-scope@npm:1.0.3"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/react-compose-refs": 1.0.1
-    "@radix-ui/react-primitive": 1.0.3
-    "@radix-ui/react-use-callback-ref": 1.0.1
-  peerDependencies:
-    "@types/react": "*"
-    "@types/react-dom": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8 || ^17.0 || ^18.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-    "@types/react-dom":
-      optional: true
-  checksum: bfff46919666c122f5b812ee427494ae8408c0eebee30337bd2ce0eedf539f0feaa242f790304ef9df15425b837010ffc6061ce467bedd2c5fd9373bee2b95da
-  languageName: node
-  linkType: hard
-
-"@radix-ui/react-id@npm:1.0.1":
-  version: 1.0.1
-  resolution: "@radix-ui/react-id@npm:1.0.1"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/react-use-layout-effect": 1.0.1
-  peerDependencies:
-    "@types/react": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: e2859ca58bea171c956098ace7ecf615cf9432f58a118b779a14720746b3adcf0351c36c75de131548672d3cd290ca238198acbd33b88dc4706f98312e9317ad
-  languageName: node
-  linkType: hard
-
-"@radix-ui/react-popper@npm:1.1.2":
-  version: 1.1.2
-  resolution: "@radix-ui/react-popper@npm:1.1.2"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-    "@floating-ui/react-dom": ^2.0.0
-    "@radix-ui/react-arrow": 1.0.3
-    "@radix-ui/react-compose-refs": 1.0.1
-    "@radix-ui/react-context": 1.0.1
-    "@radix-ui/react-primitive": 1.0.3
-    "@radix-ui/react-use-callback-ref": 1.0.1
-    "@radix-ui/react-use-layout-effect": 1.0.1
-    "@radix-ui/react-use-rect": 1.0.1
-    "@radix-ui/react-use-size": 1.0.1
-    "@radix-ui/rect": 1.0.1
-  peerDependencies:
-    "@types/react": "*"
-    "@types/react-dom": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8 || ^17.0 || ^18.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-    "@types/react-dom":
-      optional: true
-  checksum: 4bd069b79f7046af2c0967b8e43f727cd09834cbd6df1e3d5a943c4f83428ff8b646882737fdf7593c22e261a1d13768a5c020138d79503862ae2e1729081bba
-  languageName: node
-  linkType: hard
-
-"@radix-ui/react-portal@npm:1.0.3":
-  version: 1.0.3
-  resolution: "@radix-ui/react-portal@npm:1.0.3"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/react-primitive": 1.0.3
-  peerDependencies:
-    "@types/react": "*"
-    "@types/react-dom": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8 || ^17.0 || ^18.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-    "@types/react-dom":
-      optional: true
-  checksum: baf295bbbf09ead37b64ee1dc025a6a540960f5e60552766d78f6065504c67d4bcf49fad5e2073617d9a3011daafad625aa3bd1da7a886c704833b22a49e888f
-  languageName: node
-  linkType: hard
-
-"@radix-ui/react-primitive@npm:1.0.3":
-  version: 1.0.3
-  resolution: "@radix-ui/react-primitive@npm:1.0.3"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/react-slot": 1.0.2
-  peerDependencies:
-    "@types/react": "*"
-    "@types/react-dom": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8 || ^17.0 || ^18.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-    "@types/react-dom":
-      optional: true
-  checksum: 67a66ff8898a5e7739eda228ab6f5ce808858da1dce967014138d87e72b6bbfc93dc1467c706d98d1a2b93bf0b6e09233d1a24d31c78227b078444c1a69c42be
-  languageName: node
-  linkType: hard
-
-"@radix-ui/react-roving-focus@npm:1.0.4":
-  version: 1.0.4
-  resolution: "@radix-ui/react-roving-focus@npm:1.0.4"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/primitive": 1.0.1
-    "@radix-ui/react-collection": 1.0.3
-    "@radix-ui/react-compose-refs": 1.0.1
-    "@radix-ui/react-context": 1.0.1
-    "@radix-ui/react-direction": 1.0.1
-    "@radix-ui/react-id": 1.0.1
-    "@radix-ui/react-primitive": 1.0.3
-    "@radix-ui/react-use-callback-ref": 1.0.1
-    "@radix-ui/react-use-controllable-state": 1.0.1
-  peerDependencies:
-    "@types/react": "*"
-    "@types/react-dom": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8 || ^17.0 || ^18.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-    "@types/react-dom":
-      optional: true
-  checksum: 61e3ddfd1647e64fba855434ff41e8e7ba707244fe8841f78c450fbdce525383b64259279475615d030dbf1625cbffd8eeebee72d91bf6978794f5dbcf887fc0
-  languageName: node
-  linkType: hard
-
-"@radix-ui/react-select@npm:^1.2.2":
-  version: 1.2.2
-  resolution: "@radix-ui/react-select@npm:1.2.2"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/number": 1.0.1
-    "@radix-ui/primitive": 1.0.1
-    "@radix-ui/react-collection": 1.0.3
-    "@radix-ui/react-compose-refs": 1.0.1
-    "@radix-ui/react-context": 1.0.1
-    "@radix-ui/react-direction": 1.0.1
-    "@radix-ui/react-dismissable-layer": 1.0.4
-    "@radix-ui/react-focus-guards": 1.0.1
-    "@radix-ui/react-focus-scope": 1.0.3
-    "@radix-ui/react-id": 1.0.1
-    "@radix-ui/react-popper": 1.1.2
-    "@radix-ui/react-portal": 1.0.3
-    "@radix-ui/react-primitive": 1.0.3
-    "@radix-ui/react-slot": 1.0.2
-    "@radix-ui/react-use-callback-ref": 1.0.1
-    "@radix-ui/react-use-controllable-state": 1.0.1
-    "@radix-ui/react-use-layout-effect": 1.0.1
-    "@radix-ui/react-use-previous": 1.0.1
-    "@radix-ui/react-visually-hidden": 1.0.3
-    aria-hidden: ^1.1.1
-    react-remove-scroll: 2.5.5
-  peerDependencies:
-    "@types/react": "*"
-    "@types/react-dom": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8 || ^17.0 || ^18.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-    "@types/react-dom":
-      optional: true
-  checksum: 888fffa703a8f79b45c01d5f03ad9aae66250ddfff827bbba4f222c4d0720aa2f01a3e4b6bd80acabaf5e2fa7ad79de9e9dfd14831f7f4c24337d4d8dfb58ccc
-  languageName: node
-  linkType: hard
-
-"@radix-ui/react-separator@npm:1.0.3":
-  version: 1.0.3
-  resolution: "@radix-ui/react-separator@npm:1.0.3"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/react-primitive": 1.0.3
-  peerDependencies:
-    "@types/react": "*"
-    "@types/react-dom": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8 || ^17.0 || ^18.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-    "@types/react-dom":
-      optional: true
-  checksum: 87bcde47343f2bc4439a0dc34381f557905d9b3c1e8c5a0d32ceea62a8ef84f3abf671c5cb29309fc87759ad41d39af619ba546cf54109d64c8746e3ca683de3
-  languageName: node
-  linkType: hard
-
-"@radix-ui/react-slot@npm:1.0.2":
+"@radix-ui/react-slot@npm:^1.0.2":
   version: 1.0.2
   resolution: "@radix-ui/react-slot@npm:1.0.2"
   dependencies:
@@ -5452,218 +5089,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-toggle-group@npm:1.0.4":
-  version: 1.0.4
-  resolution: "@radix-ui/react-toggle-group@npm:1.0.4"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/primitive": 1.0.1
-    "@radix-ui/react-context": 1.0.1
-    "@radix-ui/react-direction": 1.0.1
-    "@radix-ui/react-primitive": 1.0.3
-    "@radix-ui/react-roving-focus": 1.0.4
-    "@radix-ui/react-toggle": 1.0.3
-    "@radix-ui/react-use-controllable-state": 1.0.1
-  peerDependencies:
-    "@types/react": "*"
-    "@types/react-dom": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8 || ^17.0 || ^18.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-    "@types/react-dom":
-      optional: true
-  checksum: 4f4761965022759ac0950ac026029b64049e1f18ef07a01ddde788b7606efcb262c9ae3a418de0c0756bf7285182ed0d268502c6f17ba86d2ff27eee5507bbf7
-  languageName: node
-  linkType: hard
-
-"@radix-ui/react-toggle@npm:1.0.3":
-  version: 1.0.3
-  resolution: "@radix-ui/react-toggle@npm:1.0.3"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/primitive": 1.0.1
-    "@radix-ui/react-primitive": 1.0.3
-    "@radix-ui/react-use-controllable-state": 1.0.1
-  peerDependencies:
-    "@types/react": "*"
-    "@types/react-dom": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8 || ^17.0 || ^18.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-    "@types/react-dom":
-      optional: true
-  checksum: 9b487dad213ea7e70b0aa205e7c6f790a6f2bf394c39912e22dbe003403fd0d24a41c2efd31695fc31ab7bac286f28253dbb2fc5202cacd572ebf909f1fdc86c
-  languageName: node
-  linkType: hard
-
-"@radix-ui/react-toolbar@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "@radix-ui/react-toolbar@npm:1.0.4"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/primitive": 1.0.1
-    "@radix-ui/react-context": 1.0.1
-    "@radix-ui/react-direction": 1.0.1
-    "@radix-ui/react-primitive": 1.0.3
-    "@radix-ui/react-roving-focus": 1.0.4
-    "@radix-ui/react-separator": 1.0.3
-    "@radix-ui/react-toggle-group": 1.0.4
-  peerDependencies:
-    "@types/react": "*"
-    "@types/react-dom": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8 || ^17.0 || ^18.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-    "@types/react-dom":
-      optional: true
-  checksum: 3ed7ebe22ef2e8369e08bb59776671a7b8c413628249c338b8db86b4b9ac40127b4201d5bd4a9c23ea1fd21464769b4fa427d3ebcda3a7fcdbd45b256b5a753a
-  languageName: node
-  linkType: hard
-
-"@radix-ui/react-use-callback-ref@npm:1.0.1":
-  version: 1.0.1
-  resolution: "@radix-ui/react-use-callback-ref@npm:1.0.1"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-  peerDependencies:
-    "@types/react": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: 331b432be1edc960ca148637ae6087220873ee828ceb13bd155926ef8f49e862812de5b379129f6aaefcd11be53715f3237e6caa9a33d9c0abfff43f3ba58938
-  languageName: node
-  linkType: hard
-
-"@radix-ui/react-use-controllable-state@npm:1.0.1":
-  version: 1.0.1
-  resolution: "@radix-ui/react-use-controllable-state@npm:1.0.1"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/react-use-callback-ref": 1.0.1
-  peerDependencies:
-    "@types/react": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: 29b069dbf09e48bca321af6272574ad0fc7283174e7d092731a10663fe00c0e6b4bde5e1b5ea67725fe48dcbe8026e7ff0d69d42891c62cbb9ca408498171fbe
-  languageName: node
-  linkType: hard
-
-"@radix-ui/react-use-escape-keydown@npm:1.0.3":
-  version: 1.0.3
-  resolution: "@radix-ui/react-use-escape-keydown@npm:1.0.3"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/react-use-callback-ref": 1.0.1
-  peerDependencies:
-    "@types/react": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: 3c94c78902dcb40b60083ee2184614f45c95a189178f52d89323b467bd04bcf5fdb1bc4d43debecd7f0b572c3843c7e04edbcb56f40a4b4b43936fb2770fb8ad
-  languageName: node
-  linkType: hard
-
-"@radix-ui/react-use-layout-effect@npm:1.0.1":
-  version: 1.0.1
-  resolution: "@radix-ui/react-use-layout-effect@npm:1.0.1"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-  peerDependencies:
-    "@types/react": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: 13cd0c38395c5838bc9a18238020d3bcf67fb340039e6d1cbf438be1b91d64cf6900b78121f3dc9219faeb40dcc7b523ce0f17e4a41631655690e5a30a40886a
-  languageName: node
-  linkType: hard
-
-"@radix-ui/react-use-previous@npm:1.0.1":
-  version: 1.0.1
-  resolution: "@radix-ui/react-use-previous@npm:1.0.1"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-  peerDependencies:
-    "@types/react": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: f5fbc602108668484a4ed506b7842482222d1d03094362e26abb7fdd593eee8794fc47d85b3524fb9d00884801c89a6eefd0bed0971eba1ec189c637b6afd398
-  languageName: node
-  linkType: hard
-
-"@radix-ui/react-use-rect@npm:1.0.1":
-  version: 1.0.1
-  resolution: "@radix-ui/react-use-rect@npm:1.0.1"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/rect": 1.0.1
-  peerDependencies:
-    "@types/react": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: 94c5ab31dfd3678c0cb77a30025e82b3a287577c1a8674b0d703a36d27434bc9c59790e0bebf57ed153f0b8e0d8c3b9675fc9787b9eac525a09abcda8fa9e7eb
-  languageName: node
-  linkType: hard
-
-"@radix-ui/react-use-size@npm:1.0.1":
-  version: 1.0.1
-  resolution: "@radix-ui/react-use-size@npm:1.0.1"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/react-use-layout-effect": 1.0.1
-  peerDependencies:
-    "@types/react": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: b109a4b3781781c4dc641a1173f0a6fcb0b0f7b2d7cdba5848a46070c9fb4e518909a46c20a3c2efbc78737c64859c59ead837f2940e8c8394d1c503ef58773b
-  languageName: node
-  linkType: hard
-
-"@radix-ui/react-visually-hidden@npm:1.0.3":
-  version: 1.0.3
-  resolution: "@radix-ui/react-visually-hidden@npm:1.0.3"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/react-primitive": 1.0.3
-  peerDependencies:
-    "@types/react": "*"
-    "@types/react-dom": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8 || ^17.0 || ^18.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-    "@types/react-dom":
-      optional: true
-  checksum: 0cbc12c2156b3fa0e40090cafd8525ce84c16a6b5a038a8e8fc7cbb16ed6da9ab369593962c57a18c41a16ec8713e0195c68ea34072ef1ca254ed4d4c0770bb4
-  languageName: node
-  linkType: hard
-
-"@radix-ui/rect@npm:1.0.1":
-  version: 1.0.1
-  resolution: "@radix-ui/rect@npm:1.0.1"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-  checksum: 4c5159661340acc31b11e1f2ebd87a1521d39bfa287544dd2cd75b399539a4b625d38a1501c90ceae21fcca18ed164b0c3735817ff140ae334098192c110e571
-  languageName: node
-  linkType: hard
-
 "@rollup/pluginutils@npm:^4.1.1, @rollup/pluginutils@npm:^4.2.1":
   version: 4.2.1
   resolution: "@rollup/pluginutils@npm:4.2.1"
@@ -6838,8 +6263,7 @@ __metadata:
   dependencies:
     "@chromaui/addon-visual-tests": ^0.0.77
     "@popperjs/core": ^2.6.0
-    "@radix-ui/react-select": ^1.2.2
-    "@radix-ui/react-toolbar": ^1.0.4
+    "@radix-ui/react-slot": ^1.0.2
     "@storybook/client-logger": "workspace:*"
     "@storybook/csf": ^0.1.0
     "@storybook/global": ^5.0.0
@@ -11256,15 +10680,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"aria-hidden@npm:^1.1.1":
-  version: 1.2.3
-  resolution: "aria-hidden@npm:1.2.3"
-  dependencies:
-    tslib: ^2.0.0
-  checksum: 46b07b7273167ad3fc2625f1ecbb43f8e6f73115c66785cbb5dcf1e2508133a43b6419d610c39676ceaeb563239efbd8974d5c0187695db8b3e8c3e11f549c2d
-  languageName: node
-  linkType: hard
-
 "aria-query@npm:5.1.3":
   version: 5.1.3
   resolution: "aria-query@npm:5.1.3"
@@ -14854,13 +14269,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"detect-node-es@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "detect-node-es@npm:1.1.0"
-  checksum: e562f00de23f10c27d7119e1af0e7388407eb4b06596a25f6d79a360094a109ff285de317f02b090faae093d314cf6e73ac3214f8a5bb3a0def5bece94557fbe
-  languageName: node
-  linkType: hard
-
 "detect-node@npm:^2.0.4":
   version: 2.1.0
   resolution: "detect-node@npm:2.1.0"
@@ -17878,13 +17286,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-nonce@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "get-nonce@npm:1.0.1"
-  checksum: 2d7df55279060bf0568549e1ffc9b84bc32a32b7541675ca092dce56317cdd1a59a98dcc4072c9f6a980779440139a3221d7486f52c488e69dc0fd27b1efb162
-  languageName: node
-  linkType: hard
-
 "get-npm-tarball-url@npm:^2.0.3":
   version: 2.0.3
   resolution: "get-npm-tarball-url@npm:2.0.3"
@@ -27225,41 +26626,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-remove-scroll-bar@npm:^2.3.3":
-  version: 2.3.4
-  resolution: "react-remove-scroll-bar@npm:2.3.4"
-  dependencies:
-    react-style-singleton: ^2.2.1
-    tslib: ^2.0.0
-  peerDependencies:
-    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: 2262750dc1022c56d2c79e8d865c00045881c57bcaca74810ae8adac35cfdf723ff7d6b3b0e95c85eb9a0cff90bb4b1e0af801bd703ce8c0a2e35ab14ff1babb
-  languageName: node
-  linkType: hard
-
-"react-remove-scroll@npm:2.5.5":
-  version: 2.5.5
-  resolution: "react-remove-scroll@npm:2.5.5"
-  dependencies:
-    react-remove-scroll-bar: ^2.3.3
-    react-style-singleton: ^2.2.1
-    tslib: ^2.1.0
-    use-callback-ref: ^1.3.0
-    use-sidecar: ^1.1.2
-  peerDependencies:
-    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: 4952657e6a7b9d661d4ad4dfcef81b9c7fa493e35164abff99c35c0b27b3d172ef7ad70c09416dc44dd14ff2e6b38a5ec7da27e27e90a15cbad36b8fd2fd8054
-  languageName: node
-  linkType: hard
-
 "react-resize-detector@npm:^7.1.2":
   version: 7.1.2
   resolution: "react-resize-detector@npm:7.1.2"
@@ -27296,23 +26662,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-style-singleton@npm:^2.2.1":
-  version: 2.2.1
-  resolution: "react-style-singleton@npm:2.2.1"
-  dependencies:
-    get-nonce: ^1.0.0
-    invariant: ^2.2.4
-    tslib: ^2.0.0
-  peerDependencies:
-    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: 6d66f3bdb65e1ec79089f80314da97c9a005087a04ee034255a5de129a4c0d9fd0bf99fa7bf642781ac2dc745ca687aae3de082bd8afdd0d117bc953241e15ad
-  languageName: node
-  linkType: hard
-
 "react-syntax-highlighter@npm:^15.4.5, react-syntax-highlighter@npm:^15.5.0":
   version: 15.5.0
   resolution: "react-syntax-highlighter@npm:15.5.0"
@@ -31628,21 +30977,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"use-callback-ref@npm:^1.3.0":
-  version: 1.3.0
-  resolution: "use-callback-ref@npm:1.3.0"
-  dependencies:
-    tslib: ^2.0.0
-  peerDependencies:
-    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: 8a0867ffd441f358c66d79567970a745cc78ac2f98840a81c1fa749a525e8716116c645497d886a815e1dcf40ad81a107ebd6a7d15fd9ab5925c44a994a1d89a
-  languageName: node
-  linkType: hard
-
 "use-composed-ref@npm:^1.3.0":
   version: 1.3.0
   resolution: "use-composed-ref@npm:1.3.0"
@@ -31690,22 +31024,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"use-sidecar@npm:^1.1.2":
-  version: 1.1.2
-  resolution: "use-sidecar@npm:1.1.2"
-  dependencies:
-    detect-node-es: ^1.1.0
-    tslib: ^2.0.0
-  peerDependencies:
-    "@types/react": ^16.9.0 || ^17.0.0 || ^18.0.0
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: 89f0018fd9aee1fc17c85ac18c4bf8944d460d453d0d0e04ddbc8eaddf3fa591e9c74a1f8a438a1bff368a7a2417fab380bdb3df899d2194c4375b0982736de0
-  languageName: node
-  linkType: hard
-
 "use@npm:^3.1.0":
   version: 3.1.1
   resolution: "use@npm:3.1.1"