@indico-data/design-system 3.14.1 → 3.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "3.14.1",
+  "version": "3.16.0",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/button/Button.mdx

@@ -20,7 +20,23 @@ Use the event props to respond to interactions, including `onBlur` for focus los
 
 ## Sizes
 
-The Sizes available are small (`xs`), medium (`sm`), large (`md`), and extra large (`lg`). The default size is medium.
+The Sizes available are extra small (`xs`), small (`sm`), medium (`md`), large (`lg`), and extra large (`xl`). The default size is medium (`md`).
+
+Each size has specific padding and icon spacing:
+
+- **xs**: Vertical padding `spacing-xxs` (4px), horizontal padding `spacing-sm` (8px), icon gap `spacing-xs` (6px)
+- **sm**: Vertical padding `spacing-xs` (6px), horizontal padding `spacing-lg` (12px), icon gap `spacing-xs` (6px)
+- **md**: Vertical padding `spacing-sm` (8px), horizontal padding `spacing-2xl` (16px), icon gap `spacing-md` (10px)
+- **lg**: Vertical padding `spacing-md` (10px), horizontal padding `spacing-2xl` (16px), icon gap `spacing-md` (10px)
+- **xl**: Vertical padding `spacing-lg` (12px), horizontal padding `spacing-3xl` (20px), icon gap `spacing-md` (10px)
+
+Icon sizes are mapped to button sizes as follows:
+
+- **xs** button → **xs** icon (12px)
+- **sm** button → **sm** icon (16px)
+- **md** button → **md** icon (20px) - text is 13px
+- **lg** button → **md** icon (20px)
+- **xl** button → **lg** icon (24px) - text is 20px
 
 <Story of={ButtonStories.Sizes} />
 
@@ -52,4 +68,11 @@ The loading state can be achieved by passing the `isLoading` prop.
 
 To include an Icon, use either `iconLeft` or `iconRight` props with a valid icon name. If you only want an icon with no text, simply don't pass any children and the button will render as an icon-only button.
 
+Icon spacing is automatically handled by the button's CSS `gap` property, which varies by button size:
+
+- **xs** and **sm** buttons: `spacing-xs` (6px) gap between icons and text
+- **md**, **lg**, and **xl** buttons: `spacing-md` (10px) gap between icons and text
+
+Icon sizes are automatically mapped based on button size (see the Sizes section above), so you don't need to specify icon sizes separately.
+
 <Story of={ButtonStories.Icons} />

package/src/components/button/Button.stories.tsx

@@ -87,13 +87,13 @@ const meta: Meta = {
     },
     size: {
       control: 'select',
-      options: ['xs', 'sm', 'md', 'lg'],
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
 
       defaultValue: { summary: 'md' },
       table: {
         category: 'Style Props',
         type: {
-          summary: 'xs | sm | md | lg',
+          summary: 'xs | sm | md | lg | xl',
         },
       },
     },
@@ -200,6 +200,11 @@ export const Sizes: Story = {
           Large
         </Button>
       </Col>
+      <Col xs={6} sm={3} className="mb-3">
+        <Button size="xl" ariaLabel="Extra Large Button">
+          Extra Large
+        </Button>
+      </Col>
     </Row>
   ),
 };

package/src/components/button/Button.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 import { Icon } from '../icons/Icon';
+import { IconSizes } from '../icons/types';
 
 import { ButtonProps } from './types';
 
@@ -35,6 +36,27 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
     className,
   );
 
