[material-ui][Button] Add target attribute to types

docs/pages/material-ui/api/button.json

@@ -32,6 +32,7 @@
       },
       "additionalInfo": { "sx": true }
     },
+    "target": { "type": { "name": "string" } },
     "variant": {
       "type": {
         "name": "union",

docs/translations/api-docs/button/button.json

@@ -31,6 +31,9 @@
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
     },
+    "target": {
+      "description": "The target attribute for links. Specifies where the linked document will open when clicked."
+    },
     "variant": { "description": "The variant to use." }
   },
   "classDescriptions": {

packages/mui-material/src/Button/Button.d.ts

@@ -60,6 +60,11 @@ export interface ButtonOwnProps {
    * If defined, an `a` element will be used as the root node.
    */
   href?: string;
+  /**
+   * The target attribute for links.
+   * Specifies where the linked document will open when clicked.
+   */
+  target?: string;
   /**
    * The size of the component.
    * `small` is equivalent to the dense button styling.

packages/mui-material/src/Button/Button.js

@@ -463,6 +463,11 @@ Button.propTypes /* remove-proptypes */ = {
     PropTypes.func,
     PropTypes.object,
   ]),
+  /**
+   * The target attribute for links.
+   * Specifies where the linked document will open when clicked.
+   */
+  target: PropTypes.string,
   /**
    * @ignore
    */

packages/mui-material/src/Button/Button.spec.tsx

@@ -77,7 +77,9 @@ const buttonTest = () => (
     <Button component={CustomLink} to="/some-route">
       Link
     </Button>
-    <Button href="/open-collective">Link</Button>
+    <Button href="/open-collective" target="_blank">
+      Link with target _blank
+    </Button>
     {/* By default the underlying component is a button element */}
     <Button
       ref={(elem) => {

packages/mui-material/src/Button/Button.test.js

@@ -631,14 +631,26 @@ describe('<Button />', () => {
     });
   });
 
-  it('should automatically change the button to an anchor element when href is provided', () => {
-    const { container } = render(<Button href="https://google.com">Hello</Button>);
-    const button = container.firstChild;
-
-    expect(button).to.have.property('nodeName', 'A');
-    expect(button).not.to.have.attribute('role');
-    expect(button).not.to.have.attribute('type');
-    expect(button).to.have.attribute('href', 'https://google.com');
+  describe('as a link', () => {
+    it('should automatically change the button to an anchor element when href is provided', () => {
+      const { container } = render(<Button href="https://google.com">Hello</Button>);
+      const button = container.firstChild;
+
+      expect(button).to.have.property('nodeName', 'A');
+      expect(button).not.to.have.attribute('role');
+      expect(button).not.to.have.attribute('type');
+      expect(button).to.have.attribute('href', 'https://google.com');
+    });
+
+    it('should render a button with target attribute', () => {
+      const { container } = render(
+        <Button target="_blank" href="https://google.com">
+          Hello
+        </Button>,
+      );
+      const button = container.firstChild;
+      expect(button).to.have.attribute('target', '_blank');
+    });
   });
 
   it('should forward classes to ButtonBase', () => {