Update Button examples for Snaps (#1801)

MetaMask · Jan 11, 2025 · b5839f4 · b5839f4
1 parent 594a8ff
commit b5839f4
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 7 deletions.
diff --git a/snaps/assets/custom-ui-button.png b/snaps/assets/custom-ui-button.png
diff --git a/snaps/assets/custom-ui-form.png b/snaps/assets/custom-ui-form.png
diff --git a/snaps/features/custom-ui/index.md b/snaps/features/custom-ui/index.md
@@ -589,18 +589,22 @@ Outputs a form for use in [interactive UI](interactive-ui.md).
 #### Example
 
 ```js
-import { Form, Input, Button } from "@metamask/snaps-sdk/jsx";
+import { Box, Section, Form, Input, Button } from "@metamask/snaps-sdk/jsx";
 
 const interfaceId = await snap.request({
   method: "snap_createInterface",
   params: {
     ui: (
-      <Form name="form-to-fill">
-        <Field label="First Name">
-          <Input name="firstName" placeholder="Enter your first name" />
-        </Field>
-        <Button type="submit">Submit</Button>
-      </Form>
+      <Box>
+        <Section>
+          <Form name="form-to-fill">
+            <Field label="First Name">
+              <Input name="firstName" placeholder="Enter your first name" />
+            </Field>
+            <Button type="submit">Submit</Button>
+          </Form>
+        </Section>
+      </Box>
     ),
   },
 });