diff --git a/docs/documentation/docs/controls/Dashboard.md b/docs/documentation/docs/controls/Dashboard.md
index 83b2b50b1..eac26fdd5 100644
--- a/docs/documentation/docs/controls/Dashboard.md
+++ b/docs/documentation/docs/controls/Dashboard.md
@@ -22,6 +22,12 @@ import { WidgetSize, Dashboard } from '@pnp/spfx-controls-react/lib/Dashboard';
```TypeScript
const linkExample = { href: "#" };
+const customizedLinkExample = {
+ href: "#",
+ title: "This is a customized link!",
+ color: "red",
+ target: "_top"
+ };
const calloutItemsExample = [
{
id: "action_1",
@@ -71,7 +77,7 @@ const calloutItemsExample = [
{
title: "Card 2",
size: WidgetSize.Single,
- link: linkExample,
+ link: customizedLinkExample,
},
{
title: "Card 3",
@@ -142,6 +148,9 @@ Provides Widget link properties
| Property | Type | Required | Description |
| ---- | ---- | ---- | ---- |
| href | string | yes | Link to be opened. |
+| title | string | no | The text to display for the link, if not provided, the default text will be used. |
+| color | string | no | The color of the link, if not provided, the "default" color will be used. The available colors can be found on the [official Fluent UI documentation of the Text control](https://fluentsite.z22.web.core.windows.net/0.66.2/components/text/definition#variations-color). |
+| target | string | no | The target property value for the generated anchor tag, if not provided, the default target will be *_blank*. |
Enum `WidgetSize`
diff --git a/src/controls/dashboard/widget/IWidget.ts b/src/controls/dashboard/widget/IWidget.ts
index 5023dd36c..b25d59e67 100644
--- a/src/controls/dashboard/widget/IWidget.ts
+++ b/src/controls/dashboard/widget/IWidget.ts
@@ -96,5 +96,20 @@ export interface IWidgetBodyContent {
* Widget link
*/
export interface IWidgetLink {
+ /**
+ * Link to be opened
+ */
href: string;
+ /**
+ * The text to display for the link, if not provided, the default text will be used
+ */
+ title?: string;
+ /**
+ * The color of the link, if not provided, the "brand" color will be used. The available colors can be found on the [official Fluent UI documentation of the Text control](https://fluentsite.z22.web.core.windows.net/0.66.2/components/text/definition#variations-color)
+ */
+ color?: string;
+ /**
+ * The target for the generated anchor tag, if not provided, the default target will be _blank
+ */
+ target?: "_blank" | "_self" | "_parent" | "_top" | "framename";
}
diff --git a/src/controls/dashboard/widget/WidgetFooter.tsx b/src/controls/dashboard/widget/WidgetFooter.tsx
index 6260b4172..6b210753d 100644
--- a/src/controls/dashboard/widget/WidgetFooter.tsx
+++ b/src/controls/dashboard/widget/WidgetFooter.tsx
@@ -9,10 +9,10 @@ export const WidgetFooter = ({ widget }: { widget: IWidget }): JSX.Element => (
diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx
index f2c3dc4c5..c7fdd14ef 100644
--- a/src/webparts/controlsTest/components/ControlsTest.tsx
+++ b/src/webparts/controlsTest/components/ControlsTest.tsx
@@ -903,6 +903,12 @@ export default class ControlsTest extends React.Component