diff --git a/src/components/panel/demo/index.html b/src/components/panel/demo/index.html
index 5ffdc18..96fcb77 100644
--- a/src/components/panel/demo/index.html
+++ b/src/components/panel/demo/index.html
@@ -29,14 +29,22 @@
     <h1 class="ms-font-su">uifPanel Demo | &lt;uif-panel&gt;</h1>
     <em class="ms-font-m">In order for this demo to work you must first build the library in dev mode. (gulp build-lib --dev)</em>
 
+    <p><em class="ms-font-m">Use this toggle to toggle the value of the 'uif-is-light-dismiss' property. If set to true, clicking on the overlay will close the Panel. The default value is false.</em><uif-toggle uif-label-off="isLightDismiss=false" uif-label-on="isLightDismiss=true" ng-model="isLightDismiss"/></p>
+
+
     <h2 class="ms-font-xl">Basic Usage</h2>
+
     <ng-include src="'basic.html'"></ng-include>
     <h4><i class="ms-font-m">Code:</i></h4>
     <raw src="'basic.html'"></raw>
 
     <script type="text/ng-template" id="basic.html">
       <uif-button  ng-click="vm.isOpen1 = !vm.isOpen1">Toggle Menu</uif-button>
-      <uif-panel uif-type="small" uif-is-open="vm.isOpen1" uif-show-overlay="true" uif-show-close="true">
+        <uif-panel uif-type="small"
+                   uif-is-open="vm.isOpen1"
+                   uif-show-overlay="true"
+                   uif-show-close="true"
+                   uif-is-light-dismiss="isLightDismiss">
         <uif-panel-header>Header</uif-panel-header>
         <uif-content>
         <span class="ms-font-m">Place your content in here!</span>
@@ -51,7 +59,7 @@ <h4><i class="ms-font-m">Code:</i></h4>
 
     <script type="text/ng-template" id="withcommandbar.html">
       <uif-button  ng-click="vm.isOpen2 = !vm.isOpen2">Toggle Menu</uif-button>
-      <uif-panel uif-type="large" uif-is-open="vm.isOpen2" uif-show-overlay="true">
+      <uif-panel uif-type="large" uif-is-open="vm.isOpen2" uif-show-overlay="true" uif-is-light-dismiss="isLightDismiss">
         <uif-command-bar uif-search-term="searchValue" placeholder="Search here...">
           <uif-command-bar-main uif-show-overflow='true'>
           <uif-command-bar-item>
diff --git a/src/components/panel/panelDirective.spec.ts b/src/components/panel/panelDirective.spec.ts
index 4f90b8b..e49a4b3 100644
--- a/src/components/panel/panelDirective.spec.ts
+++ b/src/components/panel/panelDirective.spec.ts
@@ -93,6 +93,83 @@ describe('panel: <uif-panel />', () => {
       expect(closeButton).toHaveAttr('type', 'button');
     });
 
+    it(
+      'clicking on the Overlay should not close the panel when no value is supplied to uif-is-light-dismiss',
+      inject(($compile: Function, $rootScope: angular.IRootScopeService) => {
+
+      $scope.isOpen = true;
+      $rootScope.$digest();
+      expect(panel).toHaveClass('is-open');
+
+      // attempt to close the panel by clicking on the background overlay
+      panel.find('.ms-Overlay.ms-Overlay--dark').trigger('click');
+      $rootScope.$digest();
+      this.$timeoutservice.flush();
+      expect($scope.isOpen).toEqual(true);
+    }));
+
+  });
+
+  describe('Tests for uif-is-light-dismiss attribute boolean value', () => {
+
+    let panel: JQuery;
+    let $scope: any;
+
+    afterEach(() => {
+      this.$timeoutservice.verifyNoPendingTasks();
+    });
+
+    beforeEach(inject(($rootScope: angular.IRootScopeService, $compile: Function, $timeout: angular.ITimeoutService) => {
+
+      $scope = $rootScope;
+      this.$timeoutservice = $timeout;
+      $scope.isOpen = true;
+      $scope.isLightDismiss = false;
+
+      panel = $compile(`<uif-panel uif-type="small" uif-is-open="isOpen" uif-show-overlay="true" uif-show-close="true" 
+                          uif-is-light-dismiss="isLightDismiss">
+                              <uif-panel-header>Header</uif-panel-header>
+                              <uif-content>
+                              <span class="ms-font-m">Place your content in here!</span>
+                              </uif-content>
+                            </uif-panel>
+                    `)($scope);
+      $scope.$digest();
+      $('body').append(panel);
+      panel = jQuery(panel[0]);
+    }));
+
+    it(
+      'clicking on the Overlay should not close the panel when uif-is-light-dismiss is false',
+      inject(($compile: Function, $rootScope: angular.IRootScopeService) => {
+
+      $scope.isOpen = true;
+      $rootScope.$digest();
+      expect(panel).toHaveClass('is-open');
+
+      // attempt to close the panel by clicking on the background overlay
+      panel.find('.ms-Overlay.ms-Overlay--dark').trigger('click');
+      $rootScope.$digest();
+      this.$timeoutservice.flush();
+      expect($scope.isOpen).toEqual(true);
+    }));
+
+    it(
+      'clicking on the Overlay should close the panel when uif-is-light-dismiss is true',
+      inject(($compile: Function, $rootScope: angular.IRootScopeService) => {
+
+      $scope.isOpen = true;
+      $scope.isLightDismiss = true;
+      $rootScope.$digest();
+      expect(panel).toHaveClass('is-open');
+
+      // attempt to close the panel by clicking on the background overlay
+      panel.find('.ms-Overlay.ms-Overlay--dark').trigger('click');
+      $rootScope.$digest();
+      this.$timeoutservice.flush();
+      expect($scope.isOpen).toEqual(false);
+    }));
+
   });
 
   describe('Command bar is placed correctly', () => {
diff --git a/src/components/panel/panelDirective.ts b/src/components/panel/panelDirective.ts
index bb5202a..69a65ac 100644
--- a/src/components/panel/panelDirective.ts
+++ b/src/components/panel/panelDirective.ts
@@ -23,7 +23,7 @@ export class PanelDirective implements angular.IDirective {
   public restrict: string = 'E';
   public template: string = `<div class="ms-Panel">
                               <div  class="ms-Overlay"
-                                    ng-click="closePanel()"
+                                    ng-click="uifIsLightDismiss && closePanel()"
                                     ng-class="uifShowOverlay === true ? \'ms-Overlay--dark\' : \'\';"></div>
                               <div class="ms-Panel-main">
                                 <div class="ms-Panel-commands">
@@ -40,6 +40,7 @@ export class PanelDirective implements angular.IDirective {
   public controller: any = PanelController;
 
   public scope: {} = {
+    uifIsLightDismiss: '=',
     uifIsOpen: '=',
     uifShowClose: '=',
     uifShowOverlay: '=',
@@ -112,6 +113,7 @@ export class PanelDirective implements angular.IDirective {
  * @property {string} uifType           -   The placeholder for the search input
  */
 interface IPanelScope extends angular.IScope {
+  uifIsLightDismiss: boolean;
   uifIsOpen: boolean;
   uifType: string;
   uifShowOverlay: boolean;