diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/button/properties.md b/packages/dnb-design-system-portal/src/docs/uilib/components/button/properties.md index b7187ab1e4e..e7b09d252b5 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/button/properties.md +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/button/properties.md @@ -16,6 +16,7 @@ showTabs: true | `icon_size` | _(optional)_ define icon width and height. Defaults to 16px | | `class` | _(optional)_ any extra modifying class. | | `href` | _(optional)_ if you want the button to behave as a link. Use with caution! A link should normally visually be a link and not a button. | +| `target` | _(optional)_ When button behaves as a link. Used to specifiy where to open the linked document, specified by `href`. Possible values are `_self`, `_blank`, `_parent` and `_top`. | | `to` | _(optional)_ use this prop only if you are using a router Link component as the `element` that uses the `to` property to declare the navigation url. | | `wrap` | _(optional)_ if set to `true` the button text will wrap in to new lines if the overflow point is reached. Defaults to `false`. | | `stretch` | _(optional)_ set it to `true` in order to stretch the button to the available space. Defaults to false. | diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap index 87556cb1511..9fd887d8e71 100644 --- a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap +++ b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap @@ -696,6 +696,7 @@ exports[`Autocomplete markup have to match snapshot 1`] = ` status_props={null} status_state="error" stretch={null} + target={null} text={null} title={null} to={null} @@ -753,6 +754,7 @@ exports[`Autocomplete markup have to match snapshot 1`] = ` status_props={null} status_state="error" stretch={null} + target={null} text={null} title={null} to={null} diff --git a/packages/dnb-eufemia/src/components/button/Button.d.ts b/packages/dnb-eufemia/src/components/button/Button.d.ts index 3235d13ea7b..4c5b7e24a77 100644 --- a/packages/dnb-eufemia/src/components/button/Button.d.ts +++ b/packages/dnb-eufemia/src/components/button/Button.d.ts @@ -150,6 +150,11 @@ export type ButtonProps = { */ href?: string; + /** + * When button behaves as a link. Used to specifiy where to open the linked document, specified by `href`. Possible values are `_self`, `_blank`, `_parent` and `_top`. + */ + target?: string; + /** * Use this prop only if you are using a router Link component as the `element` that uses the `to` property to declare the navigation url. */ diff --git a/packages/dnb-eufemia/src/components/button/Button.js b/packages/dnb-eufemia/src/components/button/Button.js index 4c918c93967..b5b30c30671 100644 --- a/packages/dnb-eufemia/src/components/button/Button.js +++ b/packages/dnb-eufemia/src/components/button/Button.js @@ -310,6 +310,7 @@ Button.propTypes = { id: PropTypes.string, class: PropTypes.string, href: PropTypes.string, + target: PropTypes.string, to: PropTypes.oneOfType([ PropTypes.string, PropTypes.object, @@ -354,6 +355,7 @@ Button.defaultProps = { icon_position: 'right', icon_size: null, href: null, + target: null, to: null, id: null, class: null, diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.js.snap b/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.js.snap index 68c639ea9db..93c3713a86d 100644 --- a/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.js.snap +++ b/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.js.snap @@ -21,6 +21,7 @@ exports[`Button component have to match default button snapshot 1`] = ` "current":