@dxos/react-ui 0.8.4-main.d05673bc65 → 0.8.4-main.d9fc60f731

package/src/components/Dialog/Dialog.stories.tsx

@@ -5,15 +5,15 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 
 import { withTheme } from '../../testing';
 import { Button } from '../Button';
 import { Input } from '../Input';
-
+import { ScrollArea } from '../ScrollArea';
 import { Dialog, type DialogContentProps } from './Dialog';
 
-type StoryProps = Pick<DialogContentProps, 'size'> &
+type DefaultStoryProps = Pick<DialogContentProps, 'size'> &
   Partial<{
     title: string;
     description: string;
@@ -22,7 +22,11 @@ type StoryProps = Pick<DialogContentProps, 'size'> &
     blockAlign: 'start' | 'center';
   }>;
 
-const DefaultStory = ({ size, title, description, openTrigger, closeTrigger, blockAlign }: StoryProps) => {
+/**
+ * Standard Dialog with non-scrolling content in Dialog.Body.
+ * Dialog.Body propagates the Column grid via subgrid. Children auto-center via --dx-col.
+ */
+const DefaultStory = ({ size, title, description, openTrigger, closeTrigger, blockAlign }: DefaultStoryProps) => {
   return (
     <Dialog.Root defaultOpen modal>
       <Dialog.Trigger asChild>
@@ -34,7 +38,7 @@ const DefaultStory = ({ size, title, description, openTrigger, closeTrigger, blo
             <Dialog.Title>{title}</Dialog.Title>
             {closeTrigger && (
               <Dialog.Close asChild>
-                <Dialog.CloseIconButton />
+                <Dialog.ActionIconButton action='close' />
               </Dialog.Close>
             )}
           </Dialog.Header>
@@ -56,6 +60,45 @@ const DefaultStory = ({ size, title, description, openTrigger, closeTrigger, blo
   );
 };
 
+/**
+ * Dialog with a ScrollArea child inside Dialog.Body.
+ * The ScrollArea breaks out of Body's gutter padding via `--gutter`
+ * and applies its own asymmetric padding (accounting for scrollbar width).
+ */
+const ScrollingStory = ({ size, title, description, openTrigger, closeTrigger, blockAlign }: DefaultStoryProps) => {
+  return (
+    <Dialog.Root defaultOpen modal>
+      <Dialog.Trigger asChild>
+        <Button>{openTrigger}</Button>
+      </Dialog.Trigger>
+      <Dialog.Overlay blockAlign={blockAlign}>
+        <Dialog.Content size={size}>
+          <Dialog.Header>
+            <Dialog.Title>{title}</Dialog.Title>
+            {closeTrigger && (
+              <Dialog.Close asChild>
+                <Dialog.ActionIconButton action='close' />
+              </Dialog.Close>
+            )}
+          </Dialog.Header>
+          <Dialog.Body>
+            <ScrollArea.Root orientation='vertical' padding thin>
+              <ScrollArea.Viewport>
+                <Dialog.Description>{description}</Dialog.Description>
+              </ScrollArea.Viewport>
+            </ScrollArea.Root>
+          </Dialog.Body>
+          <Dialog.ActionBar>
+            <Dialog.Close asChild>
+              <Button variant='primary'>{closeTrigger}</Button>
+            </Dialog.Close>
+          </Dialog.ActionBar>
+        </Dialog.Content>
+      </Dialog.Overlay>
+    </Dialog.Root>
+  );
+};
+
 const meta = {
   title: 'ui/react-ui-core/components/Dialog',
   component: Dialog as any,
@@ -70,7 +113,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     title: 'Dialog title',
-    description: faker.lorem.paragraph(1),
+    description: random.lorem.paragraph(1),
     openTrigger: 'Open',
     closeTrigger: 'Close',
     blockAlign: 'start',
@@ -80,7 +123,7 @@ export const Default: Story = {
 export const Small: Story = {
   args: {
     title: 'Dialog title',
-    description: faker.lorem.paragraph(1),
+    description: random.lorem.paragraph(1),
     openTrigger: 'Open',
     closeTrigger: 'Close',
     blockAlign: 'center',
@@ -91,7 +134,7 @@ export const Small: Story = {
 export const Medium: Story = {
   args: {
     title: 'Dialog title',
-    description: faker.lorem.paragraph(1),
+    description: random.lorem.paragraph(1),
     openTrigger: 'Open',
     closeTrigger: 'Close',
     blockAlign: 'center',
@@ -102,7 +145,7 @@ export const Medium: Story = {
 export const Large: Story = {
   args: {
     title: 'Dialog title',
-    description: faker.lorem.paragraph(2),
+    description: random.lorem.paragraph(2),
     openTrigger: 'Open Dialog',
     closeTrigger: 'Close',
     blockAlign: 'center',
@@ -113,10 +156,22 @@ export const Large: Story = {
 export const ExtraLarge: Story = {
   args: {
     title: 'Dialog title',
-    description: faker.lorem.paragraph(2),
+    description: random.lorem.paragraph(2),
     openTrigger: 'Open Dialog',
     closeTrigger: 'Close',
     blockAlign: 'center',
     size: 'xl',
   },
 };
+
+export const Scrolling: Story = {
+  render: ScrollingStory,
+  args: {
+    title: 'Dialog title',
+    description: random.lorem.paragraph(20),
+    openTrigger: 'Open Dialog',
+    closeTrigger: 'Close',
+    blockAlign: 'center',
+    size: 'md',
+  },
+};

package/src/components/Dialog/Dialog.theme.ts

@@ -0,0 +1,61 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { mx } from '@dxos/ui-theme';
+import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-types';
+
+import { withColumn } from '../Column/withColumn';
+
+export type DialogSize = 'sm' | 'md' | 'lg' | 'xl';
+
+const sizeMap: Record<DialogSize, string> = {
+  sm: 'md:max-w-[24rem]',
+  md: 'md:max-w-[32rem]!',
+  lg: 'md:max-w-[40rem]!',
+  xl: 'md:max-w-[60rem]!',
+};
+
+export type DialogStyleProps = {
+  srOnly?: boolean;
+  inOverlayLayout?: boolean;
+  elevation?: Elevation;
+  size?: DialogSize;
+};
+
+const overlay: ComponentFunction<DialogStyleProps> = (_props, ...etc) => mx('dx-dialog__overlay', ...etc);
+
+const content: ComponentFunction<DialogStyleProps> = ({ inOverlayLayout, size = 'md' }, ...etc) => {
+  return mx(
+    '@container',
+    'dx-dialog__content dx-focus-ring dx-modal-surface py-4',
+    !inOverlayLayout && 'fixed z-50 top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%]',
+    sizeMap[size],
+    ...etc,
+  );
+};
+
+const header: ComponentFunction<DialogStyleProps> = (_props, ...etc) =>
+  mx('dx-dialog__header flex pb-4 items-center justify-between', withColumn.center(), ...etc);
+
+const body: ComponentFunction<DialogStyleProps> = (_props, ...etc) =>
+  mx('dx-dialog__body dx-expander', withColumn.propagate(), ...etc);
+
+const actionBar: ComponentFunction<DialogStyleProps> = (_props, ...etc) =>
+  mx('dx-dialog__actionbar flex items-center pt-4 gap-2', withColumn.center(), ...etc);
+
+const title: ComponentFunction<DialogStyleProps> = ({ srOnly }, ...etc) =>
+  mx('dx-dialog__title', srOnly && 'sr-only', ...etc);
+
+const description: ComponentFunction<DialogStyleProps> = ({ srOnly }, ...etc) =>
+  mx('dx-dialog__description', 'text-description', srOnly && 'sr-only', ...etc);
+
+export const dialogTheme: Theme<DialogStyleProps> = {
+  overlay,
+  content,
+  header,
+  body,
+  actionbar: actionBar,
+  title,
+  description,
+};

package/src/components/Dialog/Dialog.tsx

@@ -3,73 +3,67 @@
 //
 
 import { createContext } from '@radix-ui/react-context';
-import {
-  DialogClose as DialogClosePrimitive,
-  type DialogCloseProps as DialogClosePrimitiveProps,
-  DialogContent as DialogContentPrimitive,
-  DialogDescription as DialogDescriptionPrimitive,
-  type DialogDescriptionProps as DialogDescriptionPrimitiveProps,
-  DialogOverlay as DialogOverlayPrimitive,
-  type DialogOverlayProps as DialogOverlayPrimitiveProps,
-  DialogPortal as DialogPortalPrimitive,
-  type DialogPortalProps as DialogPortalPrimitiveProps,
-  Root as DialogRootPrimitive,
-  type DialogProps as DialogRootPrimitiveProps,
-  DialogTitle as DialogTitlePrimitive,
-  type DialogTitleProps as DialogTitlePrimitiveProps,
-  DialogTrigger as DialogTriggerPrimitive,
-  type DialogTriggerProps as DialogTriggerPrimitiveProps,
-} from '@radix-ui/react-dialog';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Primitive } from '@radix-ui/react-primitive';
+import { Slot } from '@radix-ui/react-slot';
 import React, {
   type ComponentPropsWithRef,
   type ForwardRefExoticComponent,
   type FunctionComponent,
-  type PropsWithChildren,
   forwardRef,
 } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { type DialogSize, osTranslations } from '@dxos/ui-theme';
+import { osTranslations } from '@dxos/ui-theme';
+import { type SlottableProps } from '@dxos/ui-types';
 
 import { useThemeContext } from '../../hooks';
-import { Column } from '../../primitives';
-import { type ThemedClassName } from '../../util';
+import { ElevationProvider } from '../../primitives';
+import { type DialogSize } from '../../theme';
+import { type ThemedClassName, composableProps, slottable } from '../../util';
 import { IconButton } from '../Button';
-import { ElevationProvider } from '../ElevationProvider';
+import { Column } from '../Column';
 
 //
 // Root
 //
 
-type DialogRootProps = DialogRootPrimitiveProps;
+type DialogRootProps = DialogPrimitive.DialogProps;
 
 const DialogRoot: FunctionComponent<DialogRootProps> = (props) => (
   <ElevationProvider elevation='dialog'>
-    <DialogRootPrimitive {...props} />
+    <DialogPrimitive.Root
+      // NOTE: Radix warning unless set to undefined.
+      // https://www.radix-ui.com/primitives/docs/components/dialog#description
+      aria-describedby={undefined}
+      {...props}
+    />
   </ElevationProvider>
 );
 
+DialogRoot.displayName = 'Dialog.Root';
+
 //
 // Trigger
 //
 
-type DialogTriggerProps = DialogTriggerPrimitiveProps;
+type DialogTriggerProps = DialogPrimitive.DialogTriggerProps;
 
-const DialogTrigger: FunctionComponent<DialogTriggerProps> = DialogTriggerPrimitive;
+const DialogTrigger = DialogPrimitive.Trigger;
 
 //
 // Portal
 //
 
-type DialogPortalProps = DialogPortalPrimitiveProps;
+type DialogPortalProps = DialogPrimitive.DialogPortalProps;
 
-const DialogPortal: FunctionComponent<DialogPortalProps> = DialogPortalPrimitive;
+const DialogPortal = DialogPrimitive.Portal;
 
 //
 // Overlay
 //
 
-const DIALOG_OVERLAY_NAME = 'DialogOverlay';
+const DIALOG_OVERLAY_NAME = 'Dialog.Overlay';
 
 type OverlayLayoutContextValue = { inOverlayLayout?: boolean };
 
@@ -78,21 +72,23 @@ const [OverlayLayoutProvider, useOverlayLayoutContext] = createContext<OverlayLa
   {},
 );
 
-type DialogOverlayProps = ThemedClassName<DialogOverlayPrimitiveProps & { blockAlign?: 'center' | 'start' | 'end' }>;
+type DialogOverlayProps = ThemedClassName<
+  DialogPrimitive.DialogOverlayProps & { blockAlign?: 'center' | 'start' | 'end' }
+>;
 
 const DialogOverlay: ForwardRefExoticComponent<DialogOverlayProps> = forwardRef<HTMLDivElement, DialogOverlayProps>(
   ({ classNames, children, blockAlign, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
 
     return (
-      <DialogOverlayPrimitive
+      <DialogPrimitive.Overlay
         {...props}
         data-block-align={blockAlign}
         className={tx('dialog.overlay', {}, classNames)}
         ref={forwardedRef}
       >
         <OverlayLayoutProvider inOverlayLayout>{children}</OverlayLayoutProvider>
-      </DialogOverlayPrimitive>
+      </DialogPrimitive.Overlay>
     );
   },
 );
@@ -103,9 +99,9 @@ DialogOverlay.displayName = DIALOG_OVERLAY_NAME;
 // Content
 //
 
-const DIALOG_CONTENT_NAME = 'DialogContent';
+const DIALOG_CONTENT_NAME = 'Dialog.Content';
 
-type DialogContentProps = ThemedClassName<ComponentPropsWithRef<typeof DialogContentPrimitive>> & {
+type DialogContentProps = ThemedClassName<ComponentPropsWithRef<typeof DialogPrimitive.Content>> & {
   size?: DialogSize;
   inOverlayLayout?: boolean;
 };
@@ -116,16 +112,25 @@ const DialogContent: ForwardRefExoticComponent<DialogContentProps> = forwardRef<
     const { inOverlayLayout } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
 
     return (
-      <DialogContentPrimitive
+      <DialogPrimitive.Content
         {...props}
         // NOTE: Radix warning unless set to undefined.
         // https://www.radix-ui.com/primitives/docs/components/dialog#description
         aria-describedby={undefined}
-        className={tx('dialog.content', { inOverlayLayout: propsInOverlayLayout || inOverlayLayout, size }, classNames)}
+        className={tx(
+          'dialog.content',
+          {
+            size,
+            inOverlayLayout: propsInOverlayLayout || inOverlayLayout,
+          },
+          classNames,
+        )}
         ref={forwardedRef}
       >
-        <Column.Root>{children}</Column.Root>
-      </DialogContentPrimitive>
+        <Column.Root classNames='dx-expander' gutter='sm'>
+          {children}
+        </Column.Root>
+      </DialogPrimitive.Content>
     );
   },
 );
@@ -136,36 +141,50 @@ DialogContent.displayName = DIALOG_CONTENT_NAME;
 // Header
 //
 
-type DialogHeaderProps = ThemedClassName<PropsWithChildren> & { srOnly?: boolean };
+type DialogHeaderProps = SlottableProps;
 
-const DialogHeader: ForwardRefExoticComponent<DialogTitleProps> = forwardRef<HTMLHeadingElement, DialogTitleProps>(
-  ({ classNames, srOnly, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
-    return (
-      <Column.Segment asChild>
-        <div role='heading' {...props} className={tx('dialog.header', { srOnly }, [classNames])} ref={forwardedRef} />
-      </Column.Segment>
-    );
-  },
-);
+const DialogHeader = slottable<HTMLDivElement>(({ children, asChild, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps(props);
+  const Comp = asChild ? Slot : Primitive.div;
+  const { tx } = useThemeContext();
+  return (
+    <Comp {...rest} className={tx('dialog.header', {}, className)} ref={forwardedRef}>
+      {children}
+    </Comp>
+  );
+});
+
+DialogHeader.displayName = 'Dialog.Header';
 
 //
-// CloseIconButton
+// ActionIconButton
 //
 
-type DialogCloseIconButtonProps = { label?: string };
+type DialogActionIconButtonAction = 'close' | 'delete';
+
+type DialogActionIconButtonProps = { action: DialogActionIconButtonAction; label?: string };
+
+const DIALOG_ACTION_ICONS: Record<DialogActionIconButtonAction, string> = {
+  close: 'ph--x--regular',
+  delete: 'ph--trash--regular',
+};
+
+const DIALOG_ACTION_LABEL_KEYS: Record<DialogActionIconButtonAction, string> = {
+  // Preserves the legacy `close-dialog.label` translation key for backward compat.
+  close: 'close-dialog.label',
+  delete: 'toolbar-delete.label',
+};
 
-const DialogCloseIconButton = forwardRef<HTMLButtonElement, DialogCloseIconButtonProps>(
-  ({ label, ...props }, forwardedRef) => {
+const DialogActionIconButton = forwardRef<HTMLButtonElement, DialogActionIconButtonProps>(
+  ({ action, label, ...props }, forwardedRef) => {
     const { t } = useTranslation(osTranslations);
     return (
       <IconButton
         {...props}
-        label={label ?? t('close dialog label')}
-        icon='ph--x--regular'
+        label={label ?? t(DIALOG_ACTION_LABEL_KEYS[action])}
+        icon={DIALOG_ACTION_ICONS[action]}
         iconOnly
         size={4}
-        density='fine'
         variant='ghost'
         ref={forwardedRef}
       />
@@ -173,87 +192,91 @@ const DialogCloseIconButton = forwardRef<HTMLButtonElement, DialogCloseIconButto
   },
 );
 
+DialogActionIconButton.displayName = 'Dialog.ActionIconButton';
+
 //
 // Body
 //
 
-type DialogBodyProps = PropsWithChildren;
+type DialogBodyProps = SlottableProps;
 
-const DialogBody: ForwardRefExoticComponent<DialogBodyProps> = forwardRef<HTMLDivElement, DialogBodyProps>(
-  ({ children, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
-    return (
-      <Column.Segment asChild>
-        <div role='none' {...props} className={tx('dialog.body')} ref={forwardedRef}>
-          {children}
-        </div>
-      </Column.Segment>
-    );
-  },
-);
+const DialogBody = slottable<HTMLDivElement>(({ children, asChild, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps(props);
+  const Comp = asChild ? Slot : Primitive.div;
+  const { tx } = useThemeContext();
+  return (
+    <Comp {...rest} className={tx('dialog.body', {}, className)} ref={forwardedRef}>
+      {children}
+    </Comp>
+  );
+});
+
+DialogBody.displayName = 'Dialog.Body';
 
 //
 // Title
 //
 
-type DialogTitleProps = ThemedClassName<DialogTitlePrimitiveProps> & { srOnly?: boolean };
+type DialogTitleProps = ThemedClassName<DialogPrimitive.DialogTitleProps> & { srOnly?: boolean };
 
-const DialogTitle: ForwardRefExoticComponent<DialogTitleProps> = forwardRef<HTMLHeadingElement, DialogTitleProps>(
+const DialogTitle = forwardRef<HTMLHeadingElement, DialogTitleProps>(
   ({ classNames, srOnly, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     return (
-      <DialogTitlePrimitive {...props} className={tx('dialog.title', { srOnly }, classNames)} ref={forwardedRef} />
+      <DialogPrimitive.Title {...props} className={tx('dialog.title', { srOnly }, classNames)} ref={forwardedRef} />
     );
   },
 );
 
+DialogTitle.displayName = 'Dialog.Title';
+
 //
 // Description
 //
 
-type DialogDescriptionProps = ThemedClassName<DialogDescriptionPrimitiveProps> & { srOnly?: boolean };
+type DialogDescriptionProps = ThemedClassName<DialogPrimitive.DialogDescriptionProps> & { srOnly?: boolean };
 
-const DialogDescription: ForwardRefExoticComponent<DialogTitleProps> = forwardRef<
-  HTMLParagraphElement,
-  DialogDescriptionProps
->(({ classNames, srOnly, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return (
-    <DialogDescriptionPrimitive
-      {...props}
-      className={tx('dialog.description', { srOnly }, classNames)}
-      ref={forwardedRef}
-    />
-  );
-});
+const DialogDescription = forwardRef<HTMLParagraphElement, DialogDescriptionProps>(
+  ({ classNames, srOnly, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <DialogPrimitive.Description
+        {...props}
+        className={tx('dialog.description', { srOnly }, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+DialogDescription.displayName = 'Dialog.Description';
 
 //
 // ActionBar
 //
 
-type DialogActionBarProps = ThemedClassName<PropsWithChildren>;
+type DialogActionBarProps = SlottableProps;
 
-const DialogActionBar: ForwardRefExoticComponent<DialogActionBarProps> = forwardRef<
-  HTMLDivElement,
-  DialogActionBarProps
->(({ children, classNames, ...props }, forwardedRef) => {
+const DialogActionBar = slottable<HTMLDivElement>(({ children, asChild, ...props }, forwardedRef) => {
+  const { className: classNames, ...rest } = composableProps(props);
+  const Comp = asChild ? Slot : Primitive.div;
   const { tx } = useThemeContext();
   return (
-    <Column.Segment asChild>
-      <div {...props} className={tx('dialog.actionbar', {}, classNames)} ref={forwardedRef}>
-        {children}
-      </div>
-    </Column.Segment>
+    <Comp {...rest} className={tx('dialog.actionbar', {}, classNames)} ref={forwardedRef}>
+      {children}
+    </Comp>
   );
 });
 
+DialogActionBar.displayName = 'Dialog.ActionBar';
+
 //
 // Close
 //
 
-type DialogCloseProps = DialogClosePrimitiveProps;
+type DialogCloseProps = DialogPrimitive.DialogCloseProps;
 
-const DialogClose: FunctionComponent<DialogCloseProps> = DialogClosePrimitive;
+const DialogClose = DialogPrimitive.Close;
 
 //
 // Dialog
@@ -271,7 +294,7 @@ export const Dialog = {
   Description: DialogDescription,
   ActionBar: DialogActionBar,
   Close: DialogClose,
-  CloseIconButton: DialogCloseIconButton,
+  ActionIconButton: DialogActionIconButton,
 };
 
 export type {
@@ -286,4 +309,6 @@ export type {
   DialogDescriptionProps,
   DialogActionBarProps,
   DialogCloseProps,
+  DialogActionIconButtonAction,
+  DialogActionIconButtonProps,
 };

package/src/components/ErrorFallback/ErrorFallback.stories.tsx

@@ -8,11 +8,10 @@ import React from 'react';
 import { ErrorBoundary } from '@dxos/react-error-boundary';
 
 import { withLayout, withTheme } from '../../testing';
-
 import { ErrorFallback } from './ErrorFallback';
 import { ThrowError } from './ThrowError';
 
-const BasicStory = () => {
+const DefaultStory = () => {
   return (
     <ErrorBoundary name='story' FallbackComponent={ErrorFallback}>
       <ThrowError />
@@ -20,10 +19,6 @@ const BasicStory = () => {
   );
 };
 
-const StringErrorStory = () => {
-  return <ErrorFallback error='This is a string error message' data={{ context: 'story' }} />;
-};
-
 const meta: Meta = {
   title: 'ui/react-ui-core/components/ErrorFallback',
   component: ErrorFallback,
@@ -38,7 +33,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  render: BasicStory,
+  render: DefaultStory,
   play: async () => {
     // This story intentionally renders an ErrorBoundary fallback; clear the smoke-test error flag.
     (window as any).__ERROR_BOUNDARY_ERRORS__ = [];
@@ -46,5 +41,5 @@ export const Default: Story = {
 };
 
 export const StringError: Story = {
-  render: StringErrorStory,
+  render: () => <ErrorFallback error='This is a string error message' data={{ context: 'story' }} />,
 };

package/src/components/ErrorFallback/ErrorFallback.tsx

@@ -7,6 +7,10 @@ import { type FallbackProps } from 'react-error-boundary';
 
 import { safeStringify } from '@dxos/util';
 
+import { translationKey } from '#translations';
+
+import { useTranslation } from '../../primitives';
+import { IconButton } from '../Button';
 import { ErrorStack } from './ErrorStack';
 
 export type ErrorFallbackProps = PropsWithChildren<Pick<FallbackProps, 'error'> & { title?: string; data?: any }>;
@@ -15,6 +19,7 @@ export type ErrorFallbackProps = PropsWithChildren<Pick<FallbackProps, 'error'>
  * Themed fallback component for `ErrorBoundary`.
  */
 export const ErrorFallback = ({ children, error, title, data }: ErrorFallbackProps) => {
+  const { t } = useTranslation(translationKey);
   const isDev = process.env.NODE_ENV === 'development';
   const message = error instanceof Error ? error.message : String(error);
 
@@ -55,14 +60,15 @@ const Section = ({ children, title, onClick }: PropsWithChildren<{ title?: strin
   return (
     <div className='flex flex-col gap-1'>
       {onClick && (
-        <button
-          type='button'
-          onClick={onClick}
-          className='flex items-center gap-1 text-xs text-subdued hover:text-primary-500 transition-colors'
-          title={`Copy ${title}`}
-        >
-          <h2 className='text-xs uppercase text-subdued'>{title}</h2>
-        </button>
+        <div>
+          <IconButton
+            classNames='text-xs uppercase'
+            label={title ?? 'Copy'}
+            icon='ph--clipboard-text--regular'
+            size={5}
+            onClick={onClick}
+          />
+        </div>
       )}
       {children}
     </div>