diff --git a/.changeset/kind-facts-pick.md b/.changeset/kind-facts-pick.md
new file mode 100644
index 00000000..7682ec5e
--- /dev/null
+++ b/.changeset/kind-facts-pick.md
@@ -0,0 +1,5 @@
+---
+'@drivenets/design-system': patch
+---
+
+Make `DsButtonV3` `size` prop responsive
diff --git a/packages/design-system/src/components/ds-button-v3/ds-button-v3.stories.module.scss b/packages/design-system/src/components/ds-button-v3/ds-button-v3.stories.module.scss
index 9bf55707..8db72cb1 100644
--- a/packages/design-system/src/components/ds-button-v3/ds-button-v3.stories.module.scss
+++ b/packages/design-system/src/components/ds-button-v3/ds-button-v3.stories.module.scss
@@ -83,3 +83,9 @@
.onDarkColumnHeader {
color: var(--secondary-300);
}
+
+.responsiveRow {
+ display: flex;
+ align-items: center;
+ gap: var(--sm);
+}
diff --git a/packages/design-system/src/components/ds-button-v3/ds-button-v3.stories.tsx b/packages/design-system/src/components/ds-button-v3/ds-button-v3.stories.tsx
index 5b830ff7..597bd0ca 100644
--- a/packages/design-system/src/components/ds-button-v3/ds-button-v3.stories.tsx
+++ b/packages/design-system/src/components/ds-button-v3/ds-button-v3.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
import classNames from 'classnames';
import { fn } from 'storybook/test';
import DsButtonV3 from './ds-button-v3';
+import { DsButtonV3 as DsButtonV3Wrapped } from './index';
import {
type ButtonV3Color,
buttonV3Colors,
@@ -231,3 +232,22 @@ export const MatrixIcons: Story = {
),
};
+
+export const ResponsiveSize: Story = {
+ parameters: { layout: 'centered' },
+ render: () => (
+
+
+ lg: large / md: small
+
+
+
+ lg: medium / md: tiny
+
+
+
+ static: medium
+
+
+ ),
+};
diff --git a/packages/design-system/src/components/ds-button-v3/ds-button-v3.tsx b/packages/design-system/src/components/ds-button-v3/ds-button-v3.tsx
index 834ba23f..de8951c4 100644
--- a/packages/design-system/src/components/ds-button-v3/ds-button-v3.tsx
+++ b/packages/design-system/src/components/ds-button-v3/ds-button-v3.tsx
@@ -2,7 +2,7 @@ import classNames from 'classnames';
import { DsIcon, type IconSize } from '../ds-icon';
import { DsSpinner } from '../ds-spinner';
import styles from './ds-button-v3.module.scss';
-import type { ButtonV3Size, DsButtonV3Props } from './ds-button-v3.types.ts';
+import type { ButtonV3Size, DsButtonV3BaseProps } from './ds-button-v3.types.ts';
const iconSizeMap: Record = Object.freeze({
large: 'small',
@@ -25,7 +25,7 @@ const DsButtonV3 = ({
selected = false,
type = 'button',
...rest
-}: DsButtonV3Props) => {
+}: DsButtonV3BaseProps) => {
const isIconOnly = icon !== undefined && !children;
return (
diff --git a/packages/design-system/src/components/ds-button-v3/ds-button-v3.types.ts b/packages/design-system/src/components/ds-button-v3/ds-button-v3.types.ts
index 47a54711..8907e561 100644
--- a/packages/design-system/src/components/ds-button-v3/ds-button-v3.types.ts
+++ b/packages/design-system/src/components/ds-button-v3/ds-button-v3.types.ts
@@ -1,5 +1,6 @@
import type { ButtonHTMLAttributes, Ref } from 'react';
import type { IconType } from '../ds-icon';
+import type { ResponsiveValue } from '../../utils/responsive';
export const buttonV3Variants = ['primary', 'secondary', 'tertiary'] as const;
export type ButtonV3Variant = (typeof buttonV3Variants)[number];
@@ -10,7 +11,7 @@ export type ButtonV3Color = (typeof buttonV3Colors)[number];
export const buttonV3Sizes = ['large', 'medium', 'small', 'tiny'] as const;
export type ButtonV3Size = (typeof buttonV3Sizes)[number];
-export interface DsButtonV3Props extends ButtonHTMLAttributes {
+export interface DsButtonV3BaseProps extends ButtonHTMLAttributes {
ref?: Ref;
/**
@@ -47,3 +48,11 @@ export interface DsButtonV3Props extends ButtonHTMLAttributes
*/
loading?: boolean;
}
+
+export interface DsButtonV3Props extends Omit {
+ /**
+ * Size of the button. Accepts a static value or a responsive object.
+ * @default 'medium'
+ */
+ size?: ResponsiveValue;
+}
diff --git a/packages/design-system/src/components/ds-button-v3/index.ts b/packages/design-system/src/components/ds-button-v3/index.ts
index 76dd2de1..780edd3f 100644
--- a/packages/design-system/src/components/ds-button-v3/index.ts
+++ b/packages/design-system/src/components/ds-button-v3/index.ts
@@ -1,2 +1,6 @@
-export { default as DsButtonV3 } from './ds-button-v3';
+import { withResponsiveProps } from '../../utils/responsive';
+import DsButtonV3Base from './ds-button-v3';
+
+export const DsButtonV3 = withResponsiveProps(DsButtonV3Base, ['size']);
+
export * from './ds-button-v3.types';