@boostdev/design-system-components 2.0.0 → 2.1.0

package/src/components/interaction/Button/Button.spec.tsx

@@ -47,4 +47,20 @@ describe('Button', () => {
     render(<Button iconEnd={<span data-testid="icon">★</span>}>Label</Button>);
     expect(screen.getByTestId('icon')).toBeInTheDocument();
   });
+
+  it('applies --iconOnly class when isIconOnly is true', () => {
+    render(
+      <Button isIconOnly aria-label="Close">
+        <span data-testid="icon">×</span>
+      </Button>
+    );
+    expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument();
+    expect(screen.getByTestId('icon')).toBeInTheDocument();
+    expect(screen.getByRole('button').className).toContain('--iconOnly');
+  });
+
+  it('does not apply --iconOnly class by default', () => {
+    render(<Button>Click</Button>);
+    expect(screen.getByRole('button').className).not.toContain('--iconOnly');
+  });
 });

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

@@ -1,42 +1,160 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Button } from './Button';
+import { Button, type ButtonProps } from './Button';
 
-const meta = {
+const CheckIcon = (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" aria-hidden>
+    <path d="M12 0a12 12 0 1 0 12 12A12 12 0 0 0 12 0Zm6.93 8.2-6.85 9.29a1 1 0 0 1-1.43.19l-4.89-3.91a1 1 0 0 1-.15-1.41A1 1 0 0 1 7 12.21l4.08 3.26L17.32 7a1 1 0 0 1 1.39-.21 1 1 0 0 1 .22 1.41Z"/>
+  </svg>
+);
+
+const ArrowRight = <span aria-hidden>→</span>;
+const ArrowLeft = <span aria-hidden>←</span>;
+
+const iconMap = {
+  none: undefined,
+  check: CheckIcon,
+  arrowRight: ArrowRight,
+  arrowLeft: ArrowLeft,
+};
+
+type IconKey = keyof typeof iconMap;
+
+/**
+ * Story-local args: `iconStart`/`iconEnd` are narrowed to the icon keys
+ * (`'check' | 'arrowRight' | …`) so the Controls panel stays in sync with
+ * the rendered icon. Storybook's `mapping` resolves the key → ReactNode at
+ * render time, so the prop still receives a real ReactNode downstream.
+ */
+type ButtonStoryArgs = Omit<ButtonProps, 'iconStart' | 'iconEnd'> & {
+  iconStart?: IconKey;
+  iconEnd?: IconKey;
+};
+
+const meta: Meta<ButtonStoryArgs> = {
   title: 'React/Interaction/Button',
   component: Button,
   argTypes: {
-    variant: { control: 'select', options: ['default', 'ghost'] },
-    size: { control: 'select', options: ['small', 'medium', 'large'] },
+    variant: {
+      control: 'select',
+      options: ['default', 'outline'],
+      description: 'Visual style. `default` is filled; `outline` is transparent with a border.',
+      table: { defaultValue: { summary: 'default' } },
+    },
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large'],
+      description: 'Height + padding. `small` is 2.25em, `medium` is 3em, `large` bumps font-size to the h3 scale.',
+      table: { defaultValue: { summary: 'medium' } },
+    },
+    iconStart: {
+      control: 'select',
+      options: Object.keys(iconMap) as IconKey[],
+      mapping: iconMap,
+      description: 'Icon rendered before the label.',
+    },
+    iconEnd: {
+      control: 'select',
+      options: Object.keys(iconMap) as IconKey[],
+      mapping: iconMap,
+      description: 'Icon rendered after the label.',
+    },
+    isIconOnly: {
+      control: 'boolean',
+      description: 'Forces a 1:1 aspect ratio with minimal padding. Composable with any `variant`. Requires `aria-label`.',
+      table: { defaultValue: { summary: 'false' } },
+    },
+    hasPulse: {
+      control: 'boolean',
+      description: 'Adds a pulsing animation for CTA emphasis. Respects `prefers-reduced-motion`.',
+      table: { defaultValue: { summary: 'false' } },
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Blocks interaction, sets `aria-disabled`, and removes the element from the tab order.',
+      table: { defaultValue: { summary: 'false' } },
+    },
+    href: {
+      control: 'text',
+      description: 'When set, renders as `<a>` pointing to this URL instead of `<button>`.',
+    },
+    'aria-label': {
+      control: 'text',
+      description: 'Accessible label. Required for icon-only buttons.',
+    },
     onClick: { action: 'clicked' },
   },
-} satisfies Meta<typeof Button>;
+  args: { variant: 'default', size: 'medium' },
+};
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<ButtonStoryArgs>;
+
+export const Playground: Story = {
+  args: {
+    children: 'Button',
+    iconStart: 'none',
+    iconEnd: 'none',
+  },
+};
 