+  // Map button size to icon size
+  // xs → xs (12px), sm → sm (16px), md → md (20px), lg → md (20px), xl → lg (24px)
+  const getIconSize = (buttonSize: string): IconSizes => {
+    switch (buttonSize) {
+      case 'xs':
+        return 'xs';
+      case 'sm':
+        return 'sm';
+      case 'md':
+        return 'md'; // md buttons use md icons (20px)
+      case 'lg':
+        return 'md'; // lg buttons use md icons (20px)
+      case 'xl':
+        return 'lg'; // xl buttons use lg icons (24px)
+      default:
+        return 'md';
+    }
+  };
+
+  const iconSize = getIconSize(size);
+
   const handleOnClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     if (!isLoading && onClick) {
       onClick(event);
@@ -60,20 +82,14 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
         <Icon
           name="indico-o"
           style={{ animation: 'spin 1s linear infinite' }}
-          className={children ? 'mr-2' : ''}
           ariaLabel="Loading..."
-          size={size}
+          size={iconSize}
         />
       )}
 
       {/* Left Icon */}
       {iconLeft && !isLoading && (
-        <Icon
-          name={iconLeft}
-          className={children ? 'mr-2' : ''}
-          ariaLabel={`${iconLeft} Icon`}
-          size={size}
-        />
+        <Icon name={iconLeft} ariaLabel={`${iconLeft} Icon`} size={iconSize} />
       )}
 
       {/* Button children */}
@@ -81,12 +97,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
 
       {/* Right Icon */}
       {iconRight && !isLoading && (
-        <Icon
-          name={iconRight}
-          className={children ? 'ml-2' : ''}
-          ariaLabel={`${iconRight} Icon`}
-          size={size}
-        />
+        <Icon name={iconRight} ariaLabel={`${iconRight} Icon`} size={iconSize} />
       )}
 
       {/* Loading Icon on the right */}
@@ -94,9 +105,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
         <Icon
           name="indico-o"
           style={{ animation: 'spin 1s linear infinite' }}
-          className={children ? 'ml-2' : ''}
           ariaLabel="Loading..."
-          size={size}
+          size={iconSize}
         />
       )}
     </button>

package/src/components/button/__tests__/Button.test.tsx

