@boostdev/design-system-components 1.2.6 → 1.2.8

package/dist/native/index.cjs

@@ -36,6 +36,7 @@ __export(native_exports, {
   Badge: () => Badge,
   Breadcrumb: () => Breadcrumb,
   Button: () => Button,
+  ButtonContainer: () => ButtonContainer,
   ButtonGroup: () => ButtonGroup,
   Calendar: () => Calendar,
   Card: () => Card,
@@ -2096,7 +2097,7 @@ var styles23 = import_react_native26.StyleSheet.create({
     gap: import_native.spacing.xs
   }
 });
-function ButtonGroup({ children, variant, accessibilityLabel, style }) {
+function ButtonContainer({ children, variant, accessibilityLabel, style }) {
   const isColumn = variant === "card" || variant === "modal";
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     import_react_native26.View,
@@ -2107,6 +2108,7 @@ function ButtonGroup({ children, variant, accessibilityLabel, style }) {
     }
   );
 }
+var ButtonGroup = ButtonContainer;
 
 // src/components/interaction/Button/Button.native.tsx
 var import_react_native27 = require("react-native");

package/dist/native/index.d.cts

@@ -268,13 +268,21 @@ interface IconWrapperProps {
 }
 declare function IconWrapper({ children, style, accessibilityElementsHidden }: IconWrapperProps): react_jsx_runtime.JSX.Element;
 
-interface ButtonGroupProps {
+interface ButtonContainerProps {
     children: ReactNode;
     variant?: 'flow' | 'card' | 'modal' | 'content';
     accessibilityLabel?: string;
     style?: StyleProp<ViewStyle>;
 }
-declare function ButtonGroup({ children, variant, accessibilityLabel, style }: ButtonGroupProps): react_jsx_runtime.JSX.Element;
+declare function ButtonContainer({ children, variant, accessibilityLabel, style }: ButtonContainerProps): react_jsx_runtime.JSX.Element;
+/**
+ * @deprecated Use `ButtonContainer` instead. `ButtonGroup` will be removed in the next major version.
+ */
+declare const ButtonGroup: typeof ButtonContainer;
+/**
+ * @deprecated Use `ButtonContainerProps` instead. `ButtonGroupProps` will be removed in the next major version.
+ */
+type ButtonGroupProps = ButtonContainerProps;
 
 type ButtonVariant = 'default' | 'outline' | 'ghost';
 type ButtonSize = 'small' | 'medium' | 'large';
@@ -561,4 +569,4 @@ interface MessageProps {
 }
 declare function Message({ message, type, style }: MessageProps): react_jsx_runtime.JSX.Element | null;
 
-export { Accordion, type AccordionItem, Alert, Avatar, Badge, Breadcrumb, type BreadcrumbItem, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Calendar, Card, Carousel, Checkbox, CheckboxGroup, Collapsible, type CollapsibleProps, Combobox, type ComboboxOption, type DescriptionItem, DescriptionList, Dialog, Drawer, DropdownMenu, type DropdownMenuItem, FileInput, FormInput, IconWrapper, type IconWrapperProps, Label, Link, Loading, Message, NotificationBanner, NumberInput, Pagination, Popover, Progress, ProgressCircle, Radio, RadioGroup, Rating, SectionHeader, SegmentedControl, Select, type SelectOption, Separator, Skeleton, Slider, Switch, type TabItem, Table, type TableColumn, Tabs, Textarea, ThemeProvider, ToastProvider, Tooltip, Typography, lineHeight, useTheme, useToast };
+export { Accordion, type AccordionItem, Alert, Avatar, Badge, Breadcrumb, type BreadcrumbItem, Button, ButtonContainer, type ButtonContainerProps, ButtonGroup, type ButtonGroupProps, type ButtonProps, Calendar, Card, Carousel, Checkbox, CheckboxGroup, Collapsible, type CollapsibleProps, Combobox, type ComboboxOption, type DescriptionItem, DescriptionList, Dialog, Drawer, DropdownMenu, type DropdownMenuItem, FileInput, FormInput, IconWrapper, type IconWrapperProps, Label, Link, Loading, Message, NotificationBanner, NumberInput, Pagination, Popover, Progress, ProgressCircle, Radio, RadioGroup, Rating, SectionHeader, SegmentedControl, Select, type SelectOption, Separator, Skeleton, Slider, Switch, type TabItem, Table, type TableColumn, Tabs, Textarea, ThemeProvider, ToastProvider, Tooltip, Typography, lineHeight, useTheme, useToast };

package/dist/native/index.d.ts

@@ -268,13 +268,21 @@ interface IconWrapperProps {
 }
 declare function IconWrapper({ children, style, accessibilityElementsHidden }: IconWrapperProps): react_jsx_runtime.JSX.Element;
 
-interface ButtonGroupProps {
+interface ButtonContainerProps {
     children: ReactNode;
     variant?: 'flow' | 'card' | 'modal' | 'content';
     accessibilityLabel?: string;
     style?: StyleProp<ViewStyle>;
 }
-declare function ButtonGroup({ children, variant, accessibilityLabel, style }: ButtonGroupProps): react_jsx_runtime.JSX.Element;
+declare function ButtonContainer({ children, variant, accessibilityLabel, style }: ButtonContainerProps): react_jsx_runtime.JSX.Element;
+/**
+ * @deprecated Use `ButtonContainer` instead. `ButtonGroup` will be removed in the next major version.
+ */
+declare const ButtonGroup: typeof ButtonContainer;
+/**
+ * @deprecated Use `ButtonContainerProps` instead. `ButtonGroupProps` will be removed in the next major version.
+ */
+type ButtonGroupProps = ButtonContainerProps;
 
 type ButtonVariant = 'default' | 'outline' | 'ghost';
 type ButtonSize = 'small' | 'medium' | 'large';
@@ -561,4 +569,4 @@ interface MessageProps {
 }
 declare function Message({ message, type, style }: MessageProps): react_jsx_runtime.JSX.Element | null;
 
-export { Accordion, type AccordionItem, Alert, Avatar, Badge, Breadcrumb, type BreadcrumbItem, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Calendar, Card, Carousel, Checkbox, CheckboxGroup, Collapsible, type CollapsibleProps, Combobox, type ComboboxOption, type DescriptionItem, DescriptionList, Dialog, Drawer, DropdownMenu, type DropdownMenuItem, FileInput, FormInput, IconWrapper, type IconWrapperProps, Label, Link, Loading, Message, NotificationBanner, NumberInput, Pagination, Popover, Progress, ProgressCircle, Radio, RadioGroup, Rating, SectionHeader, SegmentedControl, Select, type SelectOption, Separator, Skeleton, Slider, Switch, type TabItem, Table, type TableColumn, Tabs, Textarea, ThemeProvider, ToastProvider, Tooltip, Typography, lineHeight, useTheme, useToast };
+export { Accordion, type AccordionItem, Alert, Avatar, Badge, Breadcrumb, type BreadcrumbItem, Button, ButtonContainer, type ButtonContainerProps, ButtonGroup, type ButtonGroupProps, type ButtonProps, Calendar, Card, Carousel, Checkbox, CheckboxGroup, Collapsible, type CollapsibleProps, Combobox, type ComboboxOption, type DescriptionItem, DescriptionList, Dialog, Drawer, DropdownMenu, type DropdownMenuItem, FileInput, FormInput, IconWrapper, type IconWrapperProps, Label, Link, Loading, Message, NotificationBanner, NumberInput, Pagination, Popover, Progress, ProgressCircle, Radio, RadioGroup, Rating, SectionHeader, SegmentedControl, Select, type SelectOption, Separator, Skeleton, Slider, Switch, type TabItem, Table, type TableColumn, Tabs, Textarea, ThemeProvider, ToastProvider, Tooltip, Typography, lineHeight, useTheme, useToast };

package/dist/native/index.js

@@ -2045,7 +2045,7 @@ var styles23 = StyleSheet23.create({
     gap: spacing.xs
   }
 });
-function ButtonGroup({ children, variant, accessibilityLabel, style }) {
+function ButtonContainer({ children, variant, accessibilityLabel, style }) {
   const isColumn = variant === "card" || variant === "modal";
   return /* @__PURE__ */ jsx26(
     View21,
@@ -2056,6 +2056,7 @@ function ButtonGroup({ children, variant, accessibilityLabel, style }) {
     }
   );
 }
+var ButtonGroup = ButtonContainer;
 
 // src/components/interaction/Button/Button.native.tsx
 import { StyleSheet as StyleSheet24, Pressable as Pressable14, Text as Text20, View as View22 } from "react-native";
@@ -4362,6 +4363,7 @@ export {
   Badge,
   Breadcrumb,
   Button,
+  ButtonContainer,
   ButtonGroup,
   Calendar,
   Card,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boostdev/design-system-components",
-  "version": "1.2.6",
+  "version": "1.2.8",
   "description": "BoostDev React component library: accessible, token-driven components built on @boostdev/design-system-foundation",
   "keywords": [
     "React",

package/src/components/interaction/Button/Button.mdx

@@ -12,7 +12,7 @@ Primary interactive element for triggering actions. Renders as `<button>` or `<a
 - Secondary or ghost actions (`ghost`)
 - Navigation that should look like an action (`href` → renders as `<a>`)
 
-> **Form actions:** When using buttons in a form (submit, reset, cancel), always wrap them in a `ButtonGroup` component. This provides consistent spacing, alignment, and responsive layout for form actions. Use `variant="flow"` for step navigation or `variant="card"` for single-form submissions.
+> **Form actions:** When using buttons in a form (submit, reset, cancel), always wrap them in a `ButtonContainer` component. This provides consistent spacing, alignment, and responsive layout for form actions. Use `variant="flow"` for step navigation or `variant="card"` for single-form submissions.
 
 ## When not to use
 - Navigation to another page when it reads naturally as a link — use `Link` instead

package/src/components/layout/ButtonGroup/ButtonGroup.mdx

@@ -3,11 +3,13 @@ import * as Stories from './ButtonGroup.stories';
 
 <Meta of={Stories} />
 
-# ButtonGroup
+# ButtonContainer
 
-Layout wrapper that arranges `Button` children according to a contextual variant. Handles spacing, alignment, and direction.
+Layout wrapper that arranges `Button` children according to a contextual variant. Handles spacing, alignment, and direction. Takes the full width of its parent container.
 
-> **Recommended:** Always wrap buttons in a `ButtonGroup` when they appear inside a form. This ensures consistent spacing and alignment for form actions like submit, cancel, and navigation.
+> **Recommended:** Always wrap buttons in a `ButtonContainer` when they appear inside a form. This ensures consistent spacing and alignment for form actions like submit, cancel, and navigation.
+
+> **Migration:** `ButtonGroup` is deprecated in favour of `ButtonContainer`. Both names work — `ButtonGroup` is an alias that will be removed in the next major version.
 
 ## Variants
 

package/src/components/layout/ButtonGroup/ButtonGroup.module.css

@@ -3,6 +3,7 @@
     container-type: inline-size;
     container-name: button-group;
     grid-column: var(--bds-grid_span-100);
+    inline-size: 100%;
   }
 
   .buttonGroup .container {

package/src/components/layout/ButtonGroup/ButtonGroup.native.tsx

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
 import { spacing } from '../../../native/tokens';
 
-export interface ButtonGroupProps {
+export interface ButtonContainerProps {
   children: ReactNode;
   variant?: 'flow' | 'card' | 'modal' | 'content';
   accessibilityLabel?: string;
@@ -21,7 +21,7 @@ const styles = StyleSheet.create({
   },
 });
 
-export function ButtonGroup({ children, variant, accessibilityLabel, style }: ButtonGroupProps) {
+export function ButtonContainer({ children, variant, accessibilityLabel, style }: ButtonContainerProps) {
   const isColumn = variant === 'card' || variant === 'modal';
   return (
     <View
@@ -32,3 +32,13 @@ export function ButtonGroup({ children, variant, accessibilityLabel, style }: Bu
     </View>
   );
 }
+
+/**
+ * @deprecated Use `ButtonContainer` instead. `ButtonGroup` will be removed in the next major version.
+ */
+export const ButtonGroup = ButtonContainer;
+
+/**
+ * @deprecated Use `ButtonContainerProps` instead. `ButtonGroupProps` will be removed in the next major version.
+ */
+export type ButtonGroupProps = ButtonContainerProps;

package/src/components/layout/ButtonGroup/ButtonGroup.spec.tsx

@@ -1,20 +1,29 @@
 import { render, screen } from '@testing-library/react';
-import { ButtonGroup } from './ButtonGroup';
+import { ButtonContainer, ButtonGroup } from './ButtonGroup';
 
-describe('ButtonGroup', () => {
+describe('ButtonContainer', () => {
   it('renders children', () => {
     render(
-      <ButtonGroup>
+      <ButtonContainer>
         <button>A</button>
         <button>B</button>
-      </ButtonGroup>,
+      </ButtonContainer>,
     );
     expect(screen.getByText('A')).toBeInTheDocument();
     expect(screen.getByText('B')).toBeInTheDocument();
   });
 
   it('accepts a custom className', () => {
-    const { container } = render(<ButtonGroup className="custom"><button>X</button></ButtonGroup>);
+    const { container } = render(<ButtonContainer className="custom"><button>X</button></ButtonContainer>);
     expect(container.firstChild).toHaveClass('custom');
   });
+
+  it('fills the full width of its parent', () => {
+    const { container } = render(<ButtonContainer><button>X</button></ButtonContainer>);
+    expect(container.firstChild).toHaveClass('buttonGroup');
+  });
+
+  it('exports ButtonGroup as a deprecated alias', () => {
+    expect(ButtonGroup).toBe(ButtonContainer);
+  });
 });

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

@@ -1,27 +1,27 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { ButtonGroup } from './ButtonGroup';
+import { ButtonContainer } from './ButtonGroup';
 import { Button } from '../../interaction/Button';
 
 const meta = {
-  title: 'React/Layout/ButtonGroup',
-  component: ButtonGroup,
+  title: 'React/Layout/ButtonContainer',
+  component: ButtonContainer,
   argTypes: {
     variant: { control: 'select', options: ['flow', 'card', 'modal', 'content', undefined] },
   },
-} satisfies Meta<typeof ButtonGroup>;
+} satisfies Meta<typeof ButtonContainer>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 const TwoButtons = () => (
   <>
-    <Button variant="ghost">Cancel</Button>
+    <Button variant="outline">Cancel</Button>
     <Button variant="default">Confirm</Button>
   </>
 );
 
-export const Default: Story = { render: () => <ButtonGroup><TwoButtons /></ButtonGroup> };
-export const Flow: Story = { render: () => <ButtonGroup variant="flow"><TwoButtons /></ButtonGroup> };
-export const Card: Story = { render: () => <ButtonGroup variant="card"><TwoButtons /></ButtonGroup> };
-export const Modal: Story = { render: () => <ButtonGroup variant="modal"><TwoButtons /></ButtonGroup> };
-export const Content: Story = { render: () => <ButtonGroup variant="content"><TwoButtons /></ButtonGroup> };
+export const Default: Story = { render: () => <ButtonContainer><TwoButtons /></ButtonContainer> };
+export const Flow: Story = { render: () => <ButtonContainer variant="flow"><TwoButtons /></ButtonContainer> };
+export const Card: Story = { render: () => <ButtonContainer variant="card"><TwoButtons /></ButtonContainer> };
+export const Modal: Story = { render: () => <ButtonContainer variant="modal"><TwoButtons /></ButtonContainer> };
+export const Content: Story = { render: () => <ButtonContainer variant="content"><TwoButtons /></ButtonContainer> };

package/src/components/layout/ButtonGroup/ButtonGroup.tsx

@@ -3,11 +3,11 @@ import css from './ButtonGroup.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
-export interface ButtonGroupProps extends WithClassName, HTMLAttributes<HTMLDivElement> {
+export interface ButtonContainerProps extends WithClassName, HTMLAttributes<HTMLDivElement> {
   variant?: 'flow' | 'card' | 'modal' | 'content';
 }
 
-export function ButtonGroup({ children, className, variant, ...rest }: ButtonGroupProps) {
+export function ButtonContainer({ children, className, variant, ...rest }: ButtonContainerProps) {
   return (
     <div
       {...rest}
@@ -18,3 +18,13 @@ export function ButtonGroup({ children, className, variant, ...rest }: ButtonGro
     </div>
   );
 }
+
+/**
+ * @deprecated Use `ButtonContainer` instead. `ButtonGroup` will be removed in the next major version.
+ */
+export const ButtonGroup = ButtonContainer;
+
+/**
+ * @deprecated Use `ButtonContainerProps` instead. `ButtonGroupProps` will be removed in the next major version.
+ */
+export type ButtonGroupProps = ButtonContainerProps;

package/src/components/layout/ButtonGroup/index.ts

@@ -1,2 +1,2 @@
-export { ButtonGroup } from './ButtonGroup';
-export type { ButtonGroupProps } from './ButtonGroup';
+export { ButtonContainer, ButtonGroup } from './ButtonGroup';
+export type { ButtonContainerProps, ButtonGroupProps } from './ButtonGroup';

package/src/components/layout/Card/Card.mdx

@@ -5,7 +5,7 @@ import * as Stories from './Card.stories';
 
 # Card
 
-Contained surface for grouping related content. Three visual variants provide different levels of elevation. When `onClick` is supplied, renders as a `<button>`.
+Contained surface for grouping related content. Three visual variants provide different levels of elevation. When `onClick` is supplied, renders as a `<button>`. Use the `as` prop to render as any element or component (e.g. `<a>`, `<section>`, or a Next.js `Link`).
 
 ## When to use
 - Group content that belongs together (product listing, profile summary, dashboard widget)
@@ -31,6 +31,12 @@ Contained surface for grouping related content. Three visual variants provide di
 ### Clickable
 <Canvas of={Stories.Clickable} />
 
+### As a link
+<Canvas of={Stories.AsLink} />
+
+### As a section
+<Canvas of={Stories.AsSection} />
+
 ## Props
 
 <ArgTypes of={Stories} />
@@ -45,6 +51,7 @@ Contained surface for grouping related content. Three visual variants provide di
 <tbody>
 <tr><td>`--card_color`</td><td>`var(--bds-color_bg)`</td><td>Card background colour</td></tr>
 <tr><td>`--card_on-color`</td><td>`var(--bds-color_on-bg)`</td><td>Card text colour</td></tr>
+<tr><td>`--card_padding`</td><td>varies by `padding` prop</td><td>Card padding (overrides the variant default)</td></tr>
 <tr><td>`--card_border`</td><td>`none`</td><td>Border (outlined variant)</td></tr>
 <tr><td>`--card_shadow--clickable-hover`</td><td>`var(--bds-shadow_xl)`</td><td>Box shadow on hover for clickable cards</td></tr>
 <tr><td>`--card_shadow--default-hover`</td><td>`var(--bds-shadow_m)`</td><td>Box shadow on hover for default variant</td></tr>
@@ -58,4 +65,5 @@ Contained surface for grouping related content. Three visual variants provide di
 
 - Static card renders as `<div>` — no interactive role
 - Clickable card renders as `<button>` — keyboard and screen reader accessible
+- When using `as="a"`, provide a valid `href`; when using a router `Link`, ensure it forwards `className` and `children`
 - Ensure clickable cards have a meaningful accessible name (via visible text content)

package/src/components/layout/Card/Card.module.css

@@ -27,19 +27,23 @@
   }
 
   .card.--padding-none {
-    padding: 0;
+    padding: var(--card_padding, 0);
   }
 
   .card.--padding-small {
-    padding: var(--bds-space_s);
+    padding: var(--card_padding, var(--bds-space_s));
   }
 
   .card.--padding-medium {
-    padding: var(--bds-space_m);
+    padding: var(--card_padding, var(--bds-space_m));
   }
 
   .card.--padding-large {
-    padding: var(--bds-space_l);
+    padding: var(--card_padding, var(--bds-space_l));
+  }
+
+  .card.--padding-extra-large {
+    padding: var(--card_padding, var(--bds-space_xl));
   }
 
   .card.--text-start {

package/src/components/layout/Card/Card.spec.tsx

@@ -30,4 +30,34 @@ describe('Card', () => {
     const { container } = render(<Card className="custom">Content</Card>);
     expect(container.firstChild).toHaveClass('custom');
   });
+
+  it('renders as a custom element via the as prop', () => {
+    const { container } = render(<Card as="section">Section card</Card>);
+    expect(container.firstChild?.nodeName).toBe('SECTION');
+  });
+
+  it('renders as an anchor when as="a"', () => {
+    render(<Card as="a" href="/details">Link card</Card>);
+    const link = screen.getByRole('link');
+    expect(link).toHaveAttribute('href', '/details');
+  });
+
+  it('renders as a custom component via the as prop', () => {
+    const CustomWrapper = ({ children, ...props }: { children: React.ReactNode; className?: string }) => (
+      <article {...props} data-testid="custom">{children}</article>
+    );
+    render(<Card as={CustomWrapper}>Custom</Card>);
+    expect(screen.getByTestId('custom')).toBeInTheDocument();
+    expect(screen.getByTestId('custom').nodeName).toBe('ARTICLE');
+  });
+
+  it('prefers as prop over onClick button fallback', () => {
+    const { container } = render(<Card as="div" onClick={() => {}}>Content</Card>);
+    expect(container.firstChild?.nodeName).toBe('DIV');
+  });
+
+  it('renders the extra-large padding variant', () => {
+    const { container } = render(<Card padding="extra-large">Content</Card>);
+    expect(container.firstChild).toHaveClass('--padding-extra-large');
+  });
 });

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

@@ -6,7 +6,7 @@ const meta = {
   component: Card,
   argTypes: {
     variant: { control: 'select', options: ['default', 'elevated', 'outlined'] },
-    padding: { control: 'select', options: ['none', 'small', 'medium', 'large'] },
+    padding: { control: 'select', options: ['none', 'small', 'medium', 'large', 'extra-large'] },
     textAlign: { control: 'select', options: ['start', 'center', 'end'] },
   },
 } satisfies Meta<typeof Card>;
@@ -18,6 +18,8 @@ export const Default: Story = { args: { children: 'Card content', variant: 'defa
 export const Elevated: Story = { args: { children: 'Elevated card', variant: 'elevated' } };
 export const Outlined: Story = { args: { children: 'Outlined card', variant: 'outlined' } };
 export const Clickable: Story = { args: { children: 'Click me', onClick: () => alert('clicked') } };
+export const AsLink: Story = { args: { children: 'Card as link', as: 'a', href: '#' } as Record<string, unknown> };
+export const AsSection: Story = { args: { children: 'Card as section', as: 'section' } as Record<string, unknown> };
 export const Centered: Story = { args: { children: 'Centered', textAlign: 'center' } };
 export const AllVariants: Story = {
   args: { children: '' },

package/src/components/layout/Card/Card.tsx

@@ -1,23 +1,27 @@
-import { HTMLAttributes } from 'react';
+import { ElementType, ComponentPropsWithoutRef } from 'react';
 import css from './Card.module.css';
 import { cn } from '@boostdev/design-system-foundation';
 import type { WithClassName } from '../../../types';
 
-interface CardProps extends WithClassName, HTMLAttributes<HTMLElement> {
+type CardOwnProps = WithClassName & {
   variant?: 'default' | 'elevated' | 'outlined';
-  padding?: 'none' | 'small' | 'medium' | 'large';
+  padding?: 'none' | 'small' | 'medium' | 'large' | 'extra-large';
   textAlign?: 'start' | 'center' | 'end';
-}
+  as?: ElementType;
+};
+
+type CardProps<C extends ElementType = 'div'> = CardOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof CardOwnProps>;
 
-export function Card({
+export function Card<C extends ElementType = 'div'>({
   children,
   className,
   variant = 'default',
   padding = 'medium',
   textAlign = 'start',
+  as,
   onClick,
   ...rest
-}: CardProps) {
+}: CardProps<C>) {
   const classNames = cn(
     css.card,
     css[`--${variant}`],
@@ -27,14 +31,14 @@ export function Card({
     className,
   );
 
-  const Component = onClick ? 'button' : 'div';
+  const Component = as ?? (onClick ? 'button' : 'div');
 
   return (
     <Component
       {...rest}
       className={classNames}
       onClick={onClick}
-      {...(onClick && { type: 'button' as const })}
+      {...(!as && onClick && { type: 'button' as const })}
     >
       {children}
     </Component>

package/src/index.ts

@@ -64,8 +64,8 @@ export { Switch } from './components/interaction/form/Switch';
 export { Textarea } from './components/interaction/form/Textarea';
 
 // Layout
-export { ButtonGroup } from './components/layout/ButtonGroup';
-export type { ButtonGroupProps } from './components/layout/ButtonGroup';
+export { ButtonContainer, ButtonGroup } from './components/layout/ButtonGroup';
+export type { ButtonContainerProps, ButtonGroupProps } from './components/layout/ButtonGroup';
 export { Card } from './components/layout/Card';
 export { SectionHeader } from './components/layout/SectionHeader';
 export { IconWrapper } from './components/layout/IconWrapper';

package/src/native.ts

@@ -39,8 +39,8 @@ export { Card } from './components/layout/Card/Card.native';
 export { SectionHeader } from './components/layout/SectionHeader/SectionHeader.native';
 export { IconWrapper } from './components/layout/IconWrapper/IconWrapper.native';
 export type { IconWrapperProps } from './components/layout/IconWrapper/IconWrapper.native';
-export { ButtonGroup } from './components/layout/ButtonGroup/ButtonGroup.native';
-export type { ButtonGroupProps } from './components/layout/ButtonGroup/ButtonGroup.native';
+export { ButtonContainer, ButtonGroup } from './components/layout/ButtonGroup/ButtonGroup.native';
+export type { ButtonContainerProps, ButtonGroupProps } from './components/layout/ButtonGroup/ButtonGroup.native';
 
 // Interaction
 export { Button } from './components/interaction/Button/Button.native';