-export const Default: Story = { args: { children: 'Default', variant: 'default' } };
-export const Ghost: Story = { args: { children: 'Ghost', variant: 'ghost' } };
+export const Default: Story = { args: { children: 'Default' } };
+export const Outline: Story = { args: { children: 'Outline', variant: 'outline' } };
 export const Small: Story = { args: { children: 'Small', size: 'small' } };
 export const Medium: Story = { args: { children: 'Medium', size: 'medium' } };
 export const Large: Story = { args: { children: 'Large', size: 'large' } };
 export const AsLink: Story = { args: { children: 'Link Button', href: 'https://example.com' } };
 export const WithPulse: Story = { args: { children: 'Pulsing', hasPulse: true } };
 export const Disabled: Story = { args: { children: 'Disabled', disabled: true } };
-export const WithIcons: Story = {
+
+export const WithIconStart: Story = { args: { children: 'Confirm', iconStart: 'check' } };
+export const WithIconEnd: Story = { args: { children: 'Continue', iconEnd: 'arrowRight' } };
+export const WithBothIcons: Story = { args: { children: 'Both', iconStart: 'arrowLeft', iconEnd: 'arrowRight' } };
+
+export const IconOnly: Story = {
   args: {
-    children: 'With Icons',
-    iconStart: <span>→</span>,
-    iconEnd: <span>←</span>,
+    isIconOnly: true,
+    'aria-label': 'Confirm',
+    children: CheckIcon,
   },
 };
+
+export const IconOnlyOutline: Story = {
+  args: {
+    variant: 'outline',
+    isIconOnly: true,
+    'aria-label': 'Confirm',
+    children: CheckIcon,
+  },
+};
+
 export const AllVariants: Story = {
   render: () => (
     <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap', alignItems: 'center' }}>
-      {(['default', 'ghost'] as const).map(v => (
-        ['small', 'medium', 'large'].map(s => (
-          <Button key={`${v}-${s}`} variant={v} size={s as 'small' | 'medium' | 'large'}>{v} {s}</Button>
+      {(['default', 'outline'] as const).map(v =>
+        (['small', 'medium', 'large'] as const).map(s => (
+          <Button key={`${v}-${s}`} variant={v} size={s}>{v} {s}</Button>
+        ))
+      )}
+    </div>
+  ),
+};
+
+export const AllIconOnly: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap', alignItems: 'center' }}>
+      {(['default', 'outline'] as const).map(v =>
+        (['small', 'medium', 'large'] as const).map(s => (
+          <Button
+            key={`${v}-${s}`}
+            variant={v}
+            size={s}
+            isIconOnly
+            aria-label={`${v} ${s}`}
+          >
+            {CheckIcon}
+          </Button>
         ))
-      ))}
+      )}
     </div>
   ),
 };

package/src/components/interaction/Button/Button.tsx

@@ -36,6 +36,8 @@ export interface ButtonProps extends WithClassName, ButtonHTMLAttributes<HTMLBut
   disabled?: boolean;
   /** Adds a pulsing animation for call-to-action emphasis. Respects `prefers-reduced-motion`. */
   hasPulse?: boolean;
+  /** When true, forces a 1:1 aspect ratio with equal `xs` padding on both axes. Pass the icon as `children`; composable with any `variant`. Requires `aria-label`. */
+  isIconOnly?: boolean;
   /** Click handler. Typed as `HTMLElement` because the root may be `<button>` or `<a>`. */
   onClick?: MouseEventHandler<HTMLElement>;
   /** Anchor target (only applied when rendered as `<a>`). */
@@ -57,6 +59,7 @@ export function Button({
   iconEnd,
   size = 'medium',
   hasPulse = false,
+  isIconOnly = false,
   href,
   target,
   rel,
@@ -69,6 +72,7 @@ export function Button({
     css[`--${variant}`],
     css[`--size_${size}`],
     hasPulse && css['--hasPulse'],
+    isIconOnly && css['--iconOnly'],
     className,
   );
 

package/src/components/layout/IconWrapper/IconWrapper.stories.tsx

@@ -1,21 +1,53 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { IconWrapper } from './IconWrapper';
+import { IconWrapper, type IconWrapperProps } from './IconWrapper';
 
-const meta = {
+const CheckIcon = (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" fill="currentColor" aria-hidden>
+    <path d="M12 0a12 12 0 1 0 12 12A12 12 0 0 0 12 0Zm6.93 8.2-6.85 9.29a1 1 0 0 1-1.43.19l-4.89-3.91a1 1 0 0 1-.15-1.41A1 1 0 0 1 7 12.21l4.08 3.26L17.32 7a1 1 0 0 1 1.39-.21 1 1 0 0 1 .22 1.41Z"/>
+  </svg>
+);
+
+const StarIcon = (
+  <svg viewBox="0 0 24 24" fill="currentColor" width="1em" height="1em" aria-hidden>
+    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+  </svg>
+);
+
+const HeartIcon = (
+  <svg viewBox="0 0 24 24" fill="currentColor" width="1em" height="1em" aria-hidden>
+    <path d="M12 21s-7-4.35-7-10a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 19 11c0 5.65-7 10-7 10z" />
+  </svg>
+);
+
+const iconMap = {
+  check: CheckIcon,
+  star: StarIcon,
+  heart: HeartIcon,
+};
+
+type IconKey = keyof typeof iconMap;
+
+type IconWrapperStoryArgs = Omit<IconWrapperProps, 'children'> & {
+  children?: IconKey;
+};
+
+const meta: Meta<IconWrapperStoryArgs> = {
   title: 'React/Layout/IconWrapper',
   component: IconWrapper,
-} satisfies Meta<typeof IconWrapper>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    children: (
-      <svg viewBox="0 0 24 24" fill="currentColor" width="1em" height="1em">
-        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
-      </svg>
-    ),
+  argTypes: {
+    children: {
+      control: 'select',
+      options: Object.keys(iconMap) as IconKey[],
+      mapping: iconMap,
+      description: 'The icon to render inside the circular wrapper.',
+    },
   },
+  args: { children: 'star' },
 };
 
+export default meta;
+type Story = StoryObj<IconWrapperStoryArgs>;
+
+export const Default: Story = {};
+export const Check: Story = { args: { children: 'check' } };
+export const Heart: Story = { args: { children: 'heart' } };

package/src/web-components/interaction/BdsButton.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import { Meta, Canvas, ArgTypes, Controls } from '@storybook/blocks';
 import * as Stories from './BdsButton.stories';
 
 <Meta of={Stories} />
@@ -24,26 +24,54 @@ Or in HTML without a bundler:
 </script>
 ```
 
-## Examples
+## Playground
 
-### All variants & sizes
-<Canvas of={Stories.AllVariants} />
+<Canvas of={Stories.Playground} />
+<Controls of={Stories.Playground} />
+
+## Variants
 
-### Default
 <Canvas of={Stories.Default} />
+<Canvas of={Stories.Outline} />
 
-### Ghost
-<Canvas of={Stories.Ghost} />
+## Sizes
 
-### Sizes
 <Canvas of={Stories.Small} />
 <Canvas of={Stories.Medium} />
 <Canvas of={Stories.Large} />
 
-### Pulse (CTA emphasis)
+## Icons
+
+Slot an SVG (or any element) into `icon-start` or `icon-end`:
+
+```html
+<bds-button>
+  <svg slot="icon-start">…</svg>
+  Save
+</bds-button>
+```
+
+<Canvas of={Stories.WithIconStart} />
+<Canvas of={Stories.WithIconEnd} />
+
+### Icon-only (1:1 aspect ratio)
+
+Set the `is-icon-only` attribute to render a square button with equal `var(--bds-space_xs)` padding on both axes. Composable with any `variant`. Always pair with `aria-label` — there's no visible label text for assistive tech to read.
+
+<Canvas of={Stories.IconOnly} />
+<Canvas of={Stories.IconOnlyOutline} />
+<Canvas of={Stories.AllIconOnly} />
+
+## All variants & sizes
+
+<Canvas of={Stories.AllVariants} />
+
+## Pulse (CTA emphasis)
+
 <Canvas of={Stories.WithPulse} />
 
-### Disabled
+## Disabled
+
 <Canvas of={Stories.Disabled} />
 
 ## Props
@@ -54,14 +82,15 @@ Or in HTML without a bundler:
 
 | Attribute | Type | Default | Description |
 |-----------|------|---------|-------------|
-| `variant` | `"default" \| "ghost"` | `"default"` | Visual style — filled or transparent outlined |
-| `size` | `"small" \| "medium" \| "large"` | `"medium"` | Height and padding scale |
+| `variant` | `"default" \| "outline"` | `"default"` | Visual style — filled or transparent outlined (`"ghost"` is a deprecated alias for `"outline"`) |
+| `size` | `"small" \| "medium" \| "large"` | `"medium"` | Height and horizontal padding |
 | `disabled` | boolean | `false` | Prevents interaction, sets `aria-disabled` |
 | `href` | string | — | Renders as `<a>` when set |
 | `target` | string | — | Forwarded to `<a>` when `href` is set |
 | `rel` | string | — | Forwarded to `<a>` when `href` is set |
 | `type` | `"button" \| "submit" \| "reset"` | `"button"` | Native button type |
 | `has-pulse` | boolean | `false` | Adds animated ring for CTA emphasis |
+| `is-icon-only` | boolean | `false` | 1:1 aspect ratio with equal `xs` padding on both axes. Requires `aria-label`. |
 | `aria-label` | string | — | Accessible label (required for icon-only buttons) |
 
 ## Slots
@@ -76,7 +105,7 @@ Or in HTML without a bundler:
 
 | Property | Description |
 |----------|-------------|
-| `--button_color` | Identity colour — fills the default variant, outlines the ghost variant |
+| `--button_color` | Identity colour — fills the default variant, outlines the outline variant |
 | `--button_on-color` | Text/icon colour on the button surface. Pair with `--button_color` |
 
 ## Invoker Commands API
@@ -94,8 +123,11 @@ Or in HTML without a bundler:
 
 ```html
 <bds-button variant="default" size="medium">Save</bds-button>
-<bds-button variant="ghost">Cancel</bds-button>
+<bds-button variant="outline">Cancel</bds-button>
 <bds-button href="/dashboard">Go to dashboard</bds-button>
+<bds-button is-icon-only aria-label="Confirm">
+  <svg viewBox="0 0 24 24">…</svg>
+</bds-button>
 ```
 
 ## Accessibility

package/src/web-components/interaction/BdsButton.stories.tsx

@@ -1,56 +1,188 @@
-import React from 'react';
+import React, { type ReactNode } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import type { ButtonVariant, ButtonSize } from './bds-button';
 import '../index'; // auto-registers all custom elements
 
-// Thin React wrapper so Storybook controls work with the custom element's props
+const CheckIcon = (
+  <svg
+    slot="icon-start"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="1em"
+    height="1em"
+    aria-hidden
+    fill="currentColor"
+  >
+    <path d="M12 0a12 12 0 1 0 12 12A12 12 0 0 0 12 0Zm6.93 8.2-6.85 9.29a1 1 0 0 1-1.43.19l-4.89-3.91a1 1 0 0 1-.15-1.41A1 1 0 0 1 7 12.21l4.08 3.26L17.32 7a1 1 0 0 1 1.39-.21 1 1 0 0 1 .22 1.41Z" />
+  </svg>
+);
+
+const ArrowRightStart = <span slot="icon-start" aria-hidden>→</span>;
+const ArrowRightEnd = <span slot="icon-end" aria-hidden>→</span>;
+const ArrowLeftStart = <span slot="icon-start" aria-hidden>←</span>;
+
+// Icon for icon-only buttons — goes into the default slot (no slot attribute)
+const CheckIconDefault = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="1em"
+    height="1em"
+    aria-hidden
+    fill="currentColor"
+  >
+    <path d="M12 0a12 12 0 1 0 12 12A12 12 0 0 0 12 0Zm6.93 8.2-6.85 9.29a1 1 0 0 1-1.43.19l-4.89-3.91a1 1 0 0 1-.15-1.41A1 1 0 0 1 7 12.21l4.08 3.26L17.32 7a1 1 0 0 1 1.39-.21 1 1 0 0 1 .22 1.41Z" />
+  </svg>
+);
+
+const iconStartMap = {
+  none: undefined,
+  check: CheckIcon,
+  arrowRight: ArrowRightStart,
+  arrowLeft: ArrowLeftStart,
+};
+
+const iconEndMap = {
+  none: undefined,
+  arrowRight: ArrowRightEnd,
+};
+
+type IconStartKey = keyof typeof iconStartMap;
+type IconEndKey = keyof typeof iconEndMap;
+
+// React wrapper translating typed props into the custom element's attributes/slots
+interface BdsButtonProps {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  disabled?: boolean;
+  href?: string;
+  hasPulse?: boolean;
+  isIconOnly?: boolean;
+  'aria-label'?: string;
+  iconStart?: ReactNode;
+  iconEnd?: ReactNode;
+  children?: ReactNode;
+}
+
 function BdsButton({
   variant = 'default',
   size = 'medium',
   disabled,
   href,
   hasPulse,
+  isIconOnly,
+  'aria-label': ariaLabel,
+  iconStart,
+  iconEnd,
   children,
-}: {
-  variant?: ButtonVariant;
-  size?: ButtonSize;
-  disabled?: boolean;
-  href?: string;
-  hasPulse?: boolean;
-  children?: React.ReactNode;
-}) {
+}: BdsButtonProps) {
   return React.createElement(
     'bds-button',
-    { variant, size, disabled: disabled || undefined, href, 'has-pulse': hasPulse || undefined },
+    {
+      variant,
+      size,
+      disabled: disabled || undefined,
+      href,
+      'has-pulse': hasPulse || undefined,
+      'is-icon-only': isIconOnly || undefined,
+      'aria-label': ariaLabel,
+    },
+    iconStart,
     children,
+    iconEnd,
   );
 }
 
-const meta = {
+type BdsButtonStoryArgs = Omit<BdsButtonProps, 'iconStart' | 'iconEnd'> & {
+  iconStart?: IconStartKey;
+  iconEnd?: IconEndKey;
+};
+
+const meta: Meta<BdsButtonStoryArgs> = {
   title: 'Web Components/Interaction/Button',
   component: BdsButton,
   tags: ['!stable', 'experimental'],
   parameters: { layout: 'centered' },
   argTypes: {
-    variant: { control: 'select', options: ['default', 'ghost'] },
-    size: { control: 'select', options: ['small', 'medium', 'large'] },
+    variant: {
+      control: 'select',
+      options: ['default', 'outline'],
+      description: '`default` is filled; `outline` is transparent with a border.',
+      table: { defaultValue: { summary: 'default' } },
+    },
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large'],
+      description: 'Height + horizontal padding.',
+      table: { defaultValue: { summary: 'medium' } },
+    },
+    iconStart: {
+      control: 'select',
+      options: Object.keys(iconStartMap) as IconStartKey[],
+      mapping: iconStartMap,
+      description: 'Icon rendered in the `icon-start` slot.',
+    },
+    iconEnd: {
+      control: 'select',
+      options: Object.keys(iconEndMap) as IconEndKey[],
+      mapping: iconEndMap,
+      description: 'Icon rendered in the `icon-end` slot.',
+    },
+    isIconOnly: {
+      control: 'boolean',
+      description: 'Forces 1:1 aspect ratio with minimal xs padding. Composable with any `variant`. Requires `aria-label`.',
+      table: { defaultValue: { summary: 'false' } },
+    },
+    hasPulse: {
+      control: 'boolean',
+      description: 'Adds a pulsing animation for CTA emphasis.',
+      table: { defaultValue: { summary: 'false' } },
+    },
+    disabled: { control: 'boolean' },
+    href: { control: 'text', description: 'When set, renders as `<a>` with button styling.' },
+    'aria-label': { control: 'text', description: 'Required for icon-only buttons.' },
   },
-} satisfies Meta<typeof BdsButton>;
+  args: { variant: 'default', size: 'medium' },
+};
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<BdsButtonStoryArgs>;
 
-export const Default: Story = { args: { children: 'Default', variant: 'default' } };
-export const Ghost: Story = { args: { children: 'Ghost', variant: 'ghost' } };
+export const Playground: Story = {
+  args: { children: 'Button', iconStart: 'none', iconEnd: 'none' },
+};
+
+export const Default: Story = { args: { children: 'Default' } };
+export const Outline: Story = { args: { children: 'Outline', variant: 'outline' } };
 export const Small: Story = { args: { children: 'Small', size: 'small' } };
 export const Medium: Story = { args: { children: 'Medium', size: 'medium' } };
 export const Large: Story = { args: { children: 'Large', size: 'large' } };
 export const WithPulse: Story = { args: { children: 'Pulsing', hasPulse: true } };
 export const Disabled: Story = { args: { children: 'Disabled', disabled: true } };
+export const WithIconStart: Story = { args: { children: 'Confirm', iconStart: 'check' } };
+export const WithIconEnd: Story = { args: { children: 'Continue', iconEnd: 'arrowRight' } };
+
+export const IconOnly: Story = {
+  args: {
+    isIconOnly: true,
+    'aria-label': 'Confirm',
+    children: CheckIconDefault,
+  },
+};
+
+export const IconOnlyOutline: Story = {
+  args: {
+    variant: 'outline',
+    isIconOnly: true,
+    'aria-label': 'Confirm',
+    children: CheckIconDefault,
+  },
+};
+
 export const AllVariants: Story = {
   render: () => (
     <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap', alignItems: 'center' }}>
-      {(['default', 'ghost'] as const).flatMap(v =>
+      {(['default', 'outline'] as const).flatMap(v =>
         (['small', 'medium', 'large'] as const).map(s => (
           <BdsButton key={`${v}-${s}`} variant={v} size={s}>{v} {s}</BdsButton>
         )),
@@ -58,3 +190,23 @@ export const AllVariants: Story = {
     </div>
   ),
 };
+
+export const AllIconOnly: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap', alignItems: 'center' }}>
+      {(['default', 'outline'] as const).flatMap(v =>
+        (['small', 'medium', 'large'] as const).map(s => (
+          <BdsButton
+            key={`${v}-${s}`}
+            variant={v}
+            size={s}
+            isIconOnly
+            aria-label={`${v} ${s}`}
+          >
+            {CheckIconDefault}
+          </BdsButton>
+        )),
+      )}
+    </div>
+  ),
+};

package/src/web-components/interaction/bds-button.spec.ts

@@ -92,4 +92,39 @@ describe('bds-button', () => {
     expect(a!.getAttribute('rel')).toBe('noopener');
     cleanup(el);
   });
+
+  it('applies is-icon-only class when is-icon-only is set', async () => {
+    const el = await fixture('<bds-button is-icon-only aria-label="Confirm"><svg></svg></bds-button>');
+    const btn = el.shadowRoot!.querySelector('button');
+    expect(btn!.className).toContain('is-icon-only');
+    cleanup(el);
+  });
+
+  it('does not apply is-icon-only class by default', async () => {
+    const el = await fixture('<bds-button>Click</bds-button>');
+    const btn = el.shadowRoot!.querySelector('button');
+    expect(btn!.className).not.toContain('is-icon-only');
+    cleanup(el);
+  });
+
+  it('reflects the is-icon-only attribute on the host', async () => {
+    const el = await fixture('<bds-button is-icon-only aria-label="Confirm"></bds-button>');
+    expect(el.hasAttribute('is-icon-only')).toBe(true);
+    cleanup(el);
+  });
+
+  it('composes is-icon-only with outline variant', async () => {
+    const el = await fixture('<bds-button variant="outline" is-icon-only aria-label="Confirm"></bds-button>');
+    const btn = el.shadowRoot!.querySelector('button');
+    expect(btn!.className).toContain('outline');
+    expect(btn!.className).toContain('is-icon-only');
+    cleanup(el);
+  });
+
+  it('forwards aria-label to the inner button', async () => {
+    const el = await fixture('<bds-button is-icon-only aria-label="Close"></bds-button>');
+    const btn = el.shadowRoot!.querySelector('button');
+    expect(btn!.getAttribute('aria-label')).toBe('Close');
+    cleanup(el);
+  });
 });