diff --git a/src/playground/dialog/dialog-showcase.component.ts b/src/playground/dialog/dialog-showcase.component.ts
index 4ea34b9500..17eab6b4f4 100644
--- a/src/playground/dialog/dialog-showcase.component.ts
+++ b/src/playground/dialog/dialog-showcase.component.ts
@@ -34,7 +34,7 @@ export class NbShowcaseDialogComponent {
 
 @Component({
   selector: 'nb-dialog-showcase',
-  template: '<button class="btn btn-primary" (click)="open()">Open Dialog</button>',
+  template: '<button nbButton (click)="open()">Open Dialog</button>',
   styles: [` /deep/ nb-layout-column {
     height: 80vw;
   } `],
diff --git a/src/playground/dialog/dialog-template.component.ts b/src/playground/dialog/dialog-template.component.ts
index c96d6a9a4e..bbcc436d03 100644
--- a/src/playground/dialog/dialog-template.component.ts
+++ b/src/playground/dialog/dialog-template.component.ts
@@ -14,7 +14,7 @@ import { NbDialogService } from '@nebular/theme';
         </nb-card-footer>
       </nb-card>
     </ng-template>
-    <button class="btn btn-primary" (click)="open(dialog)">Open Dialog</button>
+    <button nbButton (click)="open(dialog)">Open Dialog</button>
   `,
   styles: [`
     /deep/ nb-layout-column {
diff --git a/src/playground/toastr/toastr-positions.component.ts b/src/playground/toastr/toastr-positions.component.ts
index aff699d0e7..5e7f431422 100644
--- a/src/playground/toastr/toastr-positions.component.ts
+++ b/src/playground/toastr/toastr-positions.component.ts
@@ -4,14 +4,14 @@ import { NbToastrService } from '@nebular/theme';
 @Component({
   selector: 'nb-toastr-positions',
   template: `
-    <button class="btn btn-primary" (click)="showToast('top-right')">Top Right</button>
-    <button class="btn btn-primary" (click)="showToast('bottom-right')">Bottom Right</button>
-    <button class="btn btn-primary" (click)="showToast('top-left')">Top Left</button>
-    <button class="btn btn-primary" (click)="showToast('bottom-left')">Bottom Left</button>
-    <button class="btn btn-primary" (click)="showToast('top-end')">Top End</button>
-    <button class="btn btn-primary" (click)="showToast('bottom-end')">Bottom End</button>
-    <button class="btn btn-primary" (click)="showToast('top-start')">Top Start</button>
-    <button class="btn btn-primary" (click)="showToast('bottom-start')">Bottom Start</button>
+    <button nbButton (click)="showToast('top-right')">Top Right</button>
+    <button nbButton (click)="showToast('bottom-right')">Bottom Right</button>
+    <button nbButton (click)="showToast('top-left')">Top Left</button>
+    <button nbButton (click)="showToast('bottom-left')">Bottom Left</button>
+    <button nbButton (click)="showToast('top-end')">Top End</button>
+    <button nbButton (click)="showToast('bottom-end')">Bottom End</button>
+    <button nbButton (click)="showToast('top-start')">Top Start</button>
+    <button nbButton (click)="showToast('bottom-start')">Bottom Start</button>
   `,
   styles: [
       `
diff --git a/src/playground/toastr/toastr-showcase.component.ts b/src/playground/toastr/toastr-showcase.component.ts
index b2bf7dbfa4..f457159d07 100644
--- a/src/playground/toastr/toastr-showcase.component.ts
+++ b/src/playground/toastr/toastr-showcase.component.ts
@@ -4,8 +4,8 @@ import { NbToastrService } from '@nebular/theme';
 @Component({
   selector: 'nb-toastr-showcase',
   template: `
-    <button class="btn btn-primary" (click)="showToast('top-right', 'success')">Top Right</button>
-    <button class="btn btn-primary" (click)="showToast('bottom-left', 'info')">Bottom left</button>
+    <button nbButton (click)="showToast('top-right', 'success')">Top Right</button>
+    <button nbButton (click)="showToast('bottom-left', 'info')">Bottom left</button>
   `,
   styles: [
       `