From 657147b5280e1931dab90291bff2c55466296d85 Mon Sep 17 00:00:00 2001
From: Dmitry Nehaychik <4dmitr@gmail.com>
Date: Mon, 16 Jul 2018 14:46:07 +0300
Subject: [PATCH] feat(playground): update examples to use the new `nbButton`
 (#559)

---
 docs/app/app.module.ts                        |  2 +-
 .../components/button/button.component.scss   |  1 -
 .../accordion/accordion-toggle.component.html |  2 +-
 src/playground/menu/menu-test.component.ts    |  8 +--
 .../oauth2-password-login.component.ts        |  6 +--
 .../oauth2/oauth2-login.component.ts          |  4 +-
 src/playground/playground.module.ts           |  2 +-
 .../popover-custom-component.component.html   |  2 +-
 .../popover-custom-component.component.ts     |  1 -
 .../popover/popover-modes.component.html      |  6 +--
 .../popover/popover-placements.component.html | 12 ++---
 .../popover/popover-placements.component.ts   |  2 +-
 .../popover/popover-showcase.component.html   |  2 +-
 .../popover-template-ref.component.html       |  2 +-
 .../popover/popover-test.component.ts         | 54 +++++++++----------
 .../sidebar/sidebar-fixed.component.html      |  2 +-
 .../sidebar/sidebar-toggle.component.html     |  4 +-
 .../spinner/spinner-button.component.ts       | 14 ++---
 .../spinner/spinner-card.component.ts         |  2 +-
 .../stepper/stepper-playground.component.scss |  2 +-
 .../stepper/stepper-showcase.component.html   | 16 +++---
 .../stepper/stepper-validation.component.html | 12 ++---
 .../stepper/stepper-vertical.component.html   | 16 +++---
 23 files changed, 86 insertions(+), 88 deletions(-)

diff --git a/docs/app/app.module.ts b/docs/app/app.module.ts
index b39904e1a2..b6156054aa 100644
--- a/docs/app/app.module.ts
+++ b/docs/app/app.module.ts
@@ -40,7 +40,7 @@ const docs = require('../output.json');
     NbCheckboxModule,
     NbProgressBarModule,
     NbMenuModule.forRoot(),
-    NbThemeModule.forRoot({ name: '' }),
+    NbThemeModule.forRoot({ name: 'default' }),
     NgdThemeModule.forRoot(),
     NbSidebarModule.forRoot(),
     RouterModule.forRoot(routes, { useHash: false }),
diff --git a/src/framework/theme/components/button/button.component.scss b/src/framework/theme/components/button/button.component.scss
index e1f3f5f459..699110fdbe 100644
--- a/src/framework/theme/components/button/button.component.scss
+++ b/src/framework/theme/components/button/button.component.scss
@@ -14,7 +14,6 @@
   -moz-appearance: none;
   text-align: center;
   text-decoration: none;
-  margin: 0;
   display: inline-block;
   white-space: nowrap;
   vertical-align: middle;
diff --git a/src/playground/accordion/accordion-toggle.component.html b/src/playground/accordion/accordion-toggle.component.html
index e4beaed6f3..b258b5b53a 100644
--- a/src/playground/accordion/accordion-toggle.component.html
+++ b/src/playground/accordion/accordion-toggle.component.html
@@ -1,6 +1,6 @@
 <nb-card>
   <nb-card-body>
-    <button class="btn btn-primary" (click)="toggle()">Toggle First Item</button>
+    <button nbButton (click)="toggle()">Toggle First Item</button>
   </nb-card-body>
 </nb-card>
 
diff --git a/src/playground/menu/menu-test.component.ts b/src/playground/menu/menu-test.component.ts
index c50938aae3..401dd21d12 100644
--- a/src/playground/menu/menu-test.component.ts
+++ b/src/playground/menu/menu-test.component.ts
@@ -92,16 +92,16 @@ export class NbMenuItem4Component { }
           <nb-card-body>
             <nb-menu id="menu-first" tag="firstMenu" [items]="menuItems" [autoCollapse]="true"></nb-menu>
             <router-outlet></router-outlet>
-            <button class="btn btn-primary" id="addBtn" (click)="addMenuItem()">Add</button>
-            <button class="btn btn-primary" id="homeBtn" (click)="navigateHome()">Home</button>
+            <button nbButton id="addBtn" (click)="addMenuItem()">Add</button>
+            <button nbButton id="homeBtn" (click)="navigateHome()">Home</button>
           </nb-card-body>
         </nb-card>
         <nb-card size="xxlarge">
           <nb-card-body>
             <nb-menu id="menu-second" tag="SecondMenu" [items]="menuItems1"></nb-menu>
             <router-outlet></router-outlet>
-            <button class="btn btn-primary" id="addBtn" (click)="addMenuItem()">Add</button>
-            <button class="btn btn-primary" id="homeBtn" (click)="navigateHome()">Home</button>
+            <button nbButton id="addBtn" (click)="addMenuItem()">Add</button>
+            <button nbButton id="homeBtn" (click)="navigateHome()">Home</button>
           </nb-card-body>
         </nb-card>
         <nb-card size="xxlarge">
diff --git a/src/playground/oauth2-password/oauth2-password-login.component.ts b/src/playground/oauth2-password/oauth2-password-login.component.ts
index f37428966a..72e24d123e 100644
--- a/src/playground/oauth2-password/oauth2-password-login.component.ts
+++ b/src/playground/oauth2-password/oauth2-password-login.component.ts
@@ -27,7 +27,7 @@ import { getDeepFromObject } from '../../framework/auth/helpers';
             <p>Current User Access Token: {{ token.getValue() | json }}</p>
             <p>Current User Access Token Payload : {{getClaims(token.getValue()) | json}}</p>
             <p>Current User Refresh Token: {{ token.getRefreshToken() | json }}</p>
-            <button class="btn btn-warning" *ngIf="token" (click)="logout()">Sign Out</button>
+            <button nbButton status="warning" *ngIf="token" (click)="logout()">Sign Out</button>
           </nb-card-body>
           <nb-card-body *ngIf="! token"><p>No User Authenticated</p></nb-card-body>
         </nb-card>
@@ -71,8 +71,8 @@ import { getDeepFromObject } from '../../framework/auth/helpers';
                     {{ getConfigValue('forms.validation.password.maxLength') }} characters
                   </small>
                 </div>
-                <button [disabled]="submitted || !form.valid" class="btn btn-block btn-hero-success"
-                        [class.btn-pulse]="submitted"> Sign In
+                <button nbButton status="success" hero
+                        [disabled]="submitted || !form.valid" [class.btn-pulse]="submitted"> Sign In
                 </button>
               </form>
             </nb-auth-block>
diff --git a/src/playground/oauth2/oauth2-login.component.ts b/src/playground/oauth2/oauth2-login.component.ts
index dd52d1c537..8451993d3d 100644
--- a/src/playground/oauth2/oauth2-login.component.ts
+++ b/src/playground/oauth2/oauth2-login.component.ts
@@ -18,8 +18,8 @@ import { takeWhile } from 'rxjs/operators';
             <p>Current User Authenticated: {{ !!token }}</p>
             <p>Current User Token: {{ token|json }}</p>
 
-            <button class="btn btn-success" *ngIf="!token" (click)="login()">Sign In with Google</button>
-            <button class="btn btn-warning" *ngIf="token" (click)="logout()">Sign Out</button>
+            <button nbButton status="success" *ngIf="!token" (click)="login()">Sign In with Google</button>
+            <button nbButton status="warning" *ngIf="token" (click)="logout()">Sign Out</button>
           </nb-card-body>
         </nb-card>
       </nb-layout-column>
diff --git a/src/playground/playground.module.ts b/src/playground/playground.module.ts
index ff042ca4c7..4b877591cc 100644
--- a/src/playground/playground.module.ts
+++ b/src/playground/playground.module.ts
@@ -29,6 +29,7 @@ import {
   NbSpinnerModule,
   NbStepperModule,
   NbAccordionModule,
+  NbButtonModule,
 } from '@nebular/theme';
 
 import { NbPlaygroundRoutingModule } from './playground-routing.module';
@@ -154,7 +155,6 @@ import { NbAccordionMultiComponent } from './accordion/accordion-multi.component
 import { NbLayoutSidebarSubheaderComponent } from './layout/layout-sidebar-subheader.component';
 import { NbLayoutSubheaderComponent } from './layout/layout-subheader.component';
 import { NbButtonShowcaseComponent } from './button/button-showcase.component';
-import { NbButtonModule } from '@nebular/theme/components/button/button.module';
 import { NbButtonColorsComponent } from './button/button-colors.component';
 import { NbButtonShapesComponent } from './button/button-shapes.component';
 import { NbButtonHeroComponent } from './button/button-hero.component';
diff --git a/src/playground/popover/popover-custom-component.component.html b/src/playground/popover/popover-custom-component.component.html
index 063c52d175..4d1f39175c 100644
--- a/src/playground/popover/popover-custom-component.component.html
+++ b/src/playground/popover/popover-custom-component.component.html
@@ -1,4 +1,4 @@
-<button class="btn btn-outline-primary"
+<button nbButton
         [nbPopover]="customComponent"
         [nbPopoverContext]="{text: 'Example context'}">
   Custom component
diff --git a/src/playground/popover/popover-custom-component.component.ts b/src/playground/popover/popover-custom-component.component.ts
index 77bec07afe..fc1100e02b 100644
--- a/src/playground/popover/popover-custom-component.component.ts
+++ b/src/playground/popover/popover-custom-component.component.ts
@@ -7,7 +7,6 @@
 import { Component } from '@angular/core';
 import { NbDynamicToAddComponent } from '../shared/dynamic.component';
 
-
 @Component({
   selector: 'nb-popover-custom-component',
   templateUrl: './popover-custom-component.component.html',
diff --git a/src/playground/popover/popover-modes.component.html b/src/playground/popover/popover-modes.component.html
index 12dd3cde70..9ea660ddf7 100644
--- a/src/playground/popover/popover-modes.component.html
+++ b/src/playground/popover/popover-modes.component.html
@@ -1,13 +1,13 @@
 <div class="btn-group btn-divided-group btn-outline-divided-group">
-  <button class="btn btn-outline-primary" nbPopover="Click Mode" nbPopoverMode="click">
+  <button nbButton outline nbPopover="Click Mode" nbPopoverMode="click">
     Click Mode
   </button>
 
-  <button class="btn btn-outline-primary" nbPopover="Hint Mode" nbPopoverMode="hint">
+  <button nbButton outline nbPopover="Hint Mode" nbPopoverMode="hint">
     Hint Mode
   </button>
 
-  <button class="btn btn-outline-primary" nbPopover="Hover Mode" nbPopoverMode="hover">
+  <button nbButton outline nbPopover="Hover Mode" nbPopoverMode="hover">
     Hover Mode
   </button>
 </div>
diff --git a/src/playground/popover/popover-placements.component.html b/src/playground/popover/popover-placements.component.html
index 911d486142..b10495da3b 100644
--- a/src/playground/popover/popover-placements.component.html
+++ b/src/playground/popover/popover-placements.component.html
@@ -1,23 +1,23 @@
-<button class="btn btn-outline-primary" nbPopover="Right Popover!" nbPopoverPlacement="right">
+<button nbButton outline nbPopover="Right Popover!" nbPopoverPlacement="right">
   Right
 </button>
 
-<button class="btn btn-outline-primary" nbPopover="Bottom Popover!" nbPopoverPlacement="bottom">
+<button nbButton outline nbPopover="Bottom Popover!" nbPopoverPlacement="bottom">
   Bottom
 </button>
 
-<button class="btn btn-outline-primary" nbPopover="Top Popover!" nbPopoverPlacement="top">
+<button nbButton outline nbPopover="Top Popover!" nbPopoverPlacement="top">
   Top
 </button>
 
-<button class="btn btn-outline-primary" nbPopover="Left Popover!" nbPopoverPlacement="left">
+<button nbButton outline nbPopover="Left Popover!" nbPopoverPlacement="left">
   Left
 </button>
 
-<button class="btn btn-outline-primary" nbPopover="Start Popover!" nbPopoverPlacement="start">
+<button nbButton outline nbPopover="Start Popover!" nbPopoverPlacement="start">
   Start
 </button>
 
-<button class="btn btn-outline-primary" nbPopover="End Popover!" nbPopoverPlacement="end">
+<button nbButton outline nbPopover="End Popover!" nbPopoverPlacement="end">
   End
 </button>
diff --git a/src/playground/popover/popover-placements.component.ts b/src/playground/popover/popover-placements.component.ts
index b383eda6f5..dccbbe55bc 100644
--- a/src/playground/popover/popover-placements.component.ts
+++ b/src/playground/popover/popover-placements.component.ts
@@ -15,7 +15,7 @@ import { Component } from '@angular/core';
       margin: 2rem 0;
       display: block;
     }
-    .btn {
+    button {
       margin: 1rem;
     }
   `],
diff --git a/src/playground/popover/popover-showcase.component.html b/src/playground/popover/popover-showcase.component.html
index 76fba2a1a0..c09ea1a184 100644
--- a/src/playground/popover/popover-showcase.component.html
+++ b/src/playground/popover/popover-showcase.component.html
@@ -1 +1 @@
-<button class="btn btn-outline-primary" nbPopover="Hi, I'm popover!" nbPopoverPlacement="bottom">Open Popover</button>
+<button nbButton outline nbPopover="Hi, I'm popover!" nbPopoverPlacement="bottom">Open Popover</button>
diff --git a/src/playground/popover/popover-template-ref.component.html b/src/playground/popover/popover-template-ref.component.html
index efb9456d42..4ff5fa3c95 100644
--- a/src/playground/popover/popover-template-ref.component.html
+++ b/src/playground/popover/popover-template-ref.component.html
@@ -1,4 +1,4 @@
-<button class="btn btn-outline-primary"
+<button nbButton outline
         [nbPopover]="template"
         [nbPopoverContext]="{text: 'Example context'}"
         nbPopoverPlacement="right">
diff --git a/src/playground/popover/popover-test.component.ts b/src/playground/popover/popover-test.component.ts
index c5af45da98..758334ca68 100644
--- a/src/playground/popover/popover-test.component.ts
+++ b/src/playground/popover/popover-test.component.ts
@@ -14,7 +14,7 @@ import { NbDynamicToAddComponent } from '../shared/dynamic.component';
     <nb-card>
       <nb-card-header>Content Type</nb-card-header>
       <nb-card-body>
-        <button class="btn btn-info" [nbPopover]="popoverTemplate"
+        <button [nbPopover]="popoverTemplate"
                 [nbPopoverContext]="{text: 'Example context'}"
                 nbPopoverPlacement="right">
           Template Ref Test
@@ -47,22 +47,22 @@ import { NbDynamicToAddComponent } from '../shared/dynamic.component';
     <nb-card>
       <nb-card-header>Placement</nb-card-header>
       <nb-card-body>
-        <button class="btn btn-outline-secondary" nbPopover="Right Popover!" nbPopoverPlacement="right">
+        <button nbPopover="Right Popover!" nbPopoverPlacement="right">
           Right
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Bottom Popover!" nbPopoverPlacement="bottom">
+        <button nbPopover="Bottom Popover!" nbPopoverPlacement="bottom">
           Bottom
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Top Popover!" nbPopoverPlacement="top">
+        <button nbPopover="Top Popover!" nbPopoverPlacement="top">
           Top
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Left Popover!" nbPopoverPlacement="left">
+        <button nbPopover="Left Popover!" nbPopoverPlacement="left">
           Left
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Start Popover!" nbPopoverPlacement="start">
+        <button nbPopover="Start Popover!" nbPopoverPlacement="start">
           Start
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="End Popover!" nbPopoverPlacement="end">
+        <button nbPopover="End Popover!" nbPopoverPlacement="end">
           End
         </button>
       </nb-card-body>
@@ -70,52 +70,52 @@ import { NbDynamicToAddComponent } from '../shared/dynamic.component';
     <nb-card>
       <nb-card-header>Multiple Hints</nb-card-header>
       <nb-card-body>
-        <button class="btn btn-outline-secondary" nbPopover="Right Popover!" nbPopoverMode="hint">
+        <button nbPopover="Right Popover!" nbPopoverMode="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Bottom Popover!" nbPopoverMode="hint">
+        <button nbPopover="Bottom Popover!" nbPopoverMode="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Top Popover!" nbPopoverMode="hint">
+        <button nbPopover="Top Popover!" nbPopoverMode="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Left Popover!" nbPopoverMode="hint">
+        <button nbPopover="Left Popover!" nbPopoverMode="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Right Popover!" nbPopoverMode="hint">
+        <button nbPopover="Right Popover!" nbPopoverMode="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Bottom Popover!" nbPopoverMode="hint">
+        <button nbPopover="Bottom Popover!" nbPopoverMode="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Top Popover!" nbPopoverMode="hint">
+        <button nbPopover="Top Popover!" nbPopoverMode="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Left Popover!" nbPopoverMode="hint">
+        <button nbPopover="Left Popover!" nbPopoverMode="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Right Popover!" nbPopoverMode="hint">
+        <button nbPopover="Right Popover!" nbPopoverMode="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Bottom Popover!" nbPopoverMode="hint">
+        <button nbPopover="Bottom Popover!" nbPopoverMode="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Top Popover!" nbPopoverMode="hint">
+        <button nbPopover="Top Popover!" nbPopoverMode="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Left Popover!" nbPopoverMode="hint">
+        <button nbPopover="Left Popover!" nbPopoverMode="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Right Popover!" nbPopoverMode="hint">
+        <button nbPopover="Right Popover!" nbPopoverMode="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Bottom Popover!" nbPopoverMode="hint">
+        <button nbPopover="Bottom Popover!" nbPopoverMode="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Top Popover!" nbPopoverMode="hint">
+        <button nbPopover="Top Popover!" nbPopoverMode="hint">
           show hint
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Left Popover!" nbPopoverMode="hint">
+        <button nbPopover="Left Popover!" nbPopoverMode="hint">
           show hint
         </button>
       </nb-card-body>
@@ -123,13 +123,13 @@ import { NbDynamicToAddComponent } from '../shared/dynamic.component';
     <nb-card>
       <nb-card-header>Trigger mode</nb-card-header>
       <nb-card-body>
-        <button class="btn btn-outline-secondary" nbPopover="Click Popover!">
+        <button nbPopover="Click Popover!">
           Click
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Hover Popover!" nbPopoverMode="hover">
+        <button nbPopover="Hover Popover!" nbPopoverMode="hover">
           Hover
         </button>
-        <button class="btn btn-outline-secondary" nbPopover="Hint Popover!" nbPopoverMode="hint">
+        <button nbPopover="Hint Popover!" nbPopoverMode="hint">
           HInt
         </button>
       </nb-card-body>
@@ -137,7 +137,7 @@ import { NbDynamicToAddComponent } from '../shared/dynamic.component';
     <nb-card>
       <nb-card-header>Popover</nb-card-header>
       <nb-card-body>
-        <button class="btn btn-outline-success" nbPopover="Click Popover!">
+        <button nbPopover="Click Popover!">
           Show me popover
         </button>
       </nb-card-body>
diff --git a/src/playground/sidebar/sidebar-fixed.component.html b/src/playground/sidebar/sidebar-fixed.component.html
index 71bcaf46fc..a303ec677e 100644
--- a/src/playground/sidebar/sidebar-fixed.component.html
+++ b/src/playground/sidebar/sidebar-fixed.component.html
@@ -1,6 +1,6 @@
 <nb-layout>
   <nb-layout-header fixed>
-    <button class="btn btn-success btn-tn" (click)="toggle()">Toggle</button>
+    <button nbButton status="success" size="xsmall" (click)="toggle()">Toggle</button>
   </nb-layout-header>
   <nb-sidebar fixed></nb-sidebar>
 
diff --git a/src/playground/sidebar/sidebar-toggle.component.html b/src/playground/sidebar/sidebar-toggle.component.html
index 970a54088b..74af6cd860 100644
--- a/src/playground/sidebar/sidebar-toggle.component.html
+++ b/src/playground/sidebar/sidebar-toggle.component.html
@@ -1,7 +1,7 @@
 <nb-layout>
   <nb-layout-header fixed>
-    <button class="btn btn-success btn-tn" (click)="toggle()">Toggle</button>
-    <button class="btn btn-info btn-tn" (click)="toggleCompact()">Toggle Compact</button>
+    <button nbButton status="success" size="xsmall" (click)="toggle()">Toggle</button>
+    <button nbButton status="info" size="xsmall" (click)="toggleCompact()">Toggle Compact</button>
   </nb-layout-header>
 
   <nb-sidebar tag="left"></nb-sidebar>
diff --git a/src/playground/spinner/spinner-button.component.ts b/src/playground/spinner/spinner-button.component.ts
index af624315c1..d11e2472f0 100644
--- a/src/playground/spinner/spinner-button.component.ts
+++ b/src/playground/spinner/spinner-button.component.ts
@@ -12,32 +12,32 @@ import { Component } from '@angular/core';
      <nb-card accent="primary" size="small">
       <nb-card-body>
         <div class="d-flex align-items-start">
-          <button class="button-container btn btn-success btn-lg" (click)="toggleLoadingAnimation()"
+          <button nbButton status="success" size="large" (click)="toggleLoadingAnimation()"
                   [nbSpinner]="loading" nbSpinnerStatus="success" nbSpinnerSize="large" nbSpinnerMessage="">
             Download
           </button>
 
-          <button class="button-container btn btn-primary btn-lg" (click)="toggleLoadingAnimation()"
+          <button nbButton status="primary" size="large" (click)="toggleLoadingAnimation()"
                   [nbSpinner]="loading" nbSpinnerStatus="primary" nbSpinnerSize="large" nbSpinnerMessage="">
             Download
           </button>
 
-          <button class="button-container btn btn-warning btn-lg" (click)="toggleLoadingAnimation()"
+          <button nbButton status="warning" size="large" (click)="toggleLoadingAnimation()"
                   [nbSpinner]="loading" nbSpinnerStatus="warning" nbSpinnerSize="large" nbSpinnerMessage="">
             Download
           </button>
 
-          <button class="button-container btn btn-danger btn-md" (click)="toggleLoadingAnimation()"
+          <button nbButton status="danger" size="medium" (click)="toggleLoadingAnimation()"
                   [nbSpinner]="loading" nbSpinnerStatus="danger" nbSpinnerMessage="">
             Download
           </button>
 
-          <button class="button-container btn btn-info btn-md" (click)="toggleLoadingAnimation()"
+          <button nbButton status="info" size="medium" (click)="toggleLoadingAnimation()"
                   [nbSpinner]="loading" nbSpinnerStatus="info" nbSpinnerSize="small" nbSpinnerMessage="">
             Download
           </button>
 
-          <button class="button-container btn btn-info btn-sm" (click)="toggleLoadingAnimation()"
+          <button nbButton status="info" size="medium" (click)="toggleLoadingAnimation()"
                   [nbSpinner]="loading" nbSpinnerStatus="info" nbSpinnerSize="xsmall" nbSpinnerMessage="">
             Download
           </button>
@@ -46,7 +46,7 @@ import { Component } from '@angular/core';
     </nb-card>
   `,
   styles: [`
-    :host .button-container {
+    button {
       margin: 1rem;
     }
   `],
diff --git a/src/playground/spinner/spinner-card.component.ts b/src/playground/spinner/spinner-card.component.ts
index 953ee1c853..bd8627b948 100644
--- a/src/playground/spinner/spinner-card.component.ts
+++ b/src/playground/spinner/spinner-card.component.ts
@@ -10,7 +10,7 @@ import { Component } from '@angular/core';
           A nebula is an interstellar cloud of dust, hydrogen, helium and other ionized gases.
           Originally, nebula was a name for any diffuse astronomical object.
         </p>
-        <button class="btn btn-info btn-sm" (click)="toggleLoadingAnimation()">Reload</button>
+        <button nbButton status="info" size="small" (click)="toggleLoadingAnimation()">Reload</button>
 
       </nb-card-body>
     </nb-card>
diff --git a/src/playground/stepper/stepper-playground.component.scss b/src/playground/stepper/stepper-playground.component.scss
index bd6bd8a66c..e8ce011725 100644
--- a/src/playground/stepper/stepper-playground.component.scss
+++ b/src/playground/stepper/stepper-playground.component.scss
@@ -1,6 +1,6 @@
 :host ::ng-deep nb-stepper .step-content {
   text-align: center;
-  .btn {
+  button {
     cursor: pointer;
     margin: 0.5rem;
   }
diff --git a/src/playground/stepper/stepper-showcase.component.html b/src/playground/stepper/stepper-showcase.component.html
index a590ed4919..0ca3277053 100644
--- a/src/playground/stepper/stepper-showcase.component.html
+++ b/src/playground/stepper/stepper-showcase.component.html
@@ -4,25 +4,25 @@
       <nb-step [label]="labelOne">
         <ng-template #labelOne>First step</ng-template>
         <h3>Step content #1</h3>
-        <button class="btn btn-primary" disabled nbStepperNext>prev</button>
-        <button class="btn btn-primary" nbStepperNext>next</button>
+        <button nbButton disabled nbStepperNext>prev</button>
+        <button nbButton nbStepperNext>next</button>
       </nb-step>
       <nb-step [label]="labelTwo">
         <ng-template #labelTwo>Second step</ng-template>
         <h3>Step content #2</h3>
-        <button class="btn btn-primary" nbStepperPrevious>prev</button>
-        <button class="btn btn-primary" nbStepperNext>next</button>
+        <button nbButton nbStepperPrevious>prev</button>
+        <button nbButton nbStepperNext>next</button>
       </nb-step>
       <nb-step label="Third step">
         <h3>Step content #3</h3>
-        <button class="btn btn-primary" nbStepperPrevious>prev</button>
-        <button class="btn btn-primary" nbStepperNext>next</button>
+        <button nbButton nbStepperPrevious>prev</button>
+        <button nbButton nbStepperNext>next</button>
       </nb-step>
       <nb-step [label]="labelFour">
         <ng-template #labelFour>Fourth step</ng-template>
         <h3>Step content #4</h3>
-        <button class="btn btn-primary" nbStepperPrevious>prev</button>
-        <button class="btn btn-primary" disabled nbStepperNext>next</button>
+        <button nbButton nbStepperPrevious>prev</button>
+        <button nbButton disabled nbStepperNext>next</button>
       </nb-step>
     </nb-stepper>
   </nb-card-body>
diff --git a/src/playground/stepper/stepper-validation.component.html b/src/playground/stepper/stepper-validation.component.html
index ef3b76d138..19dc036351 100644
--- a/src/playground/stepper/stepper-validation.component.html
+++ b/src/playground/stepper/stepper-validation.component.html
@@ -11,7 +11,7 @@
             <input type="text" placeholder="Enter your name" class="form-control" formControlName="firstCtrl"
                    [ngClass]="{'form-control-danger': firstForm.invalid && (firstForm.dirty || firstForm.touched)}">
           </div>
-          <button class="btn btn-primary" nbStepperNext>next</button>
+          <button nbButton nbStepperNext>next</button>
         </form>
       </nb-step>
       <nb-step [stepControl]="secondForm" label="Second step">
@@ -25,8 +25,8 @@
             <input type="text" placeholder="Enter favorite movie" class="form-control" formControlName="secondCtrl"
                    [ngClass]="{'form-control-danger': secondForm.invalid && (secondForm.dirty || secondForm.touched)}">
           </div>
-          <button class="btn btn-primary" nbStepperPrevious>prev</button>
-          <button class="btn btn-primary" nbStepperNext>next</button>
+          <button nbButton nbStepperPrevious>prev</button>
+          <button nbButton nbStepperNext>next</button>
         </form>
       </nb-step>
       <nb-step [stepControl]="thirdForm" label="Third step">
@@ -38,14 +38,14 @@
             <input type="text" placeholder="Enter something" class="form-control" formControlName="thirdCtrl"
                    [ngClass]="{'form-control-danger': thirdForm.invalid && (thirdForm.dirty || thirdForm.touched)}">
           </div>
-          <button class="btn btn-primary" nbStepperPrevious>prev</button>
-          <button class="btn btn-primary" nbStepperNext>Confirm</button>
+          <button nbButton nbStepperPrevious>prev</button>
+          <button nbButton nbStepperNext>Confirm</button>
         </form>
       </nb-step>
       <nb-step [stepControl]="thirdForm" [hidden]="true" label="Third step">
         <div class="step-container">
           <h3>Wizard completed!</h3>
-          <button class="btn btn-primary" (click)="stepper.reset()">Try again</button>
+          <button nbButton (click)="stepper.reset()">Try again</button>
         </div>
       </nb-step>
     </nb-stepper>
diff --git a/src/playground/stepper/stepper-vertical.component.html b/src/playground/stepper/stepper-vertical.component.html
index 41a79a0830..b7101926d3 100644
--- a/src/playground/stepper/stepper-vertical.component.html
+++ b/src/playground/stepper/stepper-vertical.component.html
@@ -14,8 +14,8 @@ <h3>Step content #1</h3>
           sed ornare magna. Mauris vitae laoreet diam. Mauris fermentum ligula at lacinia semper. Nulla placerat dui
           eu sapien pellentesque, eu placerat leo luctus. Cras pharetra blandit fermentum.
         </p>
-        <button class="btn btn-primary" disabled nbStepperNext>prev</button>
-        <button class="btn btn-primary" nbStepperNext>next</button>
+        <button nbButton disabled nbStepperNext>prev</button>
+        <button nbButton nbStepperNext>next</button>
       </nb-step>
       <nb-step label="Second step">
         <h3>Step content #2</h3>
@@ -30,8 +30,8 @@ <h3>Step content #2</h3>
           sed ornare magna. Mauris vitae laoreet diam. Mauris fermentum ligula at lacinia semper. Nulla placerat dui
           eu sapien pellentesque, eu placerat leo luctus. Cras pharetra blandit fermentum.
         </p>
-        <button class="btn btn-primary" nbStepperPrevious>prev</button>
-        <button class="btn btn-primary" nbStepperNext>next</button>
+        <button nbButton nbStepperPrevious>prev</button>
+        <button nbButton nbStepperNext>next</button>
       </nb-step>
       <nb-step label="Third step">
         <h3>Step content #3</h3>
@@ -46,8 +46,8 @@ <h3>Step content #3</h3>
           sed ornare magna. Mauris vitae laoreet diam. Mauris fermentum ligula at lacinia semper. Nulla placerat dui
           eu sapien pellentesque, eu placerat leo luctus. Cras pharetra blandit fermentum.
         </p>
-        <button class="btn btn-primary" nbStepperPrevious>prev</button>
-        <button class="btn btn-primary" nbStepperNext>next</button>
+        <button nbButton nbStepperPrevious>prev</button>
+        <button nbButton nbStepperNext>next</button>
       </nb-step>
       <nb-step label="Fourth step">
         <h3>Step content #4</h3>
@@ -62,8 +62,8 @@ <h3>Step content #4</h3>
           sed ornare magna. Mauris vitae laoreet diam. Mauris fermentum ligula at lacinia semper. Nulla placerat dui
           eu sapien pellentesque, eu placerat leo luctus. Cras pharetra blandit fermentum.
         </p>
-        <button class="btn btn-primary" nbStepperPrevious>prev</button>
-        <button class="btn btn-primary" disabled nbStepperNext>next</button>
+        <button nbButton nbStepperPrevious>prev</button>
+        <button nbButton disabled nbStepperNext>next</button>
       </nb-step>
     </nb-stepper>
   </nb-card-body>