diff --git a/modules/widgets/src/compass-widget.tsx b/modules/widgets/src/compass-widget.tsx
index 8ba1feace90..1c2275ca2fa 100644
--- a/modules/widgets/src/compass-widget.tsx
+++ b/modules/widgets/src/compass-widget.tsx
@@ -49,13 +49,16 @@ export class CompassWidget implements Widget<CompassWidgetProps> {
   element?: HTMLDivElement;
 
   constructor(props: CompassWidgetProps) {
-    this.id = props.id || 'compass';
-    this.viewId = props.viewId || null;
-    this.placement = props.placement || 'top-left';
-    props.transitionDuration = props.transitionDuration || 200;
-    props.label = props.label || 'Compass';
-    props.style = props.style || {};
-    this.props = props;
+    this.id = props.id ?? this.id;
+    this.viewId = props.viewId ?? this.viewId;
+    this.placement = props.placement ?? this.placement;
+
+    this.props = {
+      ...props,
+      transitionDuration: props.transitionDuration ?? 200,
+      label: props.label ?? 'Reset Compass',
+      style: props.style ?? {}
+    };
   }
 
   setProps(props: Partial<CompassWidgetProps>) {
@@ -125,7 +128,7 @@ export class CompassWidget implements Widget<CompassWidgetProps> {
               this.handleCompassReset(viewport);
             }
           }}
-          label={this.props.label}
+          title={this.props.label}
           style={{transform: `rotateX(${rx}deg)`}}
         >
           <svg fill="none" width="100%" height="100%" viewBox="0 0 26 26">
diff --git a/modules/widgets/src/fullscreen-widget.tsx b/modules/widgets/src/fullscreen-widget.tsx
index 59f7a78245f..578aafd05c2 100644
--- a/modules/widgets/src/fullscreen-widget.tsx
+++ b/modules/widgets/src/fullscreen-widget.tsx
@@ -50,12 +50,15 @@ export class FullscreenWidget implements Widget<FullscreenWidgetProps> {
   fullscreen: boolean = false;
 
   constructor(props: FullscreenWidgetProps) {
-    this.id = props.id || 'fullscreen';
-    this.placement = props.placement || 'top-left';
-    props.enterLabel = props.enterLabel || 'Enter Fullscreen';
-    props.exitLabel = props.exitLabel || 'Exit Fullscreen';
-    props.style = props.style || {};
-    this.props = props;
+    this.id = props.id ?? this.id;
+    this.placement = props.placement ?? this.placement;
+
+    this.props = {
+      ...props,
+      enterLabel: props.enterLabel ?? 'Enter Fullscreen',
+      exitLabel: props.exitLabel ?? 'Exit Fullscreen',
+      style: props.style ?? {}
+    };
   }
 
   onAdd({deck}: {deck: Deck<any>}): HTMLDivElement {
diff --git a/modules/widgets/src/zoom-widget.tsx b/modules/widgets/src/zoom-widget.tsx
index 0301fa78d26..58bb34548a9 100644
--- a/modules/widgets/src/zoom-widget.tsx
+++ b/modules/widgets/src/zoom-widget.tsx
@@ -56,15 +56,18 @@ export class ZoomWidget implements Widget<ZoomWidgetProps> {
   element?: HTMLDivElement;
 
   constructor(props: ZoomWidgetProps) {
-    this.id = props.id || 'zoom';
-    this.viewId = props.viewId || null;
-    this.placement = props.placement || 'top-left';
-    props.orientation = props.orientation || 'vertical';
-    props.transitionDuration = props.transitionDuration || 200;
-    props.zoomInLabel = props.zoomInLabel || 'Zoom In';
-    props.zoomOutLabel = props.zoomOutLabel || 'Zoom Out';
-    props.style = props.style || {};
-    this.props = props;
+    this.id = props.id ?? this.id;
+    this.viewId = props.viewId ?? this.viewId;
+    this.placement = props.placement ?? this.placement;
+
+    this.props = {
+      ...props,
+      orientation: props.orientation ?? 'vertical',
+      transitionDuration: props.transitionDuration ?? 200,
+      zoomInLabel: props.zoomInLabel ?? 'Zoom In',
+      zoomOutLabel: props.zoomOutLabel ?? 'Zoom Out',
+      style: props.style ?? {}
+    };
   }
 
   onAdd({deck}: {deck: Deck<any>}): HTMLDivElement {