diff --git a/packages/examples/packages/browserify-plugin/snap.manifest.json b/packages/examples/packages/browserify-plugin/snap.manifest.json
index 741d09c663..4fa97b9011 100644
--- a/packages/examples/packages/browserify-plugin/snap.manifest.json
+++ b/packages/examples/packages/browserify-plugin/snap.manifest.json
@@ -7,7 +7,7 @@
"url": "https://github.com/MetaMask/snaps.git"
},
"source": {
- "shasum": "d1js9Y4zJwk7n/e47V5fdMreo1FBtVKl4GtPhfckZrs=",
+ "shasum": "lyy+HECzOFQzuzjyD1nas6GPc4kMt340ChbqQZl7uEo=",
"location": {
"npm": {
"filePath": "dist/bundle.js",
diff --git a/packages/examples/packages/browserify/snap.manifest.json b/packages/examples/packages/browserify/snap.manifest.json
index e8845b1941..f21cb160da 100644
--- a/packages/examples/packages/browserify/snap.manifest.json
+++ b/packages/examples/packages/browserify/snap.manifest.json
@@ -7,7 +7,7 @@
"url": "https://github.com/MetaMask/snaps.git"
},
"source": {
- "shasum": "2OhDjaajEbvT1LdHB1G/Jl9NpfRtJxYl87w1c+1eJck=",
+ "shasum": "k7NYoT8jI2E4u785PN5PoruwtjF18KNOSagNY9fS44U=",
"location": {
"npm": {
"filePath": "dist/bundle.js",
diff --git a/packages/snaps-sdk/src/jsx/components/form/Button.test.tsx b/packages/snaps-sdk/src/jsx/components/form/Button.test.tsx
index 2a1ef1f0d7..ea2238ee08 100644
--- a/packages/snaps-sdk/src/jsx/components/form/Button.test.tsx
+++ b/packages/snaps-sdk/src/jsx/components/form/Button.test.tsx
@@ -63,4 +63,23 @@ describe('Button', () => {
key: null,
});
});
+
+ it('returns a button element with a variant and loading state', () => {
+ const result = (
+
+ );
+
+ expect(result).toStrictEqual({
+ type: 'Button',
+ props: {
+ children: 'foo',
+ type: 'button',
+ variant: 'primary',
+ loading: true,
+ },
+ key: null,
+ });
+ });
});
diff --git a/packages/snaps-sdk/src/jsx/components/form/Button.ts b/packages/snaps-sdk/src/jsx/components/form/Button.ts
index e41c0e6d01..d5bf47dbab 100644
--- a/packages/snaps-sdk/src/jsx/components/form/Button.ts
+++ b/packages/snaps-sdk/src/jsx/components/form/Button.ts
@@ -16,6 +16,7 @@ import type { ImageElement } from '../Image';
* @property variant - The variant of the button, i.e., `'primary'` or
* `'destructive'`. Defaults to `'primary'`.
* @property disabled - Whether the button is disabled. Defaults to `false`.
+ * @property loading - Whether the button is loading. Defaults to `false`.
* @property form - The name of the form component to associate the button with.
*/
export type ButtonProps = {
@@ -24,6 +25,7 @@ export type ButtonProps = {
type?: 'button' | 'submit' | undefined;
variant?: 'primary' | 'destructive' | undefined;
disabled?: boolean | undefined;
+ loading?: boolean | undefined;
form?: string | undefined;
};
diff --git a/packages/snaps-sdk/src/jsx/validation.test.tsx b/packages/snaps-sdk/src/jsx/validation.test.tsx
index a341804f72..60466eadbf 100644
--- a/packages/snaps-sdk/src/jsx/validation.test.tsx
+++ b/packages/snaps-sdk/src/jsx/validation.test.tsx
@@ -164,6 +164,9 @@ describe('ButtonStruct', () => {
,
,
,
+ ,
,