diff --git a/src/stories/buttons/button/index.stories.tsx b/src/stories/buttons/button/index.stories.tsx
index cb42cfb2..a16f6fe2 100644
--- a/src/stories/buttons/button/index.stories.tsx
+++ b/src/stories/buttons/button/index.stories.tsx
@@ -1,102 +1,111 @@
-import type { Meta, StoryFn } from "@storybook/react";
-import { Grid } from "@zendeskgarden/react-grid";
-import { Button } from ".";
-import { ReactComponent as ChevronIcon } from "../../../assets/icons/chevron-down-stroke.svg";
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
 import { ReactComponent as LeafIcon } from "../../../assets/icons/leaf-stroke.svg";
-import { Col, MD, Row, sizes, variants } from "../utils";
-import { ButtonArgs } from "./_types";
-
-const SizeTemplate: StoryFn<ButtonArgs> = (args) => (
-  <Row>
-    {sizes.map((size, i) => (
-      <Col size={3} key={i}>
-        <Button {...args} size={size}>
-          {size}
-        </Button>
-      </Col>
-    ))}
-  </Row>
-);
-
-const Template: StoryFn<ButtonArgs> = (args) => {
-  return (
-    <Grid>
-      {variants.map((variant, i) => (
-        <>
-          <MD>{Object.keys(variant)[0]}</MD>
-          <SizeTemplate {...args} {...variant} key={i} />
-        </>
-      ))}
-    </Grid>
-  );
+
+import { Button } from ".";
+
+type Args = React.ComponentProps<typeof Button> & {
+  withStartIcon?: boolean;
+  withEndIcon?: boolean;
 };
 
-const TemplateIcon: StoryFn<ButtonArgs> = (args) => {
-  return (
-    <Grid>
-      <Row>
-        {sizes.map((size, j) => (
-          <Col size={3} key={j}>
-            <Button {...args} size={size}>
-              <Button.StartIcon>
-                <LeafIcon />
-              </Button.StartIcon>
-              {size}
-            </Button>
-          </Col>
-        ))}
-      </Row>
-      <Row>
-        {sizes.map((size, k) => (
-          <Col size={3} key={k}>
-            <Button {...args} size={size}>
-              {size}
-              <Button.EndIcon>
-                <ChevronIcon />
-              </Button.EndIcon>
-            </Button>
-          </Col>
-        ))}
-      </Row>
-    </Grid>
-  );
+const meta = {
+  title: "Atoms/Buttons/Button",
+  component: Button,
+
+  args: {
+    children: "Button",
+    onClick: fn(),
+  },
+  render: ({ withStartIcon, withEndIcon, ...args }) => {
+    return (
+      <Button {...args}>
+        {withStartIcon && (
+          <Button.StartIcon>
+            <LeafIcon />
+          </Button.StartIcon>
+        )}
+        {args.children}
+        {withEndIcon && (
+          <Button.EndIcon>
+            <LeafIcon />
+          </Button.EndIcon>
+        )}
+      </Button>
+    );
+  },
+} satisfies Meta<Args>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
 };
 
-export const Default = Template.bind({});
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+export const Small: Story = {
+  args: {
+    size: "small",
+  },
+};
 
-export const Basic = Template.bind({});
-Basic.args = {
-  isBasic: true,
+export const Large: Story = {
+  args: {
+    size: "large",
+  },
 };
 
-export const Primary = Template.bind({});
-Primary.args = {
-  isPrimary: true,
+export const Primary: Story = {
+  args: {
+    isPrimary: true,
+  },
 };
 
-export const Link = Template.bind({});
-Link.args = {
-  isLink: true,
+export const DangerPrimary: Story = {
+  args: {
+    isPrimary: true,
+    isDanger: true,
+  },
 };
 
-export const WithIcon = TemplateIcon.bind({});
+export const AccentPrimary: Story = {
+  args: {
+    isPrimary: true,
+    isAccent: true,
+  },
+};
 
-export default {
-  title: "Atoms/Buttons/Button",
-  component: Button,
-  subcomponents: {
-    "Button.StartIcon": Button.StartIcon,
-    "Button.EndIcon": Button.EndIcon,
+export const Danger: Story = {
+  args: {
+    isDanger: true,
+  },
+};
+
+export const Accent: Story = {
+  args: {
+    isAccent: true,
   },
-  argTypes: {
-    onClick: {
-      table: {
-        category: "Events",
-      },
-    },
+};
+
+export const Link: Story = {
+  args: {
+    isLink: true,
+  },
+};
+
+export const WithStartIcon: Story = {
+  args: {
+    withStartIcon: true,
   },
-  parameters: {
-    // Sets a delay for the component's stories
-    chromatic: { delay: 300 },
+};
+
+export const WithEndIcon: Story = {
+  args: {
+    withEndIcon: true,
   },
-} as Meta<typeof Button>;
+};
diff --git a/src/stories/notifications/global-alert/index.tsx b/src/stories/notifications/global-alert/index.tsx
index fd9dd4e3..57be90c0 100644
--- a/src/stories/notifications/global-alert/index.tsx
+++ b/src/stories/notifications/global-alert/index.tsx
@@ -1,17 +1,17 @@
 import {
+  IGlobalAlertProps,
   GlobalAlert as ZendeskGlobalAlert,
-  IGlobalAlertProps
 } from "@zendeskgarden/react-notifications";
+import { ReactComponent as PrimaryIcon } from "@zendeskgarden/svg-icons/src/16/gear-stroke.svg";
+import { ReactComponent as AccentIcon } from "@zendeskgarden/svg-icons/src/16/lightbulb-stroke.svg";
 import { forwardRef, ReactNode } from "react";
 import styled from "styled-components";
-import { getColor } from "../../theme/utils";
-import { ButtonArgs } from "../../buttons/button/_types";
 import { Button } from "../../buttons/button";
-import { ReactComponent as AccentIcon } from "@zendeskgarden/svg-icons/src/16/lightbulb-stroke.svg";
-import { ReactComponent as PrimaryIcon } from "@zendeskgarden/svg-icons/src/16/gear-stroke.svg";
+import { ButtonArgs } from "../../buttons/button/_types";
+import { getColor } from "../../theme/utils";
 
-export interface GlobalAlertProps extends Omit<IGlobalAlertProps, 'type'> {
-  type: IGlobalAlertProps['type'] | "accent" | "primary";
+export interface GlobalAlertProps extends Omit<IGlobalAlertProps, "type"> {
+  type: IGlobalAlertProps["type"] | "accent" | "primary";
   message?: ReactNode;
   dismissable?: boolean;
   onClose?: () => void;
@@ -22,128 +22,145 @@ export interface GlobalAlertProps extends Omit<IGlobalAlertProps, 'type'> {
   };
 }
 
-const StyledGlobalAlert = styled(ZendeskGlobalAlert) <GlobalAlertProps>`
-    
-    // general
-    align-items: center;
-    [data-garden-id="notifications.global-alert.icon"] {
-      margin-top: -2px;
+const StyledGlobalAlert = styled(ZendeskGlobalAlert)<GlobalAlertProps>`
+  // general
+  align-items: center;
+  [data-garden-id="notifications.global-alert.icon"] {
+    margin-top: -2px;
+  }
+  .global-alert-icon {
+    flex-shrink: 0;
+    margin-top: -2px;
+    margin-right: 8px;
+    width: 16px;
+    height: 16px;
+  }
+  .global-alert-cta {
+    flex-shrink: 0;
+  }
+
+  // looks like the following rules get overwritten by garden if we use props.type directly instead of alerttype
+  // or even in file component.ts of the theme
+
+  // Primary
+  &[alerttype="primary"] {
+    background-color: ${({ theme }) => getColor(theme.colors.primaryHue, 100)};
+    color: ${({ theme }) => getColor(theme.colors.primaryHue, 700)};
+    box-shadow: 0 1px 1px
+      ${({ theme }) => getColor(theme.colors.primaryHue, 300)};
+
+    [data-garden-id="notifications.global-alert.content"] {
+      color: ${({ theme }) => getColor(theme.colors.primaryHue, 700)};
     }
-    .global-alert-icon {
-      flex-shrink: 0;
-      margin-top: -2px;
-      margin-right: 8px;
-      width: 16px;
-      height: 16px;
+    [data-garden-id="notifications.global-alert.title"] {
+      color: ${({ theme }) => getColor(theme.colors.primaryHue, 800)};
     }
-    .global-alert-cta {
-      flex-shrink: 0;
+    [data-garden-id="buttons.anchor"] {
+      color: ${({ theme }) => getColor(theme.colors.primaryHue, 600)};
     }
-  
-  
-    // looks like the following rules get overwritten by garden if we use props.type directly instead of alerttype
-    // or even in file component.ts of the theme
-    
-    // Primary
-    &[alerttype="primary"] {
-      background-color: ${({ theme }) => getColor(theme.colors.primaryHue, 100)};
+    .global-alert-icon {
       color: ${({ theme }) => getColor(theme.colors.primaryHue, 700)};
-      box-shadow: 0 1px 1px ${({ theme }) => getColor(theme.colors.primaryHue, 300)};
-      
-      [data-garden-id="notifications.global-alert.content"] {
-        color: ${({ theme }) => getColor(theme.colors.primaryHue, 700)};
-      }
-      [data-garden-id="notifications.global-alert.title"] {
-        color: ${({ theme }) => getColor(theme.colors.primaryHue, 800)};
-      }
-      [data-garden-id="buttons.anchor"] {
-        color: ${({ theme }) => getColor(theme.colors.primaryHue, 600)};
-      }
-      .global-alert-icon {
-        color: ${({ theme }) => getColor(theme.colors.primaryHue, 700)};
-      }
     }
+  }
 
-    // Accent  
-    &[alerttype="accent"] {
-      background-color: ${({ theme }) => theme.palette.blue[100]};
-      color: ${({ theme }) => getColor(theme.colors.primaryHue, 700)};
-      box-shadow: 0 1px 1px ${({ theme }) => getColor(theme.colors.accentHue, 600)};
-      
-      [data-garden-id="notifications.global-alert.content"] {
-        color: ${({ theme }) => getColor(theme.colors.accentHue, 700)};
-      }
-      [data-garden-id="notifications.global-alert.title"] {
-        color: ${({ theme }) => getColor(theme.colors.accentHue, 800)};
-      }
-      [data-garden-id="buttons.anchor"] {
-        color: ${({ theme }) => getColor(theme.colors.accentHue, 700)};
-      }
-      .global-alert-icon {
-        color: ${({ theme }) => getColor(theme.colors.accentHue, 700)};
-      }
+  // Accent
+  &[alerttype="accent"] {
+    background-color: ${({ theme }) => theme.palette.blue[100]};
+    color: ${({ theme }) => getColor(theme.colors.primaryHue, 700)};
+    box-shadow: 0 1px 1px
+      ${({ theme }) => getColor(theme.colors.accentHue, 600)};
+
+    [data-garden-id="notifications.global-alert.content"] {
+      color: ${({ theme }) => getColor(theme.colors.accentHue, 700)};
     }
-    
-    // Info
-    &[alerttype="info"] {
-      background-color: ${({ theme }) => getColor(theme.colors.infoHue, 100)};
-      color: ${({ theme }) => getColor(theme.colors.primaryHue, 700)};
-      
-      [data-garden-id="notifications.global-alert.content"] {
-        color: ${({ theme }) => getColor(theme.colors.infoHue, 700)};
-      }
-      [data-garden-id="notifications.global-alert.title"] {
-        color: ${({ theme }) => getColor(theme.colors.infoHue, 800)};
-      }
-      [data-garden-id="buttons.anchor"] {
-        color: ${({ theme }) => getColor(theme.colors.infoHue, 700)};
-      }
-      [data-garden-id="notifications.global-alert.icon"] {
-        color: ${({ theme }) => getColor(theme.colors.infoHue, 700)};
-      }
+    [data-garden-id="notifications.global-alert.title"] {
+      color: ${({ theme }) => getColor(theme.colors.accentHue, 800)};
+    }
+    [data-garden-id="buttons.anchor"] {
+      color: ${({ theme }) => getColor(theme.colors.accentHue, 700)};
+    }
+    .global-alert-icon {
+      color: ${({ theme }) => getColor(theme.colors.accentHue, 700)};
     }
+  }
 
-    // Error
-    &[alerttype="error"] {
-      .global-alert-cta {
-        background-color: ${({ theme }) => getColor(theme.colors.dangerHue, 800)};
-      }
+  // Info
+  &[alerttype="info"] {
+    background-color: ${({ theme }) => getColor(theme.colors.infoHue, 100)};
+    color: ${({ theme }) => getColor(theme.colors.primaryHue, 700)};
+
+    [data-garden-id="notifications.global-alert.content"] {
+      color: ${({ theme }) => getColor(theme.colors.infoHue, 700)};
+    }
+    [data-garden-id="notifications.global-alert.title"] {
+      color: ${({ theme }) => getColor(theme.colors.infoHue, 800)};
     }
+    [data-garden-id="buttons.anchor"] {
+      color: ${({ theme }) => getColor(theme.colors.infoHue, 700)};
+    }
+    [data-garden-id="notifications.global-alert.icon"] {
+      color: ${({ theme }) => getColor(theme.colors.infoHue, 700)};
+    }
+  }
+
+  // Error
+  &[alerttype="error"] {
+    .global-alert-cta {
+      background-color: ${({ theme }) => getColor(theme.colors.dangerHue, 800)};
+    }
+  }
 
-    // Warning
-    &[alerttype="warning"] {
-      background-color: ${({ theme }) => getColor(theme.colors.warningHue, 300)};
-      box-shadow: 0 1px 1px ${({ theme }) => getColor(theme.colors.warningHue, 600)};
-      .global-alert-cta {
-        background-color: ${({ theme }) => getColor(theme.colors.warningHue, 800)};
-      }
+  // Warning
+  &[alerttype="warning"] {
+    background-color: ${({ theme }) => getColor(theme.colors.warningHue, 300)};
+    box-shadow: 0 1px 1px
+      ${({ theme }) => getColor(theme.colors.warningHue, 600)};
+    .global-alert-cta {
+      background-color: ${({ theme }) =>
+        getColor(theme.colors.warningHue, 800)};
     }
+  }
 
-    // Success
-    &[alerttype="success"] {
-      background-color: ${({ theme }) => getColor(theme.colors.successHue, 700)};
-      box-shadow: 0 1px 1px ${({ theme }) => getColor(theme.colors.successHue, 700)};
-      color: ${({ theme }) => getColor(theme.colors.successHue, 50)};
-      .global-alert-cta {
-        background-color: ${({ theme }) => getColor(theme.colors.successHue, 800)};
-      }
+  // Success
+  &[alerttype="success"] {
+    background-color: ${({ theme }) => getColor(theme.colors.successHue, 700)};
+    box-shadow: 0 1px 1px
+      ${({ theme }) => getColor(theme.colors.successHue, 700)};
+    color: ${({ theme }) => getColor(theme.colors.successHue, 50)};
+    .global-alert-cta {
+      background-color: ${({ theme }) =>
+        getColor(theme.colors.successHue, 800)};
     }
+  }
 `;
 
-const CustomButton = ({ isPill = true, isPrimary = true, ...props }: ButtonArgs) => (
-  <Button isPill={isPill} isPrimary={isPrimary} size="small" {...props} />
+export const GlobalAlert = forwardRef<HTMLDivElement, GlobalAlertProps>(
+  ({ type, onClose, dismissable, cta, title, message, ...props }, ref) => (
+    <StyledGlobalAlert ref={ref} type={type} {...props}>
+      {type === "accent" && <AccentIcon className="global-alert-icon" />}
+      {type === "primary" && <PrimaryIcon className="global-alert-icon" />}
+      <StyledGlobalAlert.Content>
+        {title && <StyledGlobalAlert.Title>{title}</StyledGlobalAlert.Title>}
+        {message}
+      </StyledGlobalAlert.Content>
+      {cta && (
+        <Button
+          {...cta.buttonProps}
+          className="global-alert-cta"
+          isPill
+          isPrimary
+          size="small"
+          isAccent={type === "accent"}
+        >
+          {cta.label}
+        </Button>
+      )}
+      {dismissable && (
+        <StyledGlobalAlert.Close
+          aria-label="Close Global Alert"
+          onClick={onClose}
+        />
+      )}
+    </StyledGlobalAlert>
+  ),
 );
-
-export const GlobalAlert = forwardRef<HTMLDivElement, GlobalAlertProps>(({ type, onClose, dismissable, cta, title, message, ...props }, ref) => (
-  <StyledGlobalAlert ref={ref} type={type} {...props}>
-    {type === "accent" && <AccentIcon className="global-alert-icon"/>}
-    {type === "primary" && <PrimaryIcon className="global-alert-icon" />}
-    <StyledGlobalAlert.Content>
-      {title && <StyledGlobalAlert.Title>{title}</StyledGlobalAlert.Title>}
-      {message}
-    </StyledGlobalAlert.Content>
-    {cta && <CustomButton onClick={cta.onClick} className="global-alert-cta" isAccent={type==='accent'} {...cta.buttonProps}>{cta.label}</CustomButton>}
-    {dismissable && <StyledGlobalAlert.Close aria-label="Close Global Alert" onClick={onClose} />}
-  </StyledGlobalAlert>
-));
-