diff --git a/website/screens/components/status-light/code/StatusLightCodePage.tsx b/website/screens/components/status-light/code/StatusLightCodePage.tsx
index 4a70bfb26..c0d91772a 100644
--- a/website/screens/components/status-light/code/StatusLightCodePage.tsx
+++ b/website/screens/components/status-light/code/StatusLightCodePage.tsx
@@ -3,6 +3,8 @@ import QuickNavContainer from "@/common/QuickNavContainer";
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import DocFooter from "@/common/DocFooter";
import TableCode from "@/common/TableCode";
+import Example from "@/common/example/Example";
+import basicUsage from "./examples/basicUsage";
const sections = [
{
@@ -38,9 +40,7 @@ const sections = [
string
|
-
- An auxiliar text that will add some context to the status.
- |
+ An auxiliar text that will add some context to the status. |
- |
@@ -52,7 +52,9 @@ const sections = [
Size of the component. Should be defined based on its importance
and/or available space.
- 'medium' |
+
+ 'medium'
+ |
@@ -62,8 +64,8 @@ const sections = [
title: "Examples",
subSections: [
{
- title: "Basic Usage",
- content: Examples are not available yet, they will be added soon.
+ title: "Basic usage",
+ content: ,
},
],
},
diff --git a/website/screens/components/status-light/code/examples/basicUsage.ts b/website/screens/components/status-light/code/examples/basicUsage.ts
new file mode 100644
index 000000000..df4c36897
--- /dev/null
+++ b/website/screens/components/status-light/code/examples/basicUsage.ts
@@ -0,0 +1,19 @@
+import {
+ DxcStatusLight,
+ DxcInset,
+} from "@dxc-technology/halstack-react";
+
+const code = `() => {
+ return (
+
+
+
+ );
+ }`;
+
+const scope = {
+ DxcInset,
+ DxcStatusLight,
+};
+
+export default { code, scope };