diff --git a/packages/plasma-new-hope/src/components/Button/Button.tsx b/packages/plasma-new-hope/src/components/Button/Button.tsx
index d801f346d8..ba8a23dbfc 100644
--- a/packages/plasma-new-hope/src/components/Button/Button.tsx
+++ b/packages/plasma-new-hope/src/components/Button/Button.tsx
@@ -2,7 +2,7 @@ import React, { forwardRef, PropsWithChildren, ReactNode } from 'react';
 import { styled } from '@linaria/react';
 import { css } from '@linaria/core';
 
-import { ComponentConfig } from '../../engines';
+import { RootProps } from '../../engines';
 import { applyEllipsis } from '../../mixins';
 
 import { base as view } from './_view/base';
@@ -63,7 +63,9 @@ export interface ButtonProps extends PropsWithChildren {
     loader?: ReactNode;
 }
 
-export const buttonRoot = (Root: any) =>
+export const buttonRoot = (
+    Root: RootProps<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement> & ButtonProps>,
+) =>
     forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
         const { children, text, contentLeft, contentRight, isLoading, loader, ...rest } = props;
         // eslint-disable-next-line no-nested-ternary
@@ -87,7 +89,7 @@ export const buttonRoot = (Root: any) =>
         );
     });
 
-export const buttonConfig: ComponentConfig = {
+export const buttonConfig = {
     name: 'Button',
     tag: 'button',
     layout: buttonRoot,
diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Button/Button.config.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Button/Button.config.ts
index 0177dd6065..3a2b61cb78 100644
--- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Button/Button.config.ts
+++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Button/Button.config.ts
@@ -1,5 +1,3 @@
-// generated by theme-builder { version } { plasma-hope-version??? }
-
 import { css } from '@linaria/core';
 
 export const config = {
diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Button/Button.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Button/Button.stories.tsx
index 988404edd8..42394eed65 100644
--- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Button/Button.stories.tsx
+++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Button/Button.stories.tsx
@@ -1,25 +1,20 @@
-// generated by theme-builder { version } { plasma-hope-version??? }
-
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
 import { buttonConfig } from '../../../../components/Button';
 import { mergeConfig } from '../../../../engines';
-import { argTypesFromConfig } from '../../../_helpers';
+import { WithTheme, argTypesFromConfig } from '../../../_helpers';
 
 import { config } from './Button.config';
 import { Button } from './Button';
 
 export default {
     title: 'plasma_b2c/Button',
+    decorators: [WithTheme],
     component: Button,
     argTypes: argTypesFromConfig(mergeConfig(buttonConfig, config)),
 } as ComponentMeta<typeof Button>;
 
 export const Default: ComponentStory<typeof Button> = (props) => {
-    return (
-        <div style={{ padding: '1rem' }}>
-            <Button {...props}>Hello</Button>
-        </div>
-    );
+    return <Button {...props}>Hello</Button>;
 };
diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Button/Button.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Button/Button.ts
index 4830a33a13..3b3aa31340 100644
--- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Button/Button.ts
+++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Button/Button.ts
@@ -1,5 +1,3 @@
-// generated by theme-builder { version } { plasma-hope-version??? }
-
 import { buttonConfig } from '../../../../components/Button';
 import { component, mergeConfig } from '../../../../engines';
 
diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Button/Button.config.ts b/packages/plasma-new-hope/src/examples/plasma_web/components/Button/Button.config.ts
new file mode 100644
index 0000000000..3a2b61cb78
--- /dev/null
+++ b/packages/plasma-new-hope/src/examples/plasma_web/components/Button/Button.config.ts
@@ -0,0 +1,189 @@
+import { css } from '@linaria/core';
+
+export const config = {
+    defaults: {
+        view: 'default',
+        focused: 'true',
+        size: 'm',
+    },
+    variations: {
+        view: {
+            default: css`
+                --plasma-button-color: var(--inverse-text-primary);
+                --plasma-button-bg-color: var(--surface-solid-default);
+                --plasma-button-color-hover: var(--inverse-text-primary);
+                --plasma-button-bg-color-hover: color-mix(
+                    in srgb,
+                    var(--inverse-text-primary),
+                    var(--surface-solid-default) 85%
+                );
+                --plasma-button-color-active: var(--inverse-text-primary);
+                --plasma-button-bg-color-active: color-mix(
+                    in srgb,
+                    var(--inverse-text-primary),
+                    var(--surface-solid-default) 80%
+                );
+            `,
+            primary: css`
+                --plasma-button-color: var(--on-dark-text-primary);
+                --plasma-button-bg-color: var(--surface-accent);
+                --plasma-button-color-hover: var(--on-dark-text-primary);
+                --plasma-button-bg-color-hover: color-mix(in srgb, var(--text-primary), var(--surface-accent) 85%);
+                --plasma-button-color-active: var(--on-dark-text-primary);
+                --plasma-button-bg-color-active: color-mix(in srgb, var(--text-primary), var(--surface-accent) 80%);
+            `,
+            secondary: css`
+                --plasma-button-color: var(--text-primary);
+                --plasma-button-bg-color: var(--surface-transparent-secondary);
+                --plasma-button-color-hover: var(--text-primary);
+                --plasma-button-bg-color-hover: color-mix(
+                    in srgb,
+                    var(--inverse-text-primary),
+                    var(--surface-transparent-secondary) 85%
+                );
+                --plasma-button-color-active: var(--text-primary);
+                --plasma-button-bg-color-active: color-mix(
+                    in srgb,
+                    var(--inverse-text-primary),
+                    var(--surface-transparent-secondary) 80%
+                );
+            `,
+            clear: css`
+                --plasma-button-color: var(--text-primary);
+                --plasma-button-bg-color: var(--surface-clear);
+                --plasma-button-color-hover: var(--text-primary);
+                --plasma-button-bg-color-hover: color-mix(in srgb, var(--text-primary), var(--surface-clear) 95%);
+                --plasma-button-color-active: var(--text-primary);
+                --plasma-button-bg-color-active: color-mix(in srgb, var(--text-primary), var(--surface-clear) 90%);
+            `,
+            positive: css`
+                --plasma-button-color: var(--on-dark-text-primary);
+                --plasma-button-bg-color: var(--surface-positive);
+                --plasma-button-color-hover: var(--on-dark-text-primary);
+                --plasma-button-bg-color-hover: color-mix(
+                    in srgb,
+                    var(--inverse-text-primary),
+                    var(--surface-positive) 85%
+                );
+                --plasma-button-color-active: var(--on-dark-text-primary);
+                --plasma-button-bg-color-active: color-mix(in srgb, var(--text-primary), var(--surface-positive) 85%);
+            `,
+            warning: css`
+                --plasma-button-color: var(--on-dark-text-primary);
+                --plasma-button-bg-color: var(--surface-warning);
+                --plasma-button-color-hover: var(--on-dark-text-primary);
+                --plasma-button-bg-color-hover: color-mix(
+                    in srgb,
+                    var(--inverse-text-primary),
+                    var(--surface-warning) 85%
+                );
+                --plasma-button-color-active: var(--on-dark-text-primary);
+                --plasma-button-bg-color-active: color-mix(in srgb, var(--text-primary), var(--surface-warning) 85%);
+            `,
+            negative: css`
+                --plasma-button-color: var(--on-dark-text-primary);
+                --plasma-button-bg-color: var(--surface-negative);
+                --plasma-button-color-hover: var(--on-dark-text-primary);
+                --plasma-button-bg-color-hover: color-mix(
+                    in srgb,
+                    var(--inverse-text-primary),
+                    var(--surface-negative) 85%
+                );
+                --plasma-button-color-active: var(--on-dark-text-primary);
+                --plasma-button-bg-color-active: color-mix(in srgb, var(--text-primary), var(--surface-negative) 85%);
+            `,
+        },
+        size: {
+            l: css`
+                --plasma-button-height: 56px;
+                --plasma-button-padding: 24px;
+                --plasma-button-radius: 14px;
+                --plasma-button-font-family: var(--plasma-typo-body-l-font-family);
+                --plasma-button-font-size: var(--plasma-typo-body-l-font-size);
+                --plasma-button-font-style: var(--plasma-typo-body-l-font-style);
+                --plasma-button-font-weight: var(--plasma-typo-body-l-bold-font-weight);
+                --plasma-button-letter-spacing: var(--plasma-typo-body-l-letter-spacing);
+                --plasma-button-line-height: var(--plasma-typo-body-l-line-height);
+            `,
+            lr: css`
+                --plasma-button-height: 56px;
+                --plasma-button-font-family: var(--plasma-typo-body-l-font-family);
+                --plasma-button-font-size: var(--plasma-typo-body-l-font-size);
+                --plasma-button-font-style: var(--plasma-typo-body-l-font-style);
+                --plasma-button-font-weight: var(--plasma-typo-body-l-bold-font-weight);
+                --plasma-button-letter-spacing: var(--plasma-typo-body-l-letter-spacing);
+                --plasma-button-line-height: var(--plasma-typo-body-l-line-height);
+            `,
+            m: css`
+                --plasma-button-height: 48px;
+                --plasma-button-padding: 20px;
+                --plasma-button-radius: 12px;
+                --plasma-button-font-family: var(--plasma-typo-body-m-font-family);
+                --plasma-button-font-size: var(--plasma-typo-body-m-font-size);
+                --plasma-button-font-style: var(--plasma-typo-body-m-font-style);
+                --plasma-button-font-weight: var(--plasma-typo-body-m-bold-font-weight);
+                --plasma-button-letter-spacing: var(--plasma-typo-body-m-letter-spacing);
+                --plasma-button-line-height: var(--plasma-typo-body-m-line-height);
+            `,
+            mr: css`
+                --plasma-button-height: 48px;
+                --plasma-button-font-family: var(--plasma-typo-body-m-font-family);
+                --plasma-button-font-size: var(--plasma-typo-body-m-font-size);
+                --plasma-button-font-style: var(--plasma-typo-body-m-font-style);
+                --plasma-button-font-weight: var(--plasma-typo-body-m-bold-font-weight);
+                --plasma-button-letter-spacing: var(--plasma-typo-body-m-letter-spacing);
+                --plasma-button-line-height: var(--plasma-typo-body-m-line-height);
+            `,
+            s: css`
+                --plasma-button-height: 40px;
+                --plasma-button-padding: 16px;
+                --plasma-button-radius: 10px;
+                --plasma-button-font-family: var(--plasma-typo-body-s-font-family);
+                --plasma-button-font-size: var(--plasma-typo-body-s-font-size);
+                --plasma-button-font-style: var(--plasma-typo-body-s-font-style);
+                --plasma-button-font-weight: var(--plasma-typo-body-s-bold-font-weight);
+                --plasma-button-letter-spacing: var(--plasma-typo-body-s-letter-spacing);
+                --plasma-button-line-height: var(--plasma-typo-body-s-line-height);
+            `,
+            sr: css`
+                --plasma-button-height: 40px;
+                --plasma-button-font-family: var(--plasma-typo-body-s-font-family);
+                --plasma-button-font-size: var(--plasma-typo-body-s-font-size);
+                --plasma-button-font-style: var(--plasma-typo-body-s-font-style);
+                --plasma-button-font-weight: var(--plasma-typo-body-s-bold-font-weight);
+                --plasma-button-letter-spacing: var(--plasma-typo-body-s-letter-spacing);
+                --plasma-button-line-height: var(--plasma-typo-body-s-line-height);
+            `,
+            xs: css`
+                --plasma-button-height: 32px;
+                --plasma-button-padding: 12px;
+                --plasma-button-radius: 8px;
+                --plasma-button-font-family: var(--plasma-typo-body-xs-font-family);
+                --plasma-button-font-size: var(--plasma-typo-body-xs-font-size);
+                --plasma-button-font-style: var(--plasma-typo-body-xs-font-style);
+                --plasma-button-font-weight: var(--plasma-typo-body-xs-bold-font-weight);
+                --plasma-button-letter-spacing: var(--plasma-typo-body-xs-letter-spacing);
+                --plasma-button-line-height: var(--plasma-typo-body-xs-line-height);
+            `,
+            xsr: css`
+                --plasma-button-height: 32px;
+                --plasma-button-font-family: var(--plasma-typo-body-xs-font-family);
+                --plasma-button-font-size: var(--plasma-typo-body-xs-font-size);
+                --plasma-button-font-style: var(--plasma-typo-body-xs-font-style);
+                --plasma-button-font-weight: var(--plasma-typo-body-xs-bold-font-weight);
+                --plasma-button-letter-spacing: var(--plasma-typo-body-xs-letter-spacing);
+                --plasma-button-line-height: var(--plasma-typo-body-xs-line-height);
+            `,
+        },
+        disabled: {
+            true: css`
+                --plasma-button-disabled-opacity: 0.4;
+            `,
+        },
+        focused: {
+            true: css`
+                --plasma-button-focus-color: var(--surface-accent);
+            `,
+        },
+    },
+};
diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Button/Button.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_web/components/Button/Button.stories.tsx
new file mode 100644
index 0000000000..35e24a85eb
--- /dev/null
+++ b/packages/plasma-new-hope/src/examples/plasma_web/components/Button/Button.stories.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { buttonConfig } from '../../../../components/Button';
+import { mergeConfig } from '../../../../engines';
+import { WithTheme, argTypesFromConfig } from '../../../_helpers';
+
+import { config } from './Button.config';
+import { Button } from './Button';
+
+export default {
+    title: 'plasma_web/Button',
+    decorators: [WithTheme],
+    component: Button,
+    argTypes: argTypesFromConfig(mergeConfig(buttonConfig, config)),
+} as ComponentMeta<typeof Button>;
+
+export const Default: ComponentStory<typeof Button> = (props) => {
+    return <Button {...props}>Hello</Button>;
+};
diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Button/Button.ts b/packages/plasma-new-hope/src/examples/plasma_web/components/Button/Button.ts
new file mode 100644
index 0000000000..3b3aa31340
--- /dev/null
+++ b/packages/plasma-new-hope/src/examples/plasma_web/components/Button/Button.ts
@@ -0,0 +1,8 @@
+import { buttonConfig } from '../../../../components/Button';
+import { component, mergeConfig } from '../../../../engines';
+
+import { config } from './Button.config';
+
+const mergedConfig = mergeConfig(buttonConfig, config);
+
+export const Button = component(mergedConfig);