@@ -57,7 +57,6 @@ describe('Button', () => {
       expect(button).toHaveClass('btn--loading');
       expect(button).toBeDisabled();
       expect(loadingIcon).toBeInTheDocument();
-      expect(loadingIcon).toHaveClass('mr-2');
     });
 
     it('displays the loading icon on the left when isLoading and iconLeft exists and hides the iconLeft', () => {
@@ -69,7 +68,6 @@ describe('Button', () => {
       const loadingIcon = screen.getByLabelText('Loading...');
       const iconLeft = screen.queryByLabelText('check Icon');
 
-      expect(loadingIcon).toHaveClass('mr-2');
       expect(iconLeft).not.toBeInTheDocument();
     });
 
@@ -82,19 +80,16 @@ describe('Button', () => {
       const loadingIcon = screen.getByLabelText('Loading...');
       const iconRight = screen.queryByLabelText('check Icon');
 
-      expect(loadingIcon).toHaveClass('ml-2');
       expect(iconRight).not.toBeInTheDocument();
     });
 
     it('does not apply a margin to the loading icon when no children are present', () => {
       render(<Button isLoading iconLeft="check" onClick={onClick} ariaLabel="btn" />);
       const loadingIcon = screen.getByLabelText('Loading...');
-      expect(loadingIcon).not.toHaveClass('mr-2');
-      expect(loadingIcon).not.toHaveClass('ml-2');
+      expect(loadingIcon).toBeInTheDocument();
 
       render(<Button isLoading iconRight="check" onClick={onClick} ariaLabel="btn" />);
-      expect(loadingIcon).not.toHaveClass('mr-2');
-      expect(loadingIcon).not.toHaveClass('ml-2');
+      expect(loadingIcon).toBeInTheDocument();
     });
 
     it('does not apply the loading class when not loading', () => {
@@ -156,7 +151,6 @@ describe('Button', () => {
       const button = screen.getByRole('button');
 
       expect(button).toContainElement(icon);
-      expect(icon).toHaveClass('mr-2');
     });
 
     it('renders a right icon with proper spacing when children are present', () => {
@@ -169,7 +163,6 @@ describe('Button', () => {
       const button = screen.getByRole('button');
 
       expect(button).toContainElement(icon);
-      expect(icon).toHaveClass('ml-2');
     });
 
     it('renders both left and right icons with proper spacing when both are provided', () => {
@@ -184,8 +177,68 @@ describe('Button', () => {
 
       expect(button).toContainElement(leftIcon);
       expect(button).toContainElement(rightIcon);
-      expect(leftIcon).toHaveClass('mr-2');
-      expect(rightIcon).toHaveClass('ml-2');
+    });
+  });
+
+  describe('icon size mapping', () => {
+    it('uses xs icon size for xs button', () => {
+      render(
+        <Button size="xs" iconLeft="check" ariaLabel="xs button">
+          Button
+        </Button>,
+      );
+      const icon = screen.getByLabelText('check Icon');
+      expect(icon).toHaveClass('icon--xs');
+    });
+
+    it('uses sm icon size for sm button', () => {
+      render(
+        <Button size="sm" iconLeft="check" ariaLabel="sm button">
+          Button
+        </Button>,
+      );
+      const icon = screen.getByLabelText('check Icon');
+      expect(icon).toHaveClass('icon--sm');
+    });
+
+    it('uses md icon size for md button', () => {
+      render(
+        <Button size="md" iconLeft="check" ariaLabel="md button">
+          Button
+        </Button>,
+      );
+      const icon = screen.getByLabelText('check Icon');
+      expect(icon).toHaveClass('icon--md');
+    });
+
+    it('uses md icon size for lg button', () => {
+      render(
+        <Button size="lg" iconLeft="check" ariaLabel="lg button">
+          Button
+        </Button>,
+      );
+      const icon = screen.getByLabelText('check Icon');
+      expect(icon).toHaveClass('icon--md');
+    });
+
+    it('uses lg icon size for xl button', () => {
+      render(
+        <Button size="xl" iconLeft="check" ariaLabel="xl button">
+          Button
+        </Button>,
+      );
+      const icon = screen.getByLabelText('check Icon');
+      expect(icon).toHaveClass('icon--lg');
+    });
+
+    it('applies correct icon size to loading icon based on button size', () => {
+      render(
+        <Button size="sm" isLoading ariaLabel="loading button">
+          Button
+        </Button>,
+      );
+      const loadingIcon = screen.getByLabelText('Loading...');
+      expect(loadingIcon).toHaveClass('icon--sm');
     });
   });
 });

package/src/components/button/enums.ts

@@ -1,5 +1,5 @@
 export type ButtonVariants = 'solid' | 'outline' | 'link' | 'action' | 'destructive' | 'soft';
 
-export type ButtonSizes = 'xs' | 'sm' | 'md' | 'lg';
+export type ButtonSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
 export type ButtonTypes = 'button' | 'submit' | 'reset';

package/src/components/button/styles/Button.scss

@@ -11,6 +11,7 @@
   border-color: transparent;
   border-radius: var(--pf-button-border-radius);
   font-weight: var(--pf-button-font-weight);
+  gap: 0; // Default gap, will be overridden by size-specific rules
 
   cursor: pointer;
   &:disabled {
@@ -20,27 +21,33 @@
 
 // Button Sizes
 .btn--xs {
-  line-height: var(--pf-button-line-height-xs);
-  padding: var(--pf-spacing-xxs) var(--pf-spacing-lg);
-  font-size: var(--pf-button-font-size-xs);
+  padding: var(--pf-spacing-xxs) var(--pf-spacing-sm);
+  font-size: var(--pf-font-size-sm);
+  gap: var(--pf-spacing-xs);
 }
 
 .btn--sm {
-  line-height: var(--pf-button-line-height-sm);
-  padding: var(--pf-spacing-xxs) var(--pf-spacing-lg);
-  font-size: var(--pf-button-font-size-sm);
+  padding: var(--pf-spacing-xs) var(--pf-spacing-lg);
+  font-size: var(--pf-font-size-md);
+  gap: var(--pf-spacing-xs);
 }
 
 .btn--md {
-  line-height: var(--pf-button-line-height-md);
-  padding: var(--pf-spacing-sm) var(--pf-spacing-lg);
-  font-size: var(--pf-button-font-size-md);
+  padding: var(--pf-spacing-sm) var(--pf-spacing-2xl);
+  font-size: var(--pf-font-size-base);
+  gap: var(--pf-spacing-md);
 }
 
 .btn--lg {
-  line-height: var(--pf-button-line-height-lg);
-  padding: var(--pf-spacing-sm) var(--pf-spacing-2xl);
-  font-size: var(--pf-button-font-size-lg);
+  padding: var(--pf-spacing-md) var(--pf-spacing-2xl);
+  font-size: var(--pf-font-size-2xl);
+  gap: var(--pf-spacing-md);
+}
+
+.btn--xl {
+  padding: var(--pf-spacing-lg) var(--pf-spacing-3xl);
+  font-size: var(--pf-font-size-3xl);
+  gap: var(--pf-spacing-md);
 }
 
 .btn--icon-only {

package/src/components/button/styles/_variables.scss

@@ -3,15 +3,8 @@
 :root [data-theme='light'],
 :root [data-theme='dark'] {
   // Typography
-  --pf-button-font-weight: var(--pf-font-weight-regular);
-  --pf-button-font-size-xs: calc(0.875 * var(--pf-font-size-base));
-  --pf-button-font-size-sm: calc(0.875 * var(--pf-font-size-base));
-  --pf-button-font-size-md: calc(0.875 * var(--pf-font-size-base));
-  --pf-button-font-size-lg: var(--pf-font-size-base);
-  --pf-button-line-height-xs: var(--pf-line-height-md);
-  --pf-button-line-height-sm: var(--pf-line-height-md);
-  --pf-button-line-height-md: var(--pf-line-height-md);
-  --pf-button-line-height-lg: var(--pf-line-height-lg);
+
+  --pf-button-font-weight: var(--pf-font-weight-medium);
 
   // Border radii
   --pf-button-border-radius: var(--pf-border-radius-md);

package/src/components/button/types.ts

@@ -2,7 +2,7 @@ import { IconName } from '../../types';
 
 export type ButtonVariants = 'solid' | 'outline' | 'link' | 'action' | 'destructive' | 'soft';
 
-export type ButtonSizes = 'xs' | 'sm' | 'md' | 'lg';
+export type ButtonSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
 export type ButtonTypes = 'button' | 'submit' | 'reset';
 

package/src/components/floatUI/FloatUI.stories.tsx

@@ -115,6 +115,7 @@ export const Uncontrolled: Story = {
           data-testid="refresh-library"
           ariaLabel="Refresh Data"
           iconLeft="retrain"
+          size="sm"
           onClick={() => console.log('Refresh Data')}
         >
           Refresh Data
@@ -123,6 +124,7 @@ export const Uncontrolled: Story = {
           data-testid="configure-fields"
           ariaLabel="Configure Fields"
           iconLeft="edit"
+          size="sm"
           onClick={() => console.log('Configure Fields')}
         >
           Configure Fields
@@ -131,6 +133,7 @@ export const Uncontrolled: Story = {
           data-testid="delete-library"
           ariaLabel="Delete Library"
           iconLeft="trash"
+          size="sm"
           onClick={() => console.log('Delete Library')}
         >
           Delete Library
@@ -198,6 +201,7 @@ export const Hover: Story = {
           data-testid="hover-item-1"
           ariaLabel="Item 1"
           iconLeft="retrain"
+          size="sm"
           onClick={() => console.log('Item 1')}
         >
           Item 1
@@ -206,6 +210,7 @@ export const Hover: Story = {
           data-testid="hover-item-2"
           ariaLabel="Item 2"
           iconLeft="edit"
+          size="sm"
           onClick={() => console.log('Item 2')}
         >
           Item 2

package/src/components/floatUI/FloatUI.tsx

@@ -11,6 +11,8 @@ import {
   shift,
   Placement,
   useDismiss,
+  ReferenceType,
+  VirtualElement,
 } from '@floating-ui/react';
 import { FloatUIProps } from './types';
 
@@ -54,6 +56,8 @@ export function FloatUI({
     throw new Error('Both children of FloatUI must be valid React elements.');
   }
 
+  const referenceElement = floatingOptions.elements?.reference || referenceElementRef.current;
+
   const { refs, floatingStyles, context } = useFloating({
     ...floatingOptions,
     open: isOpen,
@@ -62,7 +66,7 @@ export function FloatUI({
       onOpenChange?.(isOpen);
     },
     elements: {
-      reference: referenceElementRef.current,
+      reference: referenceElement as Element | null,
     },
   });
 

package/src/components/forms/input/Input.tsx

@@ -69,7 +69,12 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <>
         <div className="input-wrapper">
           {iconName && (
-            <Icon name={iconName} data-testid={`${name}-embedded-icon`} className="embedded-icon" />
+            <Icon
+              name={iconName}
+              data-testid={`${name}-embedded-icon`}
+              className="embedded-icon"
+              size="sm"
+            />
           )}
           <input
             ref={ref}
@@ -95,7 +100,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
             <Icon
               name="x-close"
               data-testid={`${name}-clearable-icon`}
-              size="sm"
+              size="xs"
               onClick={handleClear}
               className="clearable-icon"
             />

package/src/components/forms/input/styles/Input.scss

@@ -16,13 +16,15 @@
   position: relative;
   .embedded-icon {
     position: absolute;
-    top: 10px;
+    top: 50%;
+    transform: translateY(-50%);
     left: var(--pf-spacing-sm);
     color: var(--pf-semantic-font-regular);
   }
   .clearable-icon {
     position: absolute;
-    top: var(--pf-spacing-lg);
+    top: 50%;
+    transform: translateY(-50%);
     right: var(--pf-spacing-sm);
     color: var(--pf-semantic-font-regular);
     cursor: pointer;

package/src/components/forms/numberInput/NumberInput.tsx

@@ -55,7 +55,12 @@ const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
       <>
         <div className="number-input-wrapper">
           {iconName && (
-            <Icon name={iconName} data-testid={`${name}-embedded-icon`} className="embedded-icon" />
+            <Icon
+              name={iconName}
+              data-testid={`${name}-embedded-icon`}
+              className="embedded-icon"
+              size="sm"
+            />
           )}
           <input
             ref={ref}
@@ -78,7 +83,7 @@ const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
               data-testid={`${name}-clearable-icon`}
               onClick={handleClear}
               className="clearable-icon"
-              size="sm"
+              size="xs"
             />
           )}
         </div>

package/src/components/forms/passwordInput/PasswordInput.tsx

@@ -55,7 +55,7 @@ const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
     return (
       <>
         <div className="password-input-wrapper">
-          <Icon name="lock" data-testid={`${name}-embedded-icon`} className="embedded-icon" />
+          <Icon name="lock" data-testid={`${name}-embedded-icon`} className="embedded-icon" size="sm" />
           <input
             ref={ref}
             data-testid={`form-password-input-${name}`}
@@ -76,7 +76,7 @@ const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
             <Icon
               name={showPassword ? 'fa-eye-slash' : 'eye'}
               data-testid={`${name}-${showPassword ? 'hide' : 'show'}-password-icon`}
-              size="md"
+              size="sm"
               onClick={handleShowPassword}
               className="toggle-show-password-icon"
             />

package/src/components/icons/Icon.mdx

@@ -21,7 +21,7 @@ The `Icon` component provides unified rendering of both custom SVG icons (Indico
 
 ## Sizes
 
-The `Icon` component supports five predefined sizes:
+The `Icon` component supports eight predefined sizes:
 
 <Story of={IconStories.IconStates} />
 

package/src/components/icons/Icon.stories.tsx

@@ -84,8 +84,8 @@ export const DefaultIcon: Story = {
 
 export const IconStates: Story = {
   render: (args) => {
-    const sizes: IconSizes[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'];
-    const rems = ['10px', '12px', '16px', '24px', '32px', '48px', '64px'];
+    const sizes: IconSizes[] = ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'];
+    const rems = ['10px', '12px', '16px', '20px', '24px', '32px', '48px', '64px'];
 
     return (
       <Row>

package/src/components/icons/styles/Icon.scss

@@ -1,4 +1,5 @@
 $sizes: (
+  xxs: var(--pf-icon-size-xxs),
   xs: var(--pf-icon-size-xs),
   sm: var(--pf-icon-size-sm),
   md: var(--pf-icon-size-md),

package/src/components/icons/types.ts

@@ -3,7 +3,7 @@ import { PermafrostComponent } from '../../types';
 import { IconName as FAIconName, IconPrefix } from '@fortawesome/fontawesome-svg-core';
 import { indicons } from './indicons';
 
-export type IconSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+export type IconSizes = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
 
 export type IndiconName = keyof typeof indicons;
 

package/src/components/menu/Menu.stories.tsx

@@ -41,6 +41,7 @@ export const Default: Story = {
         data-testid="refresh-library"
         ariaLabel="Refresh Data"
         iconLeft="retrain"
+        size="sm"
         onClick={() => console.log('Refresh Data')}
       >
         Refresh Data
@@ -49,6 +50,7 @@ export const Default: Story = {
         data-testid="configure-fields"
         ariaLabel="Configure Fields"
         iconLeft="edit"
+        size="sm"
         onClick={() => console.log('Configure Fields')}
       >
         Configure Fields
@@ -57,6 +59,7 @@ export const Default: Story = {
         data-testid="delete-library"
         ariaLabel="Delete Library"
         iconLeft="trash"
+        size="sm"
         onClick={() => console.log('Delete Library')}
       >
         Delete Library

package/src/components/menu/styles/Menu.scss

@@ -5,8 +5,8 @@
     width: 100%;
     background: var(--pf-semantic-background-secondary);
     color: var(--pf-semantic-font-regular);
-    display: block;
-    width: 100%;
+    display: flex;
+    justify-content: flex-start;
     text-align: left;
     border: none;
     border-radius: 0;

package/src/components/pagination/Pagination.tsx

@@ -64,6 +64,7 @@ export const Pagination = ({
                 variant="link"
                 onClick={handlePreviousPage}
                 iconLeft="chevron-left"
+                size="sm"
                 isDisabled={isPreviousButtonDisabled || totalPages === 0}
               />
             </div>
@@ -107,6 +108,7 @@ export const Pagination = ({
                 onClick={handleNextPage}
                 iconLeft="chevron-right"
                 isDisabled={isNextButtonDisabled || totalPages === 0}
+                size="sm"
               />
             </div>
           </Col>

package/src/components/stepper/components/Legend.tsx

@@ -23,7 +23,7 @@ export const Legend = ({ currentStep, steps, onStepClick }: StepperLegendProps)
                     current: isCurrent,
                   })}
                 >
-                  {isCompleted ? <Icon name="check" /> : index + 1}
+                  {isCompleted ? <Icon name="check" size="sm" /> : index + 1}
                 </div>
               </Col>
               <Col>

package/src/components/toast/Toast.stories.tsx

@@ -48,27 +48,27 @@ export const Default: Story = {
   render: (args) => (
     <Row>
       <Col>
-        <Button ariaLabel="Click me" onClick={() => toast('Hello World')}>
+        <Button ariaLabel="Click me" onClick={() => toast('Hello World')} size="sm">
           Fire default toast
         </Button>
       </Col>
       <Col>
-        <Button ariaLabel="Click me" onClick={() => toast.info('Hello World')}>
+        <Button ariaLabel="Click me" onClick={() => toast.info('Hello World')} size="sm">
           Fire info toast
         </Button>
       </Col>
       <Col>
-        <Button ariaLabel="Click me" onClick={() => toast.warning('Hello World')}>
+        <Button ariaLabel="Click me" onClick={() => toast.warning('Hello World')} size="sm">
           Fire warning toast
         </Button>
       </Col>
       <Col>
-        <Button ariaLabel="Click me" onClick={() => toast.error('Hello World')}>
+        <Button ariaLabel="Click me" onClick={() => toast.error('Hello World')} size="sm">
           Fire error toast
         </Button>
       </Col>
       <Col>
-        <Button ariaLabel="Click me" onClick={() => toast.success('Hello World')}>
+        <Button ariaLabel="Click me" onClick={() => toast.success('Hello World')} size="sm">
           Fire success toast
         </Button>
         <ToastContainer {...args} />