From 1c7b133ae5b97957cd6522dbd20250e60b383154 Mon Sep 17 00:00:00 2001
From: woothu <32914662+woothu@users.noreply.github.com>
Date: Fri, 8 Nov 2019 12:50:42 +0100
Subject: [PATCH] refacor: update dashboard to coreui-vue changes

---
 src/containers/TheHeader.vue                  |   30 +-
 src/containers/TheHeaderDropdownAccnt.vue     |    7 +-
 src/views/Dashboard.vue                       |   14 +-
 src/views/base/Cards.vue                      |    2 +-
 src/views/base/Carousels.vue                  |   14 +-
 src/views/base/Forms.vue                      |    8 +-
 src/views/base/Jumbotrons.vue                 |    2 +-
 src/views/base/ListGroups.vue                 |    6 +-
 src/views/base/Navs.vue                       |    8 +-
 src/views/base/Switches.vue                   |  386 ++--
 src/views/base/Table.vue                      |    4 +-
 src/views/base/Tabs.vue                       |   10 +-
 src/views/buttons/StandardButtons.vue         |  202 +-
 src/views/icons/Brands.vue                    |    4 +-
 src/views/icons/CoreUIIcons.vue               |  428 +----
 src/views/icons/Flags.vue                     |   10 +-
 src/views/notifications/Alerts.vue            |   14 +-
 src/views/notifications/Badges.vue            |   18 +-
 src/views/notifications/Modals.vue            |    1 +
 src/views/users/User.vue                      |    2 +-
 src/views/users/Users.vue                     |    4 +-
 src/views/widgets/Widgets.vue                 |    8 +-
 .../__snapshots__/TheHeader.spec.js.snap      |   84 +-
 .../TheHeaderDropdownAccnt.spec.js.snap       |    3 +-
 .../__snapshots__/Dashboard.spec.js.snap      |    6 +-
 .../base/__snapshots__/Cards.spec.js.snap     |    3 +-
 .../base/__snapshots__/Carousels.spec.js.snap |    7 +-
 .../__snapshots__/Jumbotrons.spec.js.snap     |    2 +-
 .../__snapshots__/ListGroups.spec.js.snap     |    6 +-
 .../base/__snapshots__/Navs.spec.js.snap      |   12 +-
 .../__snapshots__/Paginations.spec.js.snap    |    4 -
 .../base/__snapshots__/Switches.spec.js.snap  |    2 +-
 .../base/__snapshots__/Table.spec.js.snap     |    2 +-
 .../base/__snapshots__/Tabs.spec.js.snap      |  363 ----
 .../StandardButtons.spec.js.snap              |  202 +-
 .../__snapshots__/CoreUIIcons.spec.js.snap    | 1650 -----------------
 .../__snapshots__/Alerts.spec.js.snap         |   31 +-
 .../__snapshots__/Badges.spec.js.snap         |   26 +-
 .../__snapshots__/Modals.spec.js.snap         |    1 +
 .../users/__snapshots__/User.spec.js.snap     |    2 +-
 .../users/__snapshots__/Users.spec.js.snap    |    4 +-
 .../__snapshots__/Widgets.spec.js.snap        |  991 ----------
 42 files changed, 549 insertions(+), 4034 deletions(-)
 delete mode 100644 tests/unit/views/base/__snapshots__/Tabs.spec.js.snap
 delete mode 100644 tests/unit/views/icons/__snapshots__/CoreUIIcons.spec.js.snap
 delete mode 100644 tests/unit/views/widgets/__snapshots__/Widgets.spec.js.snap

diff --git a/src/containers/TheHeader.vue b/src/containers/TheHeader.vue
index 3bdcdedd..3259f213 100644
--- a/src/containers/TheHeader.vue
+++ b/src/containers/TheHeader.vue
@@ -19,19 +19,37 @@
       :wrappedInLink="{ href: 'https://coreui.io', target: '_blank'}"
     />
     <CHeaderNav class="d-md-down-none mr-auto">
-      <CHeaderNavItem class="px-3" to="/dashboard">Dashboard</CHeaderNavItem>
-      <CHeaderNavItem class="px-3" to="/users" exact>Users</CHeaderNavItem>
-      <CHeaderNavItem class="px-3">Settings</CHeaderNavItem>
+      <CHeaderNavItem class="px-3" to="/dashboard">
+        <CHeaderNavLink>
+          Dashboard
+        </CHeaderNavLink>
+      </CHeaderNavItem>
+      <CHeaderNavItem class="px-3" to="/users" exact>
+        <CHeaderNavLink>
+          Users
+        </CHeaderNavLink>
+      </CHeaderNavItem>
+      <CHeaderNavItem class="px-3">
+        <CHeaderNavLink>
+          Settings
+        </CHeaderNavLink>
+      </CHeaderNavItem>
     </CHeaderNav>
     <CHeaderNav class="mr-4">
       <CHeaderNavItem class="d-md-down-none mx-2">
-        <i class="cui-bell"></i>
+        <CHeaderNavLink>
+          <i class="cui-bell"></i>
+        </CHeaderNavLink>
       </CHeaderNavItem>
       <CHeaderNavItem class="d-md-down-none mx-2">
-        <i class="cui-list"></i>
+        <CHeaderNavLink>
+          <i class="cui-list"></i>
+        </CHeaderNavLink>
       </CHeaderNavItem>
       <CHeaderNavItem class="d-md-down-none mx-2">
-        <i class="cui-envelope-open"></i>
+        <CHeaderNavLink>
+          <i class="cui-envelope-open"></i>
+        </CHeaderNavLink>
       </CHeaderNavItem>
       <TheHeaderDropdownAccnt/>
     </CHeaderNav>
diff --git a/src/containers/TheHeaderDropdownAccnt.vue b/src/containers/TheHeaderDropdownAccnt.vue
index 98673e1e..d60f25b3 100644
--- a/src/containers/TheHeaderDropdownAccnt.vue
+++ b/src/containers/TheHeaderDropdownAccnt.vue
@@ -1,20 +1,19 @@
 <template>
   <CDropdown
-    nav
-    no-caret
+    inNav
     class="c-header-nav-items"
     placement="bottom-end"
     add-menu-classes="pt-0"
   >
     <template #toggler>
-      <CHeaderNavItem only-link>
+      <CHeaderNavLink>
         <div class="c-avatar">
           <img
             src="img/avatars/6.jpg"
             class="c-avatar-img "
           />
         </div>
-      </CHeaderNavItem>
+      </CHeaderNavLink>
     </template>
     <CDropdownHeader tag="div" class="text-center" color="light">
       <strong>Account</strong>
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 47d93597..461518fb 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -238,10 +238,10 @@
               </div>
               <div class="legend text-center">
                 <small>
-                  <sup><CBadge pill color="info">&nbsp;</CBadge></sup>
+                  <sup><CBadge shape="pill" color="info">&nbsp;</CBadge></sup>
                   New clients
                   &nbsp;&nbsp;
-                  <sup><CBadge pill color="danger">&nbsp;</CBadge></sup>
+                  <sup><CBadge shape="pill" color="danger">&nbsp;</CBadge></sup>
                   Recurring clients
                 </small>
               </div>
@@ -310,7 +310,7 @@
                 <div class="progress-group">
                   <div class="progress-group-header">
                     <CIcon
-                      name="socialFacebook"
+                      name="facebook"
                       height="17"
                       class="progress-group-icon"
                     />
@@ -330,7 +330,7 @@
                 <div class="progress-group">
                   <div class="progress-group-header">
                     <CIcon
-                      name="socialTwitter"
+                      name="twitter"
                       height="17"
                       class="progress-group-icon"
                     />
@@ -350,7 +350,7 @@
                 <div class="progress-group">
                   <div class="progress-group-header">
                     <CIcon
-                      name="socialLinkedin"
+                      name="linkedin"
                       height="17"
                       class="progress-group-icon"
                     />
@@ -376,7 +376,7 @@
             </CCol>
           </CRow>
           <br/>
-          <CTable
+          <CDataTable
             class="mb-0 table-outline"
             hover
             :items="tableItems"
@@ -441,7 +441,7 @@
               <div class="small text-muted">Last login</div>
               <strong>{{item.activity}}</strong>
             </td>
-          </CTable>
+          </CDataTable>
         </CCard>
       </CCol>
     </CRow>
diff --git a/src/views/base/Cards.vue b/src/views/base/Cards.vue
index cce9523a..d886e6cb 100644
--- a/src/views/base/Cards.vue
+++ b/src/views/base/Cards.vue
@@ -64,7 +64,7 @@
         <CCard>
           <CCardHeader>
             Card with label
-            <CBadge pill color="danger" class="float-right">42</CBadge>
+            <CBadge shape="pill" color="danger" class="float-right">42</CBadge>
           </CCardHeader>
           <CCardBody>
             {{loremIpsum}}
diff --git a/src/views/base/Carousels.vue b/src/views/base/Carousels.vue
index 31b33616..d8e7c974 100644
--- a/src/views/base/Carousels.vue
+++ b/src/views/base/Carousels.vue
@@ -24,17 +24,17 @@
             height="400px"
           >
             <CCarouselItem
-            captionHeader="First Slide"
-              image="https://lorempixel.com/1024/480/technics/2/"
-            captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
+              captionHeader="First Slide"
+              image="https://picsum.photos/1024/480/?image=52"
+              captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
             />
             <CCarouselItem
-            captionHeader="Blank page"
-              :image="{ blankColor: 'grey' }"
-            captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
+              captionHeader="Blank page"
+              :image="{ placeholderColor: 'grey' }"
+              captionText="Nulla vitae elit libero, a pharetra augue mollis interdum."
             />
             <CCarouselItem
-              image="https://lorempixel.com/1024/480/technics/8/"
+            image="https://picsum.photos/1024/480/?image=54"
             />
           </CCarousel>
         </CCardBody>
diff --git a/src/views/base/Forms.vue b/src/views/base/Forms.vue
index a026a7c0..409b1963 100644
--- a/src/views/base/Forms.vue
+++ b/src/views/base/Forms.vue
@@ -190,13 +190,13 @@
                   </CCol>
                   <CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
                     <CInputCheckbox
-                      v-for="option in options"
-                      :key="option"
+                      v-for="(option, optionIndex) in options"
+                      :key="key + option"
                       :label="option"
                       :value="option"
                       :custom="key > 1"
                       :name="`Option 1${key}`"
-                      :checked="Math.random() > 0.6"
+                      :checked="optionIndex === key"
                       :inline="key % 2 === 1"
                     />
                   </CCol>
@@ -210,7 +210,7 @@
                   <CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
                     <CInputRadio
                       v-for="(option, optionIndex) in options"
-                      :key="option"
+                      :key="key + option"
                       :label="option"
                       type="radio"
                       :value="option"
diff --git a/src/views/base/Jumbotrons.vue b/src/views/base/Jumbotrons.vue
index 64ccecfb..85ca17a8 100644
--- a/src/views/base/Jumbotrons.vue
+++ b/src/views/base/Jumbotrons.vue
@@ -20,7 +20,7 @@
           <CCardBody>
             <CJumbotron>
               <h1 class="display-3">Bootstrap 4</h1>
-              <p class="lead">Bootstrap 4 Components for Vue.js 2</p>
+              <p class="lead">Bootstrap 4 Components for Vue.js 2.6+</p>
               <p>For more information visit website</p>
               <CButton color="primary" href="#">More Info</CButton>
             </CJumbotron>
diff --git a/src/views/base/ListGroups.vue b/src/views/base/ListGroups.vue
index 41e4af42..287f8890 100644
--- a/src/views/base/ListGroups.vue
+++ b/src/views/base/ListGroups.vue
@@ -113,19 +113,19 @@
                 class="d-flex justify-content-between align-items-center"
               >
                 Cras justo odio
-                <CBadge color="primary" pill>14</CBadge>
+                <CBadge color="primary" shape="pill">14</CBadge>
               </CListGroupItem>
               <CListGroupItem
                 class="d-flex justify-content-between align-items-center"
               >
                 Dapibus ac facilisis in
-                <CBadge color="primary" pill>2</CBadge>
+                <CBadge color="primary" shape="pill">2</CBadge>
               </CListGroupItem>
               <CListGroupItem
                 class="d-flex justify-content-between align-items-center"
               >
                 Morbi leo risus
-                <CBadge color="primary" pill>1</CBadge>
+                <CBadge color="primary" shape="pill">1</CBadge>
               </CListGroupItem>
             </CListGroup>
           </CCardBody>
diff --git a/src/views/base/Navs.vue b/src/views/base/Navs.vue
index 3088bb6a..84796e55 100644
--- a/src/views/base/Navs.vue
+++ b/src/views/base/Navs.vue
@@ -51,7 +51,7 @@
         <small>tab style</small>
       </CCardHeader>
       <CCardBody>
-        <CNav tabs>
+        <CNav variant="tabs">
           <CNavItem active>
             Active
           </CNavItem>
@@ -72,7 +72,7 @@
         <small>pill style</small>
       </CCardHeader>
       <CCardBody>
-        <CNav pills>
+        <CNav variant="pills">
           <CNavItem active>Active</CNavItem>
           <CNavItem>Link</CNavItem>
           <CNavItem>Another Link</CNavItem>
@@ -87,7 +87,7 @@
         <small>fill tabs</small>
       </CCardHeader>
       <CCardBody>
-        <CNav fill tabs>
+        <CNav fill variant="tabs">
           <CNavItem active>Active</CNavItem>
           <CNavItem>Link</CNavItem>
           <CNavItem>Link with a long name </CNavItem>
@@ -102,7 +102,7 @@
         <small>justified tabs</small>
       </CCardHeader>
       <CCardBody>
-        <CNav justified tabs>
+        <CNav justified variant="tabs">
           <CNavItem active>Active</CNavItem>
           <CNavItem>Link</CNavItem>
           <CNavItem>Link with a long name </CNavItem>
diff --git a/src/views/base/Switches.vue b/src/views/base/Switches.vue
index 0d27e42d..77889355 100644
--- a/src/views/base/Switches.vue
+++ b/src/views/base/Switches.vue
@@ -23,8 +23,7 @@
               :key="'radio' + key"
               class="mx-1"
               :color="color"
-              shape="3d"
-              outline="alt"
+             variant="3d"
               v-bind="labelIcon"
               type="radio"
               name="radio"
@@ -85,15 +84,15 @@
             3d Switch
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked  shape="3d" />
-            <CSwitch class="mx-1" color="secondary" checked  shape="3d" />
-            <CSwitch class="mx-1" color="success" checked  shape="3d" />
-            <CSwitch class="mx-1" color="warning" checked  shape="3d" />
-            <CSwitch class="mx-1" color="info" checked  shape="3d" />
-            <CSwitch class="mx-1" color="danger" checked  shape="3d" />
-            <CSwitch class="mx-1" color="light" checked  shape="3d" />
-            <CSwitch class="mx-1" color="dark" checked  shape="3d" />
-            <CSwitch class="mx-1" color="primary" disabled  shape="3d" />
+            <CSwitch class="mx-1" color="primary" checked variant="3d" />
+            <CSwitch class="mx-1" color="secondary" checked variant="3d" />
+            <CSwitch class="mx-1" color="success" checked variant="3d" />
+            <CSwitch class="mx-1" color="warning" checked variant="3d" />
+            <CSwitch class="mx-1" color="info" checked variant="3d" />
+            <CSwitch class="mx-1" color="danger" checked variant="3d" />
+            <CSwitch class="mx-1" color="light" checked variant="3d" />
+            <CSwitch class="mx-1" color="dark" checked variant="3d" />
+            <CSwitch class="mx-1" color="primary" disabled variant="3d" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -103,33 +102,15 @@
             3d Switch <small><code>disabled</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked shape="3d" disabled />
-            <CSwitch class="mx-1" color="secondary" checked shape="3d" disabled />
-            <CSwitch class="mx-1" color="success" checked shape="3d" disabled />
-            <CSwitch class="mx-1" color="warning" checked shape="3d" disabled />
-            <CSwitch class="mx-1" color="info" checked shape="3d" disabled />
-            <CSwitch class="mx-1" color="danger" checked shape="3d" disabled />
-            <CSwitch class="mx-1" color="light" checked shape="3d" disabled />
-            <CSwitch class="mx-1" color="dark" checked shape="3d" disabled />
-            <CSwitch class="mx-1" color="primary" disabled shape="3d" />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard>
-          <CCardHeader>
-            3d Switch <small><code>outline="alt"</code></small>
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="secondary" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="success" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="warning" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="info" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="danger" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="light" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="dark" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="primary" disabled  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" color="primary" checked variant="3d" disabled />
+            <CSwitch class="mx-1" color="secondary" checked variant="3d" disabled />
+            <CSwitch class="mx-1" color="success" checked variant="3d" disabled />
+            <CSwitch class="mx-1" color="warning" checked variant="3d" disabled />
+            <CSwitch class="mx-1" color="info" checked variant="3d" disabled />
+            <CSwitch class="mx-1" color="danger" checked variant="3d" disabled />
+            <CSwitch class="mx-1" color="light" checked variant="3d" disabled />
+            <CSwitch class="mx-1" color="dark" checked variant="3d" disabled />
+            <CSwitch class="mx-1" color="primary" disabled variant="3d" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -139,235 +120,90 @@
             3d Switch <small><code>label</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" color="primary" shape="3d" checked v-bind="labelIcon"/>
-            <CSwitch class="mx-1" color="secondary" checked shape="3d" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="success" checked shape="3d" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="warning" checked shape="3d" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="info" checked shape="3d" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="danger" checked shape="3d" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="light" checked shape="3d" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="dark" checked shape="3d" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="primary" disabled shape="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" variant="3d" shape="square" checked v-bind="labelIcon"/>
+            <CSwitch class="mx-1" color="secondary" checked variant="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="success" checked variant="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="warning" checked variant="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="info" checked variant="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="danger" checked variant="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="light" checked variant="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="dark" checked variant="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" disabled variant="3d" v-bind="labelIcon" />
           </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" md="6">
         <CCard>
           <CCardHeader>
-            3d Switch <small><code>outline="alt"</code></small>
+            Switch <small><code>variant="outline"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="secondary" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="success" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="warning" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="info" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="danger" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="light" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="dark" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="primary" disabled  shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" checked variant="outline" />
+            <CSwitch class="mx-1" color="secondary" checked variant="outline" />
+            <CSwitch class="mx-1" color="success" checked variant="outline" />
+            <CSwitch class="mx-1" color="warning" checked variant="outline" />
+            <CSwitch class="mx-1" color="info" checked variant="outline" />
+            <CSwitch class="mx-1" color="danger" checked variant="outline" />
+            <CSwitch class="mx-1" color="light" checked variant="outline" />
+            <CSwitch class="mx-1" color="dark" checked variant="outline" />
+            <CSwitch class="mx-1" color="primary" variant="outline" disabled />
           </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" md="6">
         <CCard>
           <CCardHeader>
-            3d Switch <small><code>outline="alt"</code></small>
+            Switch <small><code>variant="outline"  shape="pill"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="secondary" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="success" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="warning" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="info" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="danger" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="light" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="dark" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" color="primary" disabled  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" color="primary" checked variant="outline" shape="pill"/>
+            <CSwitch class="mx-1" color="secondary" checked variant="outline" shape="pill" />
+            <CSwitch class="mx-1" color="success" checked variant="outline" shape="pill" />
+            <CSwitch class="mx-1" color="warning" checked variant="outline" shape="pill" />
+            <CSwitch class="mx-1" color="info" checked variant="outline" shape="pill" />
+            <CSwitch class="mx-1" color="danger" checked variant="outline" shape="pill" />
+            <CSwitch class="mx-1" color="light" checked variant="outline" shape="pill" />
+            <CSwitch class="mx-1" color="dark" checked variant="outline" shape="pill" />
+            <CSwitch class="mx-1" color="primary" variant="outline" shape="pill" disabled />
           </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" md="6">
         <CCard>
           <CCardHeader>
-            Switch <small><code>outline</code></small>
+            Switch <small><code>variant="opposite"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline />
-            <CSwitch class="mx-1" color="secondary" checked outline />
-            <CSwitch class="mx-1" color="success" checked outline />
-            <CSwitch class="mx-1" color="warning" checked outline />
-            <CSwitch class="mx-1" color="info" checked outline />
-            <CSwitch class="mx-1" color="danger" checked outline />
-            <CSwitch class="mx-1" color="light" checked outline />
-            <CSwitch class="mx-1" color="dark" checked outline />
-            <CSwitch class="mx-1" color="primary" outline disabled />
+            <CSwitch class="mx-1" color="primary" checked variant="opposite" />
+            <CSwitch class="mx-1" color="secondary" checked variant="opposite" />
+            <CSwitch class="mx-1" color="success" checked variant="opposite" />
+            <CSwitch class="mx-1" color="warning" checked variant="opposite" />
+            <CSwitch class="mx-1" color="info" checked variant="opposite" />
+            <CSwitch class="mx-1" color="danger" checked variant="opposite" />
+            <CSwitch class="mx-1" color="light" checked variant="opposite" />
+            <CSwitch class="mx-1" color="dark" checked variant="opposite" />
+            <CSwitch class="mx-1" color="primary" variant="opposite" disabled />
           </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" md="6">
         <CCard>
           <CCardHeader>
-            Switch <small><code>outline  shape="pill"</code></small>
+            Switch <small><code>variant="opposite"  shape="pill"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline shape="pill"/>
-            <CSwitch class="mx-1" color="secondary" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="success" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="warning" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="info" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="danger" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="light" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="dark" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="primary" outline shape="pill" disabled />
+            <CSwitch class="mx-1" color="primary" checked variant="opposite" shape="pill"/>
+            <CSwitch class="mx-1" color="secondary" checked variant="opposite" shape="pill" />
+            <CSwitch class="mx-1" color="success" checked variant="opposite" shape="pill" />
+            <CSwitch class="mx-1" color="warning" checked variant="opposite" shape="pill" />
+            <CSwitch class="mx-1" color="info" checked variant="opposite" shape="pill" />
+            <CSwitch class="mx-1" color="danger" checked variant="opposite" shape="pill" />
+            <CSwitch class="mx-1" color="light" checked variant="opposite" shape="pill" />
+            <CSwitch class="mx-1" color="dark" checked variant="opposite" shape="pill" />
+            <CSwitch class="mx-1" color="primary" variant="opposite" shape="pill" disabled />
           </CCardBody>
         </CCard>
       </CCol>
-      <CCol xs="12" md="6">
-        <CCard>
-          <CCardHeader>
-            Switch <small><code>outline="alt"</code></small>
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline="alt" />
-            <CSwitch class="mx-1" color="secondary" checked outline="alt" />
-            <CSwitch class="mx-1" color="success" checked outline="alt" />
-            <CSwitch class="mx-1" color="warning" checked outline="alt" />
-            <CSwitch class="mx-1" color="info" checked outline="alt" />
-            <CSwitch class="mx-1" color="danger" checked outline="alt" />
-            <CSwitch class="mx-1" color="light" checked outline="alt" />
-            <CSwitch class="mx-1" color="dark" checked outline="alt" />
-            <CSwitch class="mx-1" color="primary" outline="alt" disabled />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard>
-          <CCardHeader>
-            Switch <small><code>outline="alt"  shape="pill"</code></small>
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline="alt" shape="pill"/>
-            <CSwitch class="mx-1" color="secondary" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="success" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="warning" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="info" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="danger" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="light" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="dark" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="primary" outline="alt" shape="pill" disabled />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard>
-          <CCardHeader>
-            Switch <small><code>label</code></small>
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked />
-            <CSwitch class="mx-1" color="secondary" checked />
-            <CSwitch class="mx-1" color="success" checked />
-            <CSwitch class="mx-1" color="warning" checked />
-            <CSwitch class="mx-1" color="info" checked />
-            <CSwitch class="mx-1" color="danger" checked />
-            <CSwitch class="mx-1" color="light" checked />
-            <CSwitch class="mx-1" color="dark" checked />
-            <CSwitch class="mx-1" color="primary" disabled />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard>
-          <CCardHeader>
-            Switch <small><code>label  shape="pill"</code></small>
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked shape="pill" />
-            <CSwitch class="mx-1" color="secondary" checked shape="pill" />
-            <CSwitch class="mx-1" color="success" checked shape="pill" />
-            <CSwitch class="mx-1" color="warning" checked shape="pill" />
-            <CSwitch class="mx-1" color="info" checked shape="pill" />
-            <CSwitch class="mx-1" color="danger" checked shape="pill" />
-            <CSwitch class="mx-1" color="light" checked shape="pill" />
-            <CSwitch class="mx-1" color="dark" checked shape="pill" />
-            <CSwitch class="mx-1" color="primary" shape="pill" disabled />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard>
-          <CCardHeader>
-            Switch <small><code>label outline</code></small>
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline />
-            <CSwitch class="mx-1" color="secondary" checked outline />
-            <CSwitch class="mx-1" color="success" checked outline />
-            <CSwitch class="mx-1" color="warning" checked outline />
-            <CSwitch class="mx-1" color="info" checked outline />
-            <CSwitch class="mx-1" color="danger" checked outline />
-            <CSwitch class="mx-1" color="light" checked outline />
-            <CSwitch class="mx-1" color="dark" checked outline />
-            <CSwitch class="mx-1" color="primary" outline disabled />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard>
-          <CCardHeader>
-            Switch <small><code>label outline</code></small>
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="secondary" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="success" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="warning" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="info" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="danger" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="light" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="dark" checked outline shape="pill" />
-            <CSwitch class="mx-1" color="primary" outline shape="pill" disabled />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard>
-          <CCardHeader>
-            Switch <small><code>label outline</code></small>
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline="alt" />
-            <CSwitch class="mx-1" color="secondary" checked outline="alt" />
-            <CSwitch class="mx-1" color="success" checked outline="alt" />
-            <CSwitch class="mx-1" color="warning" checked outline="alt" />
-            <CSwitch class="mx-1" color="info" checked outline="alt" />
-            <CSwitch class="mx-1" color="danger" checked outline="alt" />
-            <CSwitch class="mx-1" color="light" checked outline="alt" />
-            <CSwitch class="mx-1" color="dark" checked outline="alt" />
-            <CSwitch class="mx-1" color="primary" outline="alt" disabled />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard>
-          <CCardHeader>
-            Switch <small><code>label outline</code></small>
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="secondary" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="success" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="warning" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="info" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="danger" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="light" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="dark" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" color="primary" outline="alt" shape="pill" disabled />
-          </CCardBody>
-        </CCard>
-      </CCol>
-
       <CCol xs="12" md="6">
         <CCard>
           <CCardHeader>
@@ -389,7 +225,7 @@
       <CCol xs="12" md="6">
         <CCard>
           <CCardHeader>
-            Switch <small><code>label  shape="pill"</code></small>
+            Switch <small><code>label shape="pill"</code></small>
           </CCardHeader>
           <CCardBody>
             <CSwitch class="mx-1" color="primary" checked shape="pill" v-bind="labelIcon" />
@@ -407,72 +243,72 @@
       <CCol xs="12" md="6">
         <CCard>
           <CCardHeader>
-            Switch <small><code>label outline</code></small>
+            Switch <small><code>label variant="outline"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="secondary" checked outline v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="success" checked outline v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="warning" checked outline v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="info" checked outline v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="danger" checked outline v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="light" checked outline v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="dark" checked outline v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="primary" outline disabled v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" checked variant="outline" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="secondary" checked variant="outline" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="success" checked variant="outline" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="warning" checked variant="outline" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="info" checked variant="outline" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="danger" checked variant="outline" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="light" checked variant="outline" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="dark" checked variant="outline" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" variant="outline" disabled v-bind="labelIcon" />
           </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" md="6">
         <CCard>
           <CCardHeader>
-            Switch <small><code>label outline</code></small>
+            Switch <small><code>label variant="outline"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="secondary" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="success" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="warning" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="info" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="danger" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="light" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="dark" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="primary" outline shape="pill" disabled v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" checked variant="outline" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="secondary" checked variant="outline" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="success" checked variant="outline" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="warning" checked variant="outline" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="info" checked variant="outline" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="danger" checked variant="outline" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="light" checked variant="outline" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="dark" checked variant="outline" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" variant="outline" shape="pill" disabled v-bind="labelIcon" />
           </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" md="6">
         <CCard>
           <CCardHeader>
-            Switch <small><code>label outline</code></small>
+            Switch <small><code>label variant="opposite"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="secondary" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="success" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="warning" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="info" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="danger" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="light" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="dark" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="primary" outline="alt" disabled v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" checked variant="opposite" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="secondary" checked variant="opposite" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="success" checked variant="opposite" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="warning" checked variant="opposite" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="info" checked variant="opposite" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="danger" checked variant="opposite" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="light" checked variant="opposite" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="dark" checked variant="opposite" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" variant="opposite" disabled v-bind="labelIcon" />
           </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" md="6">
         <CCard>
           <CCardHeader>
-            Switch <small><code>label outline</code></small>
+            Switch <small><code>label variant="opposite"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" color="primary" checked outline="alt" shape="pill" v-bind="labelTxt" />
-            <CSwitch class="mx-1" color="secondary" checked outline="alt" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="success" checked outline="alt" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="warning" checked outline="alt" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="info" checked outline="alt" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="danger" checked outline="alt" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="light" checked outline="alt" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="dark" checked outline="alt" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" color="primary" outline="alt" shape="pill" disabled v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" checked variant="opposite" shape="pill" v-bind="labelTxt" />
+            <CSwitch class="mx-1" color="secondary" checked variant="opposite" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="success" checked variant="opposite" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="warning" checked variant="opposite" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="info" checked variant="opposite" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="danger" checked variant="opposite" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="light" checked variant="opposite" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="dark" checked variant="opposite" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" variant="opposite" shape="pill" disabled v-bind="labelIcon" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -483,7 +319,7 @@
             Sizes
           </CCardHeader>
           <CCardBody class="p-0">
-            <CTable
+            <CDataTable
               hover
               striped
               class="table-align-middle mb-0"
@@ -506,7 +342,7 @@
                   <span v-html="item.size_prop"></span>
                 </td>
               </template>
-            </CTable>
+            </CDataTable>
           </CCardBody>
         </CCard>
       </CCol>
diff --git a/src/views/base/Table.vue b/src/views/base/Table.vue
index 0e9ddc2e..699b0121 100644
--- a/src/views/base/Table.vue
+++ b/src/views/base/Table.vue
@@ -1,6 +1,6 @@
 <template>
   <CCard :header="caption" body-wrapper>
-    <CTable
+    <CDataTable
       :hover="hover"
       :striped="striped"
       :bordered="bordered"
@@ -17,7 +17,7 @@
           <CBadge :color="getBadge(item.status)">{{item.status}}</CBadge>
         </td>
       </template>
-    </CTable>
+    </CDataTable>
   </CCard>
 </template>
 
diff --git a/src/views/base/Tabs.vue b/src/views/base/Tabs.vue
index 1b65046e..41e13a2d 100644
--- a/src/views/base/Tabs.vue
+++ b/src/views/base/Tabs.vue
@@ -49,7 +49,7 @@
             Tabs
           </CCardHeader>
           <CCardBody>
-            <CTabs pills>
+            <CTabs variant="pills">
               <CTab title-html="Home" active>
                 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -104,7 +104,7 @@
               </CTab>
               <CTab>
                 <template slot="title">
-                  <i class="cui-pie-chart"></i>
+                  <i class="cui-chart-piechart"></i>
                 </template>
                 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -145,7 +145,7 @@
               </CTab>
               <CTab>
                 <template slot="title">
-                  <i class="cui-pie-chart"></i> {{tabs[2]}}
+                  <i class="cui-chart-piechart"></i> {{tabs[2]}}
                 </template>
                 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -163,7 +163,7 @@
             Tabs vertical
           </CCardHeader>
           <CCardBody>
-            <CTabs pills vertical>
+            <CTabs variant="pills" vertical>
               <CTab active>
                 <template slot="title">
                   <i class="cui-calculator"></i> {{tabs[0]}}
@@ -186,7 +186,7 @@
               </CTab>
               <CTab>
                 <template slot="title">
-                  <i class="cui-pie-chart"></i> {{tabs[2]}}
+                  <i class="cui-chart-piechart"></i> {{tabs[2]}}
                 </template>
                 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
diff --git a/src/views/buttons/StandardButtons.vue b/src/views/buttons/StandardButtons.vue
index d7afdaf8..3c76c4d4 100644
--- a/src/views/buttons/StandardButtons.vue
+++ b/src/views/buttons/StandardButtons.vue
@@ -119,35 +119,35 @@
       </CCardHeader>
       <CCardBody>
         <p>
-          Use <code>outline</code> prop
+          Use <code>variant="outline"</code> prop
         </p>
         <CRow class="align-items-center">
           <CCol col="12" xl class="mb-3 mb-xl-0">
             Normal
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="primary">Primary</CButton>
+            <CButton block variant="outline" color="primary">Primary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="secondary">Secondary</CButton>
+            <CButton block variant="outline" color="secondary">Secondary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="success">Success</CButton>
+            <CButton block variant="outline" color="success">Success</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="warning">Warning</CButton>
+            <CButton block variant="outline" color="warning">Warning</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="danger">Danger</CButton>
+            <CButton block variant="outline" color="danger">Danger</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="info">Info</CButton>
+            <CButton block variant="outline" color="info">Info</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="light">Light</CButton>
+            <CButton block variant="outline" color="light">Light</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="dark">Dark</CButton>
+            <CButton block variant="outline" color="dark">Dark</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
         </CRow>
@@ -156,28 +156,28 @@
             Active State
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed outline color="primary" aria-pressed="true">Primary</CButton>
+            <CButton block pressed variant="outline" color="primary" aria-pressed="true">Primary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed outline color="secondary" aria-pressed="true">Secondary</CButton>
+            <CButton block pressed variant="outline" color="secondary" aria-pressed="true">Secondary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed outline color="success" aria-pressed="true">Success</CButton>
+            <CButton block pressed variant="outline" color="success" aria-pressed="true">Success</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed outline color="warning" aria-pressed="true">Warning</CButton>
+            <CButton block pressed variant="outline" color="warning" aria-pressed="true">Warning</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed outline color="danger" aria-pressed="true">Danger</CButton>
+            <CButton block pressed variant="outline" color="danger" aria-pressed="true">Danger</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed outline color="info" aria-pressed="true">Info</CButton>
+            <CButton block pressed variant="outline" color="info" aria-pressed="true">Info</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed outline color="light" aria-pressed="true">Light</CButton>
+            <CButton block pressed variant="outline" color="light" aria-pressed="true">Light</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed outline color="dark" aria-pressed="true">Dark</CButton>
+            <CButton block pressed variant="outline" color="dark" aria-pressed="true">Dark</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
         </CRow>
@@ -186,28 +186,28 @@
             Disabled
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="primary" disabled>Primary</CButton>
+            <CButton block variant="outline" color="primary" disabled>Primary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="secondary" disabled>Secondary</CButton>
+            <CButton block variant="outline" color="secondary" disabled>Secondary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="success" disabled>Success</CButton>
+            <CButton block variant="outline" color="success" disabled>Success</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="warning" disabled>Warning</CButton>
+            <CButton block variant="outline" color="warning" disabled>Warning</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="danger" disabled>Danger</CButton>
+            <CButton block variant="outline" color="danger" disabled>Danger</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="info" disabled>Info</CButton>
+            <CButton block variant="outline" color="info" disabled>Info</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="light" disabled>Light</CButton>
+            <CButton block variant="outline" color="light" disabled>Light</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline color="dark" disabled>Dark</CButton>
+            <CButton block variant="outline" color="dark" disabled>Dark</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
         </CRow>
@@ -220,35 +220,35 @@
       <CCardBody>
         <p>
           Use
-          <code>ghost</code> prop for ghost buttons.
+          <code>variant="ghost"</code> prop for ghost buttons.
         </p>
         <CRow class="align-items-center">
           <CCol col="12" xl class="mb-3 mb-xl-0">
             Normal
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="primary">Primary</CButton>
+            <CButton block variant="ghost" color="primary">Primary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="secondary">Secondary</CButton>
+            <CButton block variant="ghost" color="secondary">Secondary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="success">Success</CButton>
+            <CButton block variant="ghost" color="success">Success</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="warning">Warning</CButton>
+            <CButton block variant="ghost" color="warning">Warning</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="danger">Danger</CButton>
+            <CButton block variant="ghost" color="danger">Danger</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="info">Info</CButton>
+            <CButton block variant="ghost" color="info">Info</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="light">Light</CButton>
+            <CButton block variant="ghost" color="light">Light</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="dark">Dark</CButton>
+            <CButton block variant="ghost" color="dark">Dark</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
         </CRow>
@@ -257,28 +257,28 @@
             Active State
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed ghost color="primary" aria-pressed="true">Primary</CButton>
+            <CButton block pressed variant="ghost" color="primary" aria-pressed="true">Primary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed ghost color="secondary" aria-pressed="true">Secondary</CButton>
+            <CButton block pressed variant="ghost" color="secondary" aria-pressed="true">Secondary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed ghost color="success" aria-pressed="true">Success</CButton>
+            <CButton block pressed variant="ghost" color="success" aria-pressed="true">Success</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed ghost color="warning" aria-pressed="true">Warning</CButton>
+            <CButton block pressed variant="ghost" color="warning" aria-pressed="true">Warning</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed ghost color="danger" aria-pressed="true">Danger</CButton>
+            <CButton block pressed variant="ghost" color="danger" aria-pressed="true">Danger</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed ghost color="info" aria-pressed="true">Info</CButton>
+            <CButton block pressed variant="ghost" color="info" aria-pressed="true">Info</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed ghost color="light" aria-pressed="true">Light</CButton>
+            <CButton block pressed variant="ghost" color="light" aria-pressed="true">Light</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed ghost color="dark" aria-pressed="true">Dark</CButton>
+            <CButton block pressed variant="ghost" color="dark" aria-pressed="true">Dark</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
         </CRow>
@@ -287,28 +287,28 @@
             Disabled
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="primary" disabled>Primary</CButton>
+            <CButton block variant="ghost" color="primary" disabled>Primary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="secondary" disabled>Secondary</CButton>
+            <CButton block variant="ghost" color="secondary" disabled>Secondary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="success" disabled>Success</CButton>
+            <CButton block variant="ghost" color="success" disabled>Success</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="warning" disabled>Warning</CButton>
+            <CButton block variant="ghost" color="warning" disabled>Warning</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="danger" disabled>Danger</CButton>
+            <CButton block variant="ghost" color="danger" disabled>Danger</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="info" disabled>Info</CButton>
+            <CButton block variant="ghost" color="info" disabled>Info</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="light" disabled>Light</CButton>
+            <CButton block variant="ghost" color="light" disabled>Light</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost color="dark" disabled>Dark</CButton>
+            <CButton block variant="ghost" color="dark" disabled>Dark</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
         </CRow>
@@ -435,31 +435,31 @@
             Normal
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="primary" pill>Primary</CButton>
+            <CButton block color="primary" shape="pill">Primary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="secondary" pill>Secondary</CButton>
+            <CButton block color="secondary" shape="pill">Secondary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="success" pill>Success</CButton>
+            <CButton block color="success" shape="pill">Success</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="warning" pill>Warning</CButton>
+            <CButton block color="warning" shape="pill">Warning</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="danger" pill>Danger</CButton>
+            <CButton block color="danger" shape="pill">Danger</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="info" pill>Info</CButton>
+            <CButton block color="info" shape="pill">Info</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="light" pill>Light</CButton>
+            <CButton block color="light" shape="pill">Light</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="dark" pill>Dark</CButton>
+            <CButton block color="dark" shape="pill">Dark</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="link" pill>Link</CButton>
+            <CButton block color="link" shape="pill">Link</CButton>
           </CCol>
         </CRow>
         <CRow class="align-items-center mt-3">
@@ -467,31 +467,31 @@
             Active State
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block color="primary" pill aria-pressed="true">Primary</CButton>
+            <CButton pressed block color="primary" shape="pill" aria-pressed="true">Primary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block color="secondary" pill aria-pressed="true">Secondary</CButton>
+            <CButton pressed block color="secondary" shape="pill" aria-pressed="true">Secondary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block color="success" pill aria-pressed="true">Success</CButton>
+            <CButton pressed block color="success" shape="pill" aria-pressed="true">Success</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block color="warning" pill aria-pressed="true">Warning</CButton>
+            <CButton pressed block color="warning" shape="pill" aria-pressed="true">Warning</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block color="danger" pill aria-pressed="true">Danger</CButton>
+            <CButton pressed block color="danger" shape="pill" aria-pressed="true">Danger</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block color="info" pill aria-pressed="true">Info</CButton>
+            <CButton pressed block color="info" shape="pill" aria-pressed="true">Info</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block color="light" pill aria-pressed="true">Light</CButton>
+            <CButton pressed block color="light" shape="pill" aria-pressed="true">Light</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block color="dark" pill aria-pressed="true">Dark</CButton>
+            <CButton pressed block color="dark" shape="pill" aria-pressed="true">Dark</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block color="link" pill aria-pressed="true">Link</CButton>
+            <CButton pressed block color="link" shape="pill" aria-pressed="true">Link</CButton>
           </CCol>
         </CRow>
         <CRow class="align-items-center mt-3">
@@ -499,31 +499,31 @@
             Disabled
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="primary" pill disabled>Primary</CButton>
+            <CButton block color="primary" shape="pill" disabled>Primary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="secondary" pill disabled>Secondary</CButton>
+            <CButton block color="secondary" shape="pill" disabled>Secondary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="success" pill disabled>Success</CButton>
+            <CButton block color="success" shape="pill" disabled>Success</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="warning" pill disabled>Warning</CButton>
+            <CButton block color="warning" shape="pill" disabled>Warning</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="danger" pill disabled>Danger</CButton>
+            <CButton block color="danger" shape="pill" disabled>Danger</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="info" pill disabled>Info</CButton>
+            <CButton block color="info" shape="pill" disabled>Info</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="light" pill disabled>Light</CButton>
+            <CButton block color="light" shape="pill" disabled>Light</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="dark" pill disabled>Dark</CButton>
+            <CButton block color="dark" shape="pill" disabled>Dark</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block color="link" pill disabled>Link</CButton>
+            <CButton block color="link" shape="pill" disabled>Link</CButton>
           </CCol>
         </CRow>
       </CCardBody>
@@ -542,16 +542,16 @@
             <CButton color="primary" size="sm">Standard Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton outline color="secondary" size="sm">Outline Button</CButton>
+            <CButton variant="outline" color="secondary" size="sm">Outline Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton size="sm" ghost color="success">Ghost Button</CButton>
+            <CButton size="sm" variant="ghost" color="success">Ghost Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
             <CButton color="warning" size="sm" square>Square Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton color="danger" size="sm" pill>Pill Button</CButton>
+            <CButton color="danger" size="sm" shape="pill">Pill Button</CButton>
           </CCol>
         </CRow>
         <CRow class="align-items-center mt-3">
@@ -562,16 +562,16 @@
             <CButton color="primary">Standard Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton outline color="secondary">Outline Button</CButton>
+            <CButton variant="outline" color="secondary">Outline Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton ghost color="success">Ghost Button</CButton>
+            <CButton variant="ghost" color="success">Ghost Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
             <CButton color="warning" square>Square Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton color="danger" pill>Pill Button</CButton>
+            <CButton color="danger" shape="pill">Pill Button</CButton>
           </CCol>
         </CRow>
         <CRow class="align-items-center mt-3">
@@ -582,16 +582,16 @@
             <CButton color="primary" size="lg">Standard Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton outline color="secondary" size="lg">Outline Button</CButton>
+            <CButton variant="outline" color="secondary" size="lg">Outline Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton ghost color="success" size="lg">Ghost Button</CButton>
+            <CButton variant="ghost" color="success" size="lg">Ghost Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
             <CButton color="warning" size="lg" square>Square Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton color="danger" size="lg" pill>Pill Button</CButton>
+            <CButton color="danger" size="lg" shape="pill">Pill Button</CButton>
           </CCol>
         </CRow>
       </CCardBody>
@@ -608,7 +608,7 @@
             </CButton>
           </CCol>
           <CCol sm xs="12" class="text-center mt-3">
-            <CButton color="secondary" outline>
+            <CButton color="secondary" variant="outline">
               <i class="cui-lightbulb"></i>&nbsp;Outline Button
             </CButton>
           </CCol>
@@ -623,7 +623,7 @@
             </CButton>
           </CCol>
           <CCol sm xs="12" class="text-center mt-3">
-            <CButton color="danger" pill>
+            <CButton color="danger" shape="pill">
               <i class="cui-lightbulb"></i>&nbsp;Pill Button
             </CButton>
           </CCol>
@@ -637,22 +637,22 @@
       <CCardBody>
         <CRow>
           <CCol sm xs="12" class="text-center mt-3">
-            <CButton outline color="primary" :pressed.sync="togglePress">Primary {{togglePress ? 'On ' : 'Off'}}</CButton>
+            <CButton variant="outline" color="primary" :pressed.sync="togglePress">Primary {{togglePress ? 'On ' : 'Off'}}</CButton>
           </CCol>
           <CCol sm xs="12" class="text-center mt-3">
-            <CButton outline color="secondary" :pressed.sync="togglePress">Secondary {{togglePress ? 'On ' : 'Off'}}</CButton>
+            <CButton variant="outline" color="secondary" :pressed.sync="togglePress">Secondary {{togglePress ? 'On ' : 'Off'}}</CButton>
           </CCol>
           <CCol sm xs="12" class="text-center mt-3">
-            <CButton outline color="success" :pressed.sync="togglePress">Success {{togglePress ? 'On ' : 'Off'}}</CButton>
+            <CButton variant="outline" color="success" :pressed.sync="togglePress">Success {{togglePress ? 'On ' : 'Off'}}</CButton>
           </CCol>
           <CCol sm xs="12" class="text-center mt-3">
-            <CButton outline color="info" :pressed.sync="togglePress">Info {{togglePress ? 'On ' : 'Off'}}</CButton>
+            <CButton variant="outline" color="info" :pressed.sync="togglePress">Info {{togglePress ? 'On ' : 'Off'}}</CButton>
           </CCol>
           <CCol sm xs="12" class="text-center mt-3">
-            <CButton outline color="warning" :pressed.sync="togglePress">Warning {{togglePress ? 'On ' : 'Off'}}</CButton>
+            <CButton variant="outline" color="warning" :pressed.sync="togglePress">Warning {{togglePress ? 'On ' : 'Off'}}</CButton>
           </CCol>
           <CCol sm xs="12" class="text-center mt-3">
-            <CButton outline color="danger" :pressed.sync="togglePress">Danger {{togglePress ? 'On ' : 'Off'}}</CButton>
+            <CButton variant="outline" color="danger" :pressed.sync="togglePress">Danger {{togglePress ? 'On ' : 'Off'}}</CButton>
           </CCol>
         </CRow>
       </CCardBody>
@@ -680,13 +680,13 @@
             <strong>Block Level CButtons </strong><small>Add this <code>block</code></small>
           </CCardHeader>
           <CCardBody>
-            <CButton size="lg" outline color="secondary" block>Block level button</CButton>
-            <CButton size="lg" outline color="primary" block>Block level button</CButton>
-            <CButton size="lg" outline color="success" block>Block level button</CButton>
-            <CButton size="lg" outline color="info" block>Block level button</CButton>
-            <CButton size="lg" outline color="warning" block>Block level button</CButton>
-            <CButton size="lg" outline color="danger" block>Block level button</CButton>
-            <CButton size="lg" ghost color="info" block>Block level button</CButton>
+            <CButton size="lg" variant="outline" color="secondary" block>Block level button</CButton>
+            <CButton size="lg" variant="outline" color="primary" block>Block level button</CButton>
+            <CButton size="lg" variant="outline" color="success" block>Block level button</CButton>
+            <CButton size="lg" variant="outline" color="info" block>Block level button</CButton>
+            <CButton size="lg" variant="outline" color="warning" block>Block level button</CButton>
+            <CButton size="lg" variant="outline" color="danger" block>Block level button</CButton>
+            <CButton size="lg" variant="ghost" color="info" block>Block level button</CButton>
           </CCardBody>
         </CCard>
       </CCol>
diff --git a/src/views/icons/Brands.vue b/src/views/icons/Brands.vue
index 57c2ac1f..76c1de90 100644
--- a/src/views/icons/Brands.vue
+++ b/src/views/icons/Brands.vue
@@ -13,7 +13,7 @@
               sm="2"
               :key="brandName"
             >
-              <CIcon :height="42" :content="$options.brands[brandName]"/>
+              <CIcon :height="42" :content="brand"/>
               <div>{{brandName}}</div>
             </CCol>
           </template>
@@ -24,7 +24,7 @@
 </template>
 
 <script>
-import { iconSet as brands } from '@coreui/icons/brands'
+import { brandSet as brands } from '@coreui/icons'
 export default {
   name: 'Brands',
   brands
diff --git a/src/views/icons/CoreUIIcons.vue b/src/views/icons/CoreUIIcons.vue
index 38d0d2ea..f363ffc3 100644
--- a/src/views/icons/CoreUIIcons.vue
+++ b/src/views/icons/CoreUIIcons.vue
@@ -1,8 +1,9 @@
+
 <template>
   <div>
     <CCard>
       <CCardHeader>
-        <i class="cui-pencil"></i>CoreUI Icons
+        <CIcon :content="$options.freeSet.pencil"/>CoreUI Icons
         <CBadge color="info">New</CBadge>
         <div class="card-header-actions">
           <a
@@ -16,427 +17,28 @@
         </div>
       </CCardHeader>
       <CCardBody>
-        <!-- <CRow class="text-center mb-5">
-          <template v-for="(name, key) in $options.iconNames">
-            <CCol :key="key" col="6" sm="4" md="3" xl="2">
-              <CIcon :name="name" width="24" class="mt-4"/>
-              <div>{{name}}</div>
+        <CRow class="text-center">
+          <template v-for="(icon, iconName) in $options.freeSet">
+            <CCol
+              class="mb-5"
+              col="3"
+              sm="2"
+              :key="iconName"
+            >
+              <CIcon :height="42" :content="icon"/>
+              <div>{{iconName}}</div>
             </CCol>
           </template>
         </CRow>
-         -->
-        <CRow class="text-center ">
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-account-logout icons font-2xl d-block mt-4"></i>
-            <div>account-logout</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-action-redo icons font-2xl d-block mt-4"></i>
-            <div>action-redo</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-action-undo icons font-2xl d-block mt-4"></i>
-            <div>action-undo</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-align-center icons font-2xl d-block mt-4"></i>
-            <div>align-center</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-align-left icons font-2xl d-block mt-4"></i>
-            <div>align-left</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-align-right icons font-2xl d-block mt-4"></i>
-            <div>align-right</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-arrow-bottom icons font-2xl d-block mt-4"></i>
-            <div>arrow-bottom</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-arrow-left icons font-2xl d-block mt-4"></i>
-            <div>arrow-left</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-arrow-right icons font-2xl d-block mt-4"></i>
-            <div>arrow-right</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-arrow-top icons font-2xl d-block mt-4"></i>
-            <div>arrow-top</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-ban icons font-2xl d-block mt-4"></i>
-            <div>ban</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-basket-loaded icons font-2xl d-block mt-4"></i>
-            <div>basket-loaded</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-bell icons font-2xl d-block mt-4"></i>
-            <div>bell</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-bold icons font-2xl d-block mt-4"></i>
-            <div>bold</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-bookmark icons font-2xl d-block mt-4"></i>
-            <div>bookmark</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-briefcase icons font-2xl d-block mt-4"></i>
-            <div>briefcase</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-british-pound icons font-2xl d-block mt-4"></i>
-            <div>british-pound</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-brush icons font-2xl d-block mt-4"></i>
-            <div>brush</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-calculator icons font-2xl d-block mt-4"></i>
-            <div>calculator</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-calendar icons font-2xl d-block mt-4"></i>
-            <div>calendar</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-cart icons font-2xl d-block mt-4"></i>
-            <div>cart</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-chart icons font-2xl d-block mt-4"></i>
-            <div>chart</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-check icons font-2xl d-block mt-4"></i>
-            <div>check</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-chevron-bottom icons font-2xl d-block mt-4"></i>
-            <div>chevron-bottom</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-chevron-left icons font-2xl d-block mt-4"></i>
-            <div>chevron-left</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-chevron-right icons font-2xl d-block mt-4"></i>
-            <div>chevron-right</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-chevron-top icons font-2xl d-block mt-4"></i>
-            <div>chevron-top</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-circle-check icons font-2xl d-block mt-4"></i>
-            <div>circle-check</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-circle-x icons font-2xl d-block mt-4"></i>
-            <div>circle-x</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-cloud icons font-2xl d-block mt-4"></i>
-            <div>cloud</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-cloud-download icons font-2xl d-block mt-4"></i>
-            <div>cloud-download</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-cloud-upload icons font-2xl d-block mt-4"></i>
-            <div>cloud-upload</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-code icons font-2xl d-block mt-4"></i>
-            <div>code</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-cog icons font-2xl d-block mt-4"></i>
-            <div>cog</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-comment-square icons font-2xl d-block mt-4"></i>
-            <div>comment-square</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-credit-card icons font-2xl d-block mt-4"></i>
-            <div>credit-card</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-cursor icons font-2xl d-block mt-4"></i>
-            <div>cursor</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-dashboard icons font-2xl d-block mt-4"></i>
-            <div>dashboard</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-delete icons font-2xl d-block mt-4"></i>
-            <div>delete</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-dollar icons font-2xl d-block mt-4"></i>
-            <div>dollar</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-drop icons font-2xl d-block mt-4"></i>
-            <div>drop</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-envelope-closed icons font-2xl d-block mt-4"></i>
-            <div>envelope-closed</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-envelope-letter icons font-2xl d-block mt-4"></i>
-            <div>envelope-letter</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-envelope-open icons font-2xl d-block mt-4"></i>
-            <div>envelope-open</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-euro icons font-2xl d-block mt-4"></i>
-            <div>euro</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-file icons font-2xl d-block mt-4"></i>
-            <div>file</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-globe icons font-2xl d-block mt-4"></i>
-            <div>globe</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-graph icons font-2xl d-block mt-4"></i>
-            <div>graph</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-home icons font-2xl d-block mt-4"></i>
-            <div>home</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-inbox icons font-2xl d-block mt-4"></i>
-            <div>inbox</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-info icons font-2xl d-block mt-4"></i>
-            <div>info</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-italic icons font-2xl d-block mt-4"></i>
-            <div>italic</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-justify-center icons font-2xl d-block mt-4"></i>
-            <div>justify-center</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-justify-left icons font-2xl d-block mt-4"></i>
-            <div>justify-left</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-justify-right icons font-2xl d-block mt-4"></i>
-            <div>justify-right</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-laptop icons font-2xl d-block mt-4"></i>
-            <div>laptop</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-layers icons font-2xl d-block mt-4"></i>
-            <div>layers</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-lightbulb icons font-2xl d-block mt-4"></i>
-            <div>lightbulb</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-list icons font-2xl d-block mt-4"></i>
-            <div>list</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-location-pin icons font-2xl d-block mt-4"></i>
-            <div>location-pin</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-lock-locked icons font-2xl d-block mt-4"></i>
-            <div>lock-locked</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-lock-unlocked icons font-2xl d-block mt-4"></i>
-            <div>lock-unlocked</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-magnifying-glass icons font-2xl d-block mt-4"></i>
-            <div>magnifying-glass</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-map icons font-2xl d-block mt-4"></i>
-            <div>map</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-monitor icons font-2xl d-block mt-4"></i>
-            <div>monitor</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-moon icons font-2xl d-block mt-4"></i>
-            <div>moon</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-note icons font-2xl d-block mt-4"></i>
-            <div>note</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-options icons font-2xl d-block mt-4"></i>
-            <div>options</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-paperclip icons font-2xl d-block mt-4"></i>
-            <div>paperclip</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-pencil icons font-2xl d-block mt-4"></i>
-            <div>pencil</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-people icons font-2xl d-block mt-4"></i>
-            <div>people</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-phone icons font-2xl d-block mt-4"></i>
-            <div>phone</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-pie-chart icons font-2xl d-block mt-4"></i>
-            <div>pie-chart</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-print icons font-2xl d-block mt-4"></i>
-            <div>print</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-puzzle icons font-2xl d-block mt-4"></i>
-            <div>puzzle</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-rss icons font-2xl d-block mt-4"></i>
-            <div>rss</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-screen-desktop icons font-2xl d-block mt-4"></i>
-            <div>screen-desktop</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-screen-smartphone icons font-2xl d-block mt-4"></i>
-            <div>screen-smartphone</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-settings icons font-2xl d-block mt-4"></i>
-            <div>settings</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-share icons font-2xl d-block mt-4"></i>
-            <div>share</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-shield icons font-2xl d-block mt-4"></i>
-            <div>shield</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-sort-ascending icons font-2xl d-block mt-4"></i>
-            <div>sort-ascending</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-sort-descending icons font-2xl d-block mt-4"></i>
-            <div>sort-descending</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-speech icons font-2xl d-block mt-4"></i>
-            <div>speech</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-speedometer icons font-2xl d-block mt-4"></i>
-            <div>speedometer</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-star icons font-2xl d-block mt-4"></i>
-            <div>star</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-sun icons font-2xl d-block mt-4"></i>
-            <div>sun</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-tablet icons font-2xl d-block mt-4"></i>
-            <div>tablet</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-tags icons font-2xl d-block mt-4"></i>
-            <div>tags</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-task icons font-2xl d-block mt-4"></i>
-            <div>task</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-thumb-down icons font-2xl d-block mt-4"></i>
-            <div>thumb-down</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-thumb-up icons font-2xl d-block mt-4"></i>
-            <div>thumb-up</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-trash icons font-2xl d-block mt-4"></i>
-            <div>trash</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-underline icons font-2xl d-block mt-4"></i>
-            <div>underline</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-user icons font-2xl d-block mt-4"></i>
-            <div>user</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-user-female icons font-2xl d-block mt-4"></i>
-            <div>user-female</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-user-follow icons font-2xl d-block mt-4"></i>
-            <div>user-follow</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-user-unfollow icons font-2xl d-block mt-4"></i>
-            <div>user-unfollow</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-wrench icons font-2xl d-block mt-4"></i>
-            <div>wrench</div>
-          </CCol>
-          <CCol col="6" sm="4" md="3" xl="2">
-            <i class="cui-yen icons font-2xl d-block mt-4"></i>
-            <div>yen</div>
-          </CCol>
-        </CRow>
       </CCardBody>
     </CCard>
   </div>
 </template>
-<script>
-// import { iconSet } from '@coreui/icons'
-// const iconNames = Object.keys(iconSet)
 
+<script>
+import { freeSet } from '@coreui/icons'
 export default {
   name: 'CoreUIIcons',
-  // iconNames,
+  freeSet
 }
 </script>
diff --git a/src/views/icons/Flags.vue b/src/views/icons/Flags.vue
index b47e8faa..52ad0d81 100644
--- a/src/views/icons/Flags.vue
+++ b/src/views/icons/Flags.vue
@@ -20,8 +20,8 @@
               sm="2"
               :key="key"
             >
-              <CIcon :height="42" :content="$options.iconSet[flag]"/>
-              <div>{{flag}}</div>
+              <CIcon :height="42" :content="flag"/>
+              <div>{{key}}</div>
             </CCol>
           </template>
         </CRow>
@@ -31,15 +31,15 @@
 </template>
 
 <script>
-import { iconSet } from '@coreui/icons/flags'
+import { flagSet } from '@coreui/icons'
 export default {
   name: 'Flags',
-  iconSet,
+  flagSet,
   computed: {
     // Avoid duplication caused by displaying 1x1 and 4x3 formats
     // (adding Q to name makes icon quadratic)
     displayedFlags () {
-      return Object.keys(this.$options.iconSet).filter(icon => !icon.includes('Q'))
+      return this.$options.flagSet
     }
   }
 }
diff --git a/src/views/notifications/Alerts.vue b/src/views/notifications/Alerts.vue
index 7eebb23e..80df9350 100644
--- a/src/views/notifications/Alerts.vue
+++ b/src/views/notifications/Alerts.vue
@@ -107,16 +107,7 @@
 
           <CAlert
             color="secondary"
-            closeButton
-            fade
             :show.sync="alert2"
-          >
-            Dismissible Alert with fade effect!
-          </CAlert>
-
-          <CAlert
-            color="secondary"
-            :show.sync="alert3"
             class="alert-dismissible"
           >
             Dismissible Alert with custom button!
@@ -124,7 +115,7 @@
               class="position-absolute"
               color="secondary"
               style="right:10px;top: 50%;transform: translateY(-50%);"
-              @click="alert3 = false"
+              @click="alert2 = false"
             >
               Close
             </CButton>
@@ -186,8 +177,7 @@ export default {
       dismissSecs: 10,
       dismissCountDown: 10,
       alert1: true,
-      alert2: true,
-      alert3: true
+      alert2: true
     }
   },
   methods: {
diff --git a/src/views/notifications/Badges.vue b/src/views/notifications/Badges.vue
index f1cbecbd..16c1b792 100644
--- a/src/views/notifications/Badges.vue
+++ b/src/views/notifications/Badges.vue
@@ -51,17 +51,17 @@
       <CCard>
         <CCardHeader>
           <i class="fa fa-align-justify"></i> Badge
-          <small>pills</small>
+          <small>shape="pill"</small>
         </CCardHeader>
         <CCardBody>
-          <CBadge pill color="primary">Primary</CBadge>
-          <CBadge pill color="secondary">Secondary</CBadge>
-          <CBadge pill color="success">Success</CBadge>
-          <CBadge pill color="danger">Danger</CBadge>
-          <CBadge pill color="warning">Warning</CBadge>
-          <CBadge pill color="info">Info</CBadge>
-          <CBadge pill color="light">Light</CBadge>
-          <CBadge pill color="dark">Dark</CBadge>
+          <CBadge shape="pill" color="primary">Primary</CBadge>
+          <CBadge shape="pill" color="secondary">Secondary</CBadge>
+          <CBadge shape="pill" color="success">Success</CBadge>
+          <CBadge shape="pill" color="danger">Danger</CBadge>
+          <CBadge shape="pill" color="warning">Warning</CBadge>
+          <CBadge shape="pill" color="info">Info</CBadge>
+          <CBadge shape="pill" color="light">Light</CBadge>
+          <CBadge shape="pill" color="dark">Dark</CBadge>
         </CCardBody>
       </CCard>
       <CCard>
diff --git a/src/views/notifications/Modals.vue b/src/views/notifications/Modals.vue
index b34ecb89..e1c06834 100644
--- a/src/views/notifications/Modals.vue
+++ b/src/views/notifications/Modals.vue
@@ -91,6 +91,7 @@
     <CModal
       title="Modal title"
       :show.sync="primaryModal"
+      color="primary"
     >
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
diff --git a/src/views/users/User.vue b/src/views/users/User.vue
index dbf0e450..1c00357b 100644
--- a/src/views/users/User.vue
+++ b/src/views/users/User.vue
@@ -6,7 +6,7 @@
           User id:  {{ $route.params.id }}
         </CCardHeader>
         <CCardBody>
-          <CTable
+          <CDataTable
             striped
             small
             fixed
diff --git a/src/views/users/Users.vue b/src/views/users/Users.vue
index 5034db2d..b13eff6b 100644
--- a/src/views/users/Users.vue
+++ b/src/views/users/Users.vue
@@ -3,7 +3,7 @@
     <CCol col="12" xl="8">
       <transition name="slide">
         <CCard header-html="Users" body-wrapper>
-          <CTable
+          <CDataTable
             hover
             striped
             :items="items"
@@ -27,7 +27,7 @@
                 </CBadge>
               </td>
             </template>
-          </CTable>
+          </CDataTable>
         </CCard>
       </transition>
     </CCol>
diff --git a/src/views/widgets/Widgets.vue b/src/views/widgets/Widgets.vue
index 32f61f20..888d4f53 100644
--- a/src/views/widgets/Widgets.vue
+++ b/src/views/widgets/Widgets.vue
@@ -276,7 +276,7 @@
         text="Products sold"
         color="warning"
       >
-        <CIcon name="basketLoaded" height="36"/>
+        <CIcon name="basket" height="36"/>
       </CWidgetProgressIcon>
       <CWidgetProgressIcon
         header="28%"
@@ -315,7 +315,7 @@
         color="warning"
         inverse
       >
-        <CIcon name="basketLoaded" height="36"/>
+        <CIcon name="basket" height="36"/>
       </CWidgetProgressIcon>
       <CWidgetProgressIcon
         header="28%"
@@ -359,7 +359,7 @@
           text="Products sold"
           color="warning"
         >
-          <CIcon name="basketLoaded" height="36"/>
+          <CIcon name="basket" height="36"/>
         </CWidgetProgressIcon>
       </CCol>
       <CCol sm="6" md="2">
@@ -418,7 +418,7 @@
           color="warning"
           inverse
         >
-          <CIcon name="basketLoaded" height="36"/>
+          <CIcon name="basket" height="36"/>
         </CWidgetProgressIcon>
       </CCol>
       <CCol sm="6" md="2">
diff --git a/tests/unit/containers/__snapshots__/TheHeader.spec.js.snap b/tests/unit/containers/__snapshots__/TheHeader.spec.js.snap
index 86182340..4858e651 100644
--- a/tests/unit/containers/__snapshots__/TheHeader.spec.js.snap
+++ b/tests/unit/containers/__snapshots__/TheHeader.spec.js.snap
@@ -42,7 +42,18 @@ exports[`TheHeader.vue renders correctly 1`] = `
       target="_self"
       to="/dashboard"
     >
-      Dashboard
+      <cheadernavlink-stub
+        activeclass="active"
+        event="click"
+        exactactiveclass="active"
+        routertag="a"
+        tag="span"
+        target="_self"
+      >
+        
+        Dashboard
+      
+      </cheadernavlink-stub>
     </cheadernavitem-stub>
      
     <cheadernavitem-stub
@@ -56,7 +67,18 @@ exports[`TheHeader.vue renders correctly 1`] = `
       target="_self"
       to="/users"
     >
-      Users
+      <cheadernavlink-stub
+        activeclass="active"
+        event="click"
+        exactactiveclass="active"
+        routertag="a"
+        tag="span"
+        target="_self"
+      >
+        
+        Users
+      
+      </cheadernavlink-stub>
     </cheadernavitem-stub>
      
     <cheadernavitem-stub
@@ -68,7 +90,18 @@ exports[`TheHeader.vue renders correctly 1`] = `
       tag="span"
       target="_self"
     >
-      Settings
+      <cheadernavlink-stub
+        activeclass="active"
+        event="click"
+        exactactiveclass="active"
+        routertag="a"
+        tag="span"
+        target="_self"
+      >
+        
+        Settings
+      
+      </cheadernavlink-stub>
     </cheadernavitem-stub>
   </cheadernav-stub>
    
@@ -84,9 +117,18 @@ exports[`TheHeader.vue renders correctly 1`] = `
       tag="span"
       target="_self"
     >
-      <i
-        class="cui-bell"
-      />
+      <cheadernavlink-stub
+        activeclass="active"
+        event="click"
+        exactactiveclass="active"
+        routertag="a"
+        tag="span"
+        target="_self"
+      >
+        <i
+          class="cui-bell"
+        />
+      </cheadernavlink-stub>
     </cheadernavitem-stub>
      
     <cheadernavitem-stub
@@ -98,9 +140,18 @@ exports[`TheHeader.vue renders correctly 1`] = `
       tag="span"
       target="_self"
     >
-      <i
-        class="cui-list"
-      />
+      <cheadernavlink-stub
+        activeclass="active"
+        event="click"
+        exactactiveclass="active"
+        routertag="a"
+        tag="span"
+        target="_self"
+      >
+        <i
+          class="cui-list"
+        />
+      </cheadernavlink-stub>
     </cheadernavitem-stub>
      
     <cheadernavitem-stub
@@ -112,9 +163,18 @@ exports[`TheHeader.vue renders correctly 1`] = `
       tag="span"
       target="_self"
     >
-      <i
-        class="cui-envelope-open"
-      />
+      <cheadernavlink-stub
+        activeclass="active"
+        event="click"
+        exactactiveclass="active"
+        routertag="a"
+        tag="span"
+        target="_self"
+      >
+        <i
+          class="cui-envelope-open"
+        />
+      </cheadernavlink-stub>
     </cheadernavitem-stub>
      
     <theheaderdropdownaccnt-stub />
diff --git a/tests/unit/containers/__snapshots__/TheHeaderDropdownAccnt.spec.js.snap b/tests/unit/containers/__snapshots__/TheHeaderDropdownAccnt.spec.js.snap
index b17a0aad..8982c35d 100644
--- a/tests/unit/containers/__snapshots__/TheHeaderDropdownAccnt.spec.js.snap
+++ b/tests/unit/containers/__snapshots__/TheHeaderDropdownAccnt.spec.js.snap
@@ -6,8 +6,7 @@ exports[`TheHeaderDropdownAccnt.vue renders correctly 1`] = `
   caret="true"
   class="c-header-nav-items"
   flip="true"
-  nav=""
-  no-caret=""
+  innav="true"
   placement="bottom-end"
   togglertext="Dropdown"
 >
diff --git a/tests/unit/views/__snapshots__/Dashboard.spec.js.snap b/tests/unit/views/__snapshots__/Dashboard.spec.js.snap
index e8e5da39..6610bc49 100644
--- a/tests/unit/views/__snapshots__/Dashboard.spec.js.snap
+++ b/tests/unit/views/__snapshots__/Dashboard.spec.js.snap
@@ -569,8 +569,8 @@ exports[`Dashboard.vue renders correctly 1`] = `
                     color="info"
                     event="click"
                     exactactiveclass="active"
-                    pill="true"
                     routertag="a"
+                    shape="pill"
                     tag="span"
                     target="_self"
                   >
@@ -587,8 +587,8 @@ exports[`Dashboard.vue renders correctly 1`] = `
                     color="danger"
                     event="click"
                     exactactiveclass="active"
-                    pill="true"
                     routertag="a"
+                    shape="pill"
                     tag="span"
                     target="_self"
                   >
@@ -936,7 +936,7 @@ exports[`Dashboard.vue renders correctly 1`] = `
          
         <br />
          
-        <ctable-stub
+        <cdatatable-stub
           class="mb-0 table-outline"
           defaultsorter="[object Object]"
           fields="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
diff --git a/tests/unit/views/base/__snapshots__/Cards.spec.js.snap b/tests/unit/views/base/__snapshots__/Cards.spec.js.snap
index 24f42fe1..54e5b2b0 100644
--- a/tests/unit/views/base/__snapshots__/Cards.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Cards.spec.js.snap
@@ -175,7 +175,8 @@ exports[`Cards.vue renders correctly 1`] = `
           Card with label
           
           <span
-            class="badge float-right badge-danger badge-pill"
+            class="badge float-right badge-danger"
+            shape="pill"
           >
             42
           </span>
diff --git a/tests/unit/views/base/__snapshots__/Carousels.spec.js.snap b/tests/unit/views/base/__snapshots__/Carousels.spec.js.snap
index b4151b86..65ac452d 100644
--- a/tests/unit/views/base/__snapshots__/Carousels.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Carousels.spec.js.snap
@@ -68,7 +68,7 @@ exports[`Carousels.vue renders correctly 1`] = `
             >
               <img
                 class="d-block w-100 h-100 img-fluid"
-                src="https://lorempixel.com/1024/480/technics/2/"
+                src="https://picsum.photos/1024/480/?image=52"
               />
               <div
                 class="carousel-caption"
@@ -86,9 +86,8 @@ exports[`Carousels.vue renders correctly 1`] = `
               class="carousel-item"
             >
               <svg
-                blankColor="grey"
                 class="d-block w-100 h-100 img-fluid"
-                style="background-color: transparent;"
+                style="background-color: grey;"
               />
               <div
                 class="carousel-caption"
@@ -107,7 +106,7 @@ exports[`Carousels.vue renders correctly 1`] = `
             >
               <img
                 class="d-block w-100 h-100 img-fluid"
-                src="https://lorempixel.com/1024/480/technics/8/"
+                src="https://picsum.photos/1024/480/?image=54"
               />
               <!---->
             </div>
diff --git a/tests/unit/views/base/__snapshots__/Jumbotrons.spec.js.snap b/tests/unit/views/base/__snapshots__/Jumbotrons.spec.js.snap
index d43bebb5..cb231c1f 100644
--- a/tests/unit/views/base/__snapshots__/Jumbotrons.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Jumbotrons.spec.js.snap
@@ -49,7 +49,7 @@ exports[`Jumbotrons.vue renders correctly 1`] = `
             <p
               class="lead"
             >
-              Bootstrap 4 Components for Vue.js 2
+              Bootstrap 4 Components for Vue.js 2.6+
             </p>
              
             <p>
diff --git a/tests/unit/views/base/__snapshots__/ListGroups.spec.js.snap b/tests/unit/views/base/__snapshots__/ListGroups.spec.js.snap
index 4aa5ea4f..17748d77 100644
--- a/tests/unit/views/base/__snapshots__/ListGroups.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/ListGroups.spec.js.snap
@@ -462,8 +462,8 @@ exports[`ListGroups.vue renders correctly 1`] = `
                 color="primary"
                 event="click"
                 exactactiveclass="active"
-                pill="true"
                 routertag="a"
+                shape="pill"
                 tag="span"
                 target="_self"
               >
@@ -488,8 +488,8 @@ exports[`ListGroups.vue renders correctly 1`] = `
                 color="primary"
                 event="click"
                 exactactiveclass="active"
-                pill="true"
                 routertag="a"
+                shape="pill"
                 tag="span"
                 target="_self"
               >
@@ -514,8 +514,8 @@ exports[`ListGroups.vue renders correctly 1`] = `
                 color="primary"
                 event="click"
                 exactactiveclass="active"
-                pill="true"
                 routertag="a"
+                shape="pill"
                 tag="span"
                 target="_self"
               >
diff --git a/tests/unit/views/base/__snapshots__/Navs.spec.js.snap b/tests/unit/views/base/__snapshots__/Navs.spec.js.snap
index 337bcc4d..7ca544e7 100644
--- a/tests/unit/views/base/__snapshots__/Navs.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Navs.spec.js.snap
@@ -168,7 +168,7 @@ exports[`Navs.vue renders correctly 1`] = `
      
     <ccardbody-stub>
       <cnav-stub
-        tabs="true"
+        variant="tabs"
       >
         <cnavitem-stub
           active="true"
@@ -242,7 +242,7 @@ exports[`Navs.vue renders correctly 1`] = `
      
     <ccardbody-stub>
       <cnav-stub
-        pills="true"
+        variant="pills"
       >
         <cnavitem-stub
           active="true"
@@ -311,7 +311,7 @@ exports[`Navs.vue renders correctly 1`] = `
     <ccardbody-stub>
       <cnav-stub
         fill="true"
-        tabs="true"
+        variant="tabs"
       >
         <cnavitem-stub
           active="true"
@@ -380,7 +380,7 @@ exports[`Navs.vue renders correctly 1`] = `
     <ccardbody-stub>
       <cnav-stub
         justified="true"
-        tabs="true"
+        variant="tabs"
       >
         <cnavitem-stub
           active="true"
@@ -448,7 +448,7 @@ exports[`Navs.vue renders correctly 1`] = `
      
     <ccardbody-stub>
       <cnav-stub
-        pills="true"
+        pills=""
       >
         <cnavitem-stub
           active="true"
@@ -545,7 +545,7 @@ exports[`Navs.vue renders correctly 1`] = `
           tag="div"
         >
           <cnav-stub
-            pills="true"
+            pills=""
             vertical="true"
           >
             <cnavitem-stub
diff --git a/tests/unit/views/base/__snapshots__/Paginations.spec.js.snap b/tests/unit/views/base/__snapshots__/Paginations.spec.js.snap
index 6347317c..83bf3d01 100644
--- a/tests/unit/views/base/__snapshots__/Paginations.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Paginations.spec.js.snap
@@ -48,7 +48,6 @@ exports[`Paginations.vue renders correctly 1`] = `
         pages="10"
         previousbuttonhtml="&lsaquo;"
         responsive=""
-        size="md"
       />
        
       <br />
@@ -136,7 +135,6 @@ exports[`Paginations.vue renders correctly 1`] = `
         nextbuttonhtml="&rsaquo;"
         pages="10"
         previousbuttonhtml="&lsaquo;"
-        size="md"
       />
        
       <br />
@@ -157,7 +155,6 @@ exports[`Paginations.vue renders correctly 1`] = `
         nextbuttonhtml="&rsaquo;"
         pages="10"
         previousbuttonhtml="&lsaquo;"
-        size="md"
       />
        
       <br />
@@ -178,7 +175,6 @@ exports[`Paginations.vue renders correctly 1`] = `
         nextbuttonhtml="&rsaquo;"
         pages="10"
         previousbuttonhtml="&lsaquo;"
-        size="md"
       />
        
       <br />
diff --git a/tests/unit/views/base/__snapshots__/Switches.spec.js.snap b/tests/unit/views/base/__snapshots__/Switches.spec.js.snap
index c7774cdb..21522914 100644
--- a/tests/unit/views/base/__snapshots__/Switches.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Switches.spec.js.snap
@@ -2568,7 +2568,7 @@ exports[`Switches.vue renders correctly 1`] = `
         <ccardbody-stub
           class="p-0"
         >
-          <ctable-stub
+          <cdatatable-stub
             class="table-align-middle mb-0"
             defaultsorter="[object Object]"
             fields="[object Object],[object Object],[object Object]"
diff --git a/tests/unit/views/base/__snapshots__/Table.spec.js.snap b/tests/unit/views/base/__snapshots__/Table.spec.js.snap
index 7f8b525b..d7161f71 100644
--- a/tests/unit/views/base/__snapshots__/Table.spec.js.snap
+++ b/tests/unit/views/base/__snapshots__/Table.spec.js.snap
@@ -5,7 +5,7 @@ exports[`Table.vue renders correctly 1`] = `
   bodywrapper="true"
   header="Table"
 >
-  <ctable-stub
+  <cdatatable-stub
     defaultsorter="[object Object]"
     fields="username,registered,role,status"
     itemsperpage="5"
diff --git a/tests/unit/views/base/__snapshots__/Tabs.spec.js.snap b/tests/unit/views/base/__snapshots__/Tabs.spec.js.snap
deleted file mode 100644
index 4eaa320f..00000000
--- a/tests/unit/views/base/__snapshots__/Tabs.spec.js.snap
+++ /dev/null
@@ -1,363 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Tabs.vue renders correctly 1`] = `
-<div>
-  <crow-stub
-    gutters="true"
-  >
-    <ccol-stub
-      lg="6"
-      tag="div"
-      xs="12"
-    >
-      <ccard-stub>
-        <ccardheader-stub>
-          
-          Tabs
-          
-          <div
-            class="card-header-actions"
-          >
-            <a
-              class="card-header-action"
-              href="https://coreui.io/vue/docs/3.0/components/Tabs"
-              rel="noreferrer noopener"
-              target="_blank"
-            >
-              <small
-                class="text-muted"
-              >
-                docs
-              </small>
-            </a>
-          </div>
-        </ccardheader-stub>
-         
-        <ccardbody-stub>
-          <ctabs-stub
-            fade="true"
-            tabs="true"
-          >
-            <ctab-stub
-              active="true"
-              titlehtml="Home"
-            >
-              
-              1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-              officia deserunt mollit anim id est laborum.
-            
-            </ctab-stub>
-             
-            <ctab-stub
-              titlehtml="Profile"
-            >
-              
-              2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-              officia deserunt mollit anim id est laborum.
-            
-            </ctab-stub>
-             
-            <ctab-stub
-              disabled="true"
-              titlehtml="Disabled"
-            >
-              
-              3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-              officia deserunt mollit anim id est laborum.
-            
-            </ctab-stub>
-          </ctabs-stub>
-        </ccardbody-stub>
-      </ccard-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      lg="6"
-      tag="div"
-      xs="12"
-    >
-      <ccard-stub>
-        <ccardheader-stub>
-          
-          Tabs
-        
-        </ccardheader-stub>
-         
-        <ccardbody-stub>
-          <ctabs-stub
-            fade="true"
-            pills="true"
-            tabs="true"
-          >
-            <ctab-stub
-              active="true"
-              titlehtml="Home"
-            >
-              
-              1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-              officia deserunt mollit anim id est laborum.
-            
-            </ctab-stub>
-             
-            <ctab-stub
-              titlehtml="Profile"
-            >
-              
-              2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-              officia deserunt mollit anim id est laborum.
-            
-            </ctab-stub>
-             
-            <ctab-stub
-              disabled="true"
-              titlehtml="Disabled"
-            >
-              
-              3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-              officia deserunt mollit anim id est laborum.
-            
-            </ctab-stub>
-          </ctabs-stub>
-        </ccardbody-stub>
-      </ccard-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      lg="6"
-      tag="div"
-      xs="12"
-    >
-      <ccard-stub>
-        <ccardheader-stub>
-          
-          Tabs with icons
-        
-        </ccardheader-stub>
-         
-        <ccardbody-stub>
-          <ctabs-stub
-            fade="true"
-            tabs="true"
-          >
-            <ctab-stub
-              active="true"
-            >
-              <template>
-                <i
-                  class="cui-calculator"
-                />
-              </template>
-              
-              1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-              officia deserunt mollit anim id est laborum.
-            
-            </ctab-stub>
-             
-            <ctab-stub>
-              <template>
-                <i
-                  class="cui-basket-loaded"
-                />
-              </template>
-              
-              2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-              officia deserunt mollit anim id est laborum.
-            
-            </ctab-stub>
-             
-            <ctab-stub>
-              <template>
-                <i
-                  class="cui-pie-chart"
-                />
-              </template>
-              
-              3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-              officia deserunt mollit anim id est laborum.
-            
-            </ctab-stub>
-          </ctabs-stub>
-        </ccardbody-stub>
-      </ccard-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      lg="6"
-      tag="div"
-      xs="12"
-    >
-      <ccard-stub>
-        <ccardheader-stub>
-          
-          Tabs with icons
-        
-        </ccardheader-stub>
-         
-        <ccardbody-stub>
-          <ctabs-stub
-            addtabclasses="mt-1"
-            fade="true"
-            tabs="true"
-          >
-            <ctab-stub
-              active="true"
-            >
-              <template>
-                <i
-                  class="cui-calculator"
-                />
-                 Calculator
-              
-              </template>
-              
-              1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-              officia deserunt mollit anim id est laborum.
-            
-            </ctab-stub>
-             
-            <ctab-stub>
-              <template>
-                <i
-                  class="cui-basket-loaded"
-                />
-                 Shopping cart
-              
-              </template>
-              
-              2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-              officia deserunt mollit anim id est laborum.
-            
-            </ctab-stub>
-             
-            <ctab-stub>
-              <template>
-                <i
-                  class="cui-pie-chart"
-                />
-                 Charts
-              
-              </template>
-              
-              3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-              officia deserunt mollit anim id est laborum.
-            
-            </ctab-stub>
-          </ctabs-stub>
-        </ccardbody-stub>
-      </ccard-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      lg="6"
-      tag="div"
-      xs="12"
-    >
-      <ccard-stub>
-        <ccardheader-stub>
-          
-          Tabs vertical
-        
-        </ccardheader-stub>
-         
-        <ccardbody-stub>
-          <ctabs-stub
-            fade="true"
-            pills="true"
-            tabs="true"
-            vertical="true"
-          >
-            <ctab-stub
-              active="true"
-            >
-              <template>
-                <i
-                  class="cui-calculator"
-                />
-                 Calculator
-              
-              </template>
-              
-              1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-              officia deserunt mollit anim id est laborum.
-            
-            </ctab-stub>
-             
-            <ctab-stub>
-              <template>
-                <i
-                  class="cui-basket-loaded"
-                />
-                 Shopping cart
-              
-              </template>
-              
-              2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-              officia deserunt mollit anim id est laborum.
-            
-            </ctab-stub>
-             
-            <ctab-stub>
-              <template>
-                <i
-                  class="cui-pie-chart"
-                />
-                 Charts
-              
-              </template>
-              
-              3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
-              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-              officia deserunt mollit anim id est laborum.
-            
-            </ctab-stub>
-          </ctabs-stub>
-        </ccardbody-stub>
-      </ccard-stub>
-    </ccol-stub>
-  </crow-stub>
-</div>
-`;
diff --git a/tests/unit/views/buttons/__snapshots__/StandardButtons.spec.js.snap b/tests/unit/views/buttons/__snapshots__/StandardButtons.spec.js.snap
index 97c547ae..0482ca7f 100644
--- a/tests/unit/views/buttons/__snapshots__/StandardButtons.spec.js.snap
+++ b/tests/unit/views/buttons/__snapshots__/StandardButtons.spec.js.snap
@@ -710,7 +710,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         
         Use 
         <code>
-          outline
+          variant="outline"
         </code>
          prop
       
@@ -745,10 +745,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="primary"
             event="click"
             exactactiveclass="active"
-            outline="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="outline"
           >
             Primary
           </cbutton-stub>
@@ -768,10 +768,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="secondary"
             event="click"
             exactactiveclass="active"
-            outline="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="outline"
           >
             Secondary
           </cbutton-stub>
@@ -791,10 +791,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="success"
             event="click"
             exactactiveclass="active"
-            outline="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="outline"
           >
             Success
           </cbutton-stub>
@@ -814,10 +814,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="warning"
             event="click"
             exactactiveclass="active"
-            outline="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="outline"
           >
             Warning
           </cbutton-stub>
@@ -837,10 +837,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="danger"
             event="click"
             exactactiveclass="active"
-            outline="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="outline"
           >
             Danger
           </cbutton-stub>
@@ -860,10 +860,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="info"
             event="click"
             exactactiveclass="active"
-            outline="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="outline"
           >
             Info
           </cbutton-stub>
@@ -883,10 +883,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="light"
             event="click"
             exactactiveclass="active"
-            outline="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="outline"
           >
             Light
           </cbutton-stub>
@@ -906,10 +906,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="dark"
             event="click"
             exactactiveclass="active"
-            outline="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="outline"
           >
             Dark
           </cbutton-stub>
@@ -955,11 +955,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="primary"
             event="click"
             exactactiveclass="active"
-            outline="true"
             pressed="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="outline"
           >
             Primary
           </cbutton-stub>
@@ -980,11 +980,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="secondary"
             event="click"
             exactactiveclass="active"
-            outline="true"
             pressed="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="outline"
           >
             Secondary
           </cbutton-stub>
@@ -1005,11 +1005,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="success"
             event="click"
             exactactiveclass="active"
-            outline="true"
             pressed="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="outline"
           >
             Success
           </cbutton-stub>
@@ -1030,11 +1030,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="warning"
             event="click"
             exactactiveclass="active"
-            outline="true"
             pressed="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="outline"
           >
             Warning
           </cbutton-stub>
@@ -1055,11 +1055,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="danger"
             event="click"
             exactactiveclass="active"
-            outline="true"
             pressed="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="outline"
           >
             Danger
           </cbutton-stub>
@@ -1080,11 +1080,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="info"
             event="click"
             exactactiveclass="active"
-            outline="true"
             pressed="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="outline"
           >
             Info
           </cbutton-stub>
@@ -1105,11 +1105,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="light"
             event="click"
             exactactiveclass="active"
-            outline="true"
             pressed="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="outline"
           >
             Light
           </cbutton-stub>
@@ -1130,11 +1130,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="dark"
             event="click"
             exactactiveclass="active"
-            outline="true"
             pressed="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="outline"
           >
             Dark
           </cbutton-stub>
@@ -1180,10 +1180,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             disabled="true"
             event="click"
             exactactiveclass="active"
-            outline="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="outline"
           >
             Primary
           </cbutton-stub>
@@ -1204,10 +1204,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             disabled="true"
             event="click"
             exactactiveclass="active"
-            outline="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="outline"
           >
             Secondary
           </cbutton-stub>
@@ -1228,10 +1228,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             disabled="true"
             event="click"
             exactactiveclass="active"
-            outline="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="outline"
           >
             Success
           </cbutton-stub>
@@ -1252,10 +1252,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             disabled="true"
             event="click"
             exactactiveclass="active"
-            outline="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="outline"
           >
             Warning
           </cbutton-stub>
@@ -1276,10 +1276,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             disabled="true"
             event="click"
             exactactiveclass="active"
-            outline="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="outline"
           >
             Danger
           </cbutton-stub>
@@ -1300,10 +1300,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             disabled="true"
             event="click"
             exactactiveclass="active"
-            outline="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="outline"
           >
             Info
           </cbutton-stub>
@@ -1324,10 +1324,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             disabled="true"
             event="click"
             exactactiveclass="active"
-            outline="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="outline"
           >
             Light
           </cbutton-stub>
@@ -1348,10 +1348,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             disabled="true"
             event="click"
             exactactiveclass="active"
-            outline="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="outline"
           >
             Dark
           </cbutton-stub>
@@ -1382,7 +1382,7 @@ exports[`StandardButtons.vue renders correctly 1`] = `
         Use
         
         <code>
-          ghost
+          variant="ghost"
         </code>
          prop for ghost buttons.
       
@@ -1417,10 +1417,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="primary"
             event="click"
             exactactiveclass="active"
-            ghost="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="ghost"
           >
             Primary
           </cbutton-stub>
@@ -1440,10 +1440,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="secondary"
             event="click"
             exactactiveclass="active"
-            ghost="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="ghost"
           >
             Secondary
           </cbutton-stub>
@@ -1463,10 +1463,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="success"
             event="click"
             exactactiveclass="active"
-            ghost="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="ghost"
           >
             Success
           </cbutton-stub>
@@ -1486,10 +1486,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="warning"
             event="click"
             exactactiveclass="active"
-            ghost="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="ghost"
           >
             Warning
           </cbutton-stub>
@@ -1509,10 +1509,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="danger"
             event="click"
             exactactiveclass="active"
-            ghost="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="ghost"
           >
             Danger
           </cbutton-stub>
@@ -1532,10 +1532,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="info"
             event="click"
             exactactiveclass="active"
-            ghost="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="ghost"
           >
             Info
           </cbutton-stub>
@@ -1555,10 +1555,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="light"
             event="click"
             exactactiveclass="active"
-            ghost="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="ghost"
           >
             Light
           </cbutton-stub>
@@ -1578,10 +1578,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="dark"
             event="click"
             exactactiveclass="active"
-            ghost="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="ghost"
           >
             Dark
           </cbutton-stub>
@@ -1627,11 +1627,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="primary"
             event="click"
             exactactiveclass="active"
-            ghost="true"
             pressed="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="ghost"
           >
             Primary
           </cbutton-stub>
@@ -1652,11 +1652,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="secondary"
             event="click"
             exactactiveclass="active"
-            ghost="true"
             pressed="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="ghost"
           >
             Secondary
           </cbutton-stub>
@@ -1677,11 +1677,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="success"
             event="click"
             exactactiveclass="active"
-            ghost="true"
             pressed="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="ghost"
           >
             Success
           </cbutton-stub>
@@ -1702,11 +1702,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="warning"
             event="click"
             exactactiveclass="active"
-            ghost="true"
             pressed="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="ghost"
           >
             Warning
           </cbutton-stub>
@@ -1727,11 +1727,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="danger"
             event="click"
             exactactiveclass="active"
-            ghost="true"
             pressed="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="ghost"
           >
             Danger
           </cbutton-stub>
@@ -1752,11 +1752,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="info"
             event="click"
             exactactiveclass="active"
-            ghost="true"
             pressed="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="ghost"
           >
             Info
           </cbutton-stub>
@@ -1777,11 +1777,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="light"
             event="click"
             exactactiveclass="active"
-            ghost="true"
             pressed="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="ghost"
           >
             Light
           </cbutton-stub>
@@ -1802,11 +1802,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="dark"
             event="click"
             exactactiveclass="active"
-            ghost="true"
             pressed="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="ghost"
           >
             Dark
           </cbutton-stub>
@@ -1852,10 +1852,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             disabled="true"
             event="click"
             exactactiveclass="active"
-            ghost="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="ghost"
           >
             Primary
           </cbutton-stub>
@@ -1876,10 +1876,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             disabled="true"
             event="click"
             exactactiveclass="active"
-            ghost="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="ghost"
           >
             Secondary
           </cbutton-stub>
@@ -1900,10 +1900,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             disabled="true"
             event="click"
             exactactiveclass="active"
-            ghost="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="ghost"
           >
             Success
           </cbutton-stub>
@@ -1924,10 +1924,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             disabled="true"
             event="click"
             exactactiveclass="active"
-            ghost="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="ghost"
           >
             Warning
           </cbutton-stub>
@@ -1948,10 +1948,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             disabled="true"
             event="click"
             exactactiveclass="active"
-            ghost="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="ghost"
           >
             Danger
           </cbutton-stub>
@@ -1972,10 +1972,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             disabled="true"
             event="click"
             exactactiveclass="active"
-            ghost="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="ghost"
           >
             Info
           </cbutton-stub>
@@ -1996,10 +1996,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             disabled="true"
             event="click"
             exactactiveclass="active"
-            ghost="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="ghost"
           >
             Light
           </cbutton-stub>
@@ -2020,10 +2020,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             disabled="true"
             event="click"
             exactactiveclass="active"
-            ghost="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="ghost"
           >
             Dark
           </cbutton-stub>
@@ -2806,8 +2806,8 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="primary"
             event="click"
             exactactiveclass="active"
-            pill="true"
             routertag="a"
+            shape="pill"
             target="_self"
             type="button"
           >
@@ -2829,8 +2829,8 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="secondary"
             event="click"
             exactactiveclass="active"
-            pill="true"
             routertag="a"
+            shape="pill"
             target="_self"
             type="button"
           >
@@ -2852,8 +2852,8 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="success"
             event="click"
             exactactiveclass="active"
-            pill="true"
             routertag="a"
+            shape="pill"
             target="_self"
             type="button"
           >
@@ -2875,8 +2875,8 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="warning"
             event="click"
             exactactiveclass="active"
-            pill="true"
             routertag="a"
+            shape="pill"
             target="_self"
             type="button"
           >
@@ -2898,8 +2898,8 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="danger"
             event="click"
             exactactiveclass="active"
-            pill="true"
             routertag="a"
+            shape="pill"
             target="_self"
             type="button"
           >
@@ -2921,8 +2921,8 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="info"
             event="click"
             exactactiveclass="active"
-            pill="true"
             routertag="a"
+            shape="pill"
             target="_self"
             type="button"
           >
@@ -2944,8 +2944,8 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="light"
             event="click"
             exactactiveclass="active"
-            pill="true"
             routertag="a"
+            shape="pill"
             target="_self"
             type="button"
           >
@@ -2967,8 +2967,8 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="dark"
             event="click"
             exactactiveclass="active"
-            pill="true"
             routertag="a"
+            shape="pill"
             target="_self"
             type="button"
           >
@@ -2990,8 +2990,8 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="link"
             event="click"
             exactactiveclass="active"
-            pill="true"
             routertag="a"
+            shape="pill"
             target="_self"
             type="button"
           >
@@ -3030,9 +3030,9 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="primary"
             event="click"
             exactactiveclass="active"
-            pill="true"
             pressed="true"
             routertag="a"
+            shape="pill"
             target="_self"
             type="button"
           >
@@ -3055,9 +3055,9 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="secondary"
             event="click"
             exactactiveclass="active"
-            pill="true"
             pressed="true"
             routertag="a"
+            shape="pill"
             target="_self"
             type="button"
           >
@@ -3080,9 +3080,9 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="success"
             event="click"
             exactactiveclass="active"
-            pill="true"
             pressed="true"
             routertag="a"
+            shape="pill"
             target="_self"
             type="button"
           >
@@ -3105,9 +3105,9 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="warning"
             event="click"
             exactactiveclass="active"
-            pill="true"
             pressed="true"
             routertag="a"
+            shape="pill"
             target="_self"
             type="button"
           >
@@ -3130,9 +3130,9 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="danger"
             event="click"
             exactactiveclass="active"
-            pill="true"
             pressed="true"
             routertag="a"
+            shape="pill"
             target="_self"
             type="button"
           >
@@ -3155,9 +3155,9 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="info"
             event="click"
             exactactiveclass="active"
-            pill="true"
             pressed="true"
             routertag="a"
+            shape="pill"
             target="_self"
             type="button"
           >
@@ -3180,9 +3180,9 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="light"
             event="click"
             exactactiveclass="active"
-            pill="true"
             pressed="true"
             routertag="a"
+            shape="pill"
             target="_self"
             type="button"
           >
@@ -3205,9 +3205,9 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="dark"
             event="click"
             exactactiveclass="active"
-            pill="true"
             pressed="true"
             routertag="a"
+            shape="pill"
             target="_self"
             type="button"
           >
@@ -3230,9 +3230,9 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="link"
             event="click"
             exactactiveclass="active"
-            pill="true"
             pressed="true"
             routertag="a"
+            shape="pill"
             target="_self"
             type="button"
           >
@@ -3271,8 +3271,8 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             disabled="true"
             event="click"
             exactactiveclass="active"
-            pill="true"
             routertag="a"
+            shape="pill"
             target="_self"
             type="button"
           >
@@ -3295,8 +3295,8 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             disabled="true"
             event="click"
             exactactiveclass="active"
-            pill="true"
             routertag="a"
+            shape="pill"
             target="_self"
             type="button"
           >
@@ -3319,8 +3319,8 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             disabled="true"
             event="click"
             exactactiveclass="active"
-            pill="true"
             routertag="a"
+            shape="pill"
             target="_self"
             type="button"
           >
@@ -3343,8 +3343,8 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             disabled="true"
             event="click"
             exactactiveclass="active"
-            pill="true"
             routertag="a"
+            shape="pill"
             target="_self"
             type="button"
           >
@@ -3367,8 +3367,8 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             disabled="true"
             event="click"
             exactactiveclass="active"
-            pill="true"
             routertag="a"
+            shape="pill"
             target="_self"
             type="button"
           >
@@ -3391,8 +3391,8 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             disabled="true"
             event="click"
             exactactiveclass="active"
-            pill="true"
             routertag="a"
+            shape="pill"
             target="_self"
             type="button"
           >
@@ -3415,8 +3415,8 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             disabled="true"
             event="click"
             exactactiveclass="active"
-            pill="true"
             routertag="a"
+            shape="pill"
             target="_self"
             type="button"
           >
@@ -3439,8 +3439,8 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             disabled="true"
             event="click"
             exactactiveclass="active"
-            pill="true"
             routertag="a"
+            shape="pill"
             target="_self"
             type="button"
           >
@@ -3463,8 +3463,8 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             disabled="true"
             event="click"
             exactactiveclass="active"
-            pill="true"
             routertag="a"
+            shape="pill"
             target="_self"
             type="button"
           >
@@ -3539,11 +3539,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="secondary"
             event="click"
             exactactiveclass="active"
-            outline="true"
             routertag="a"
             size="sm"
             target="_self"
             type="button"
+            variant="outline"
           >
             Outline Button
           </cbutton-stub>
@@ -3559,11 +3559,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="success"
             event="click"
             exactactiveclass="active"
-            ghost="true"
             routertag="a"
             size="sm"
             target="_self"
             type="button"
+            variant="ghost"
           >
             Ghost Button
           </cbutton-stub>
@@ -3599,8 +3599,8 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="danger"
             event="click"
             exactactiveclass="active"
-            pill="true"
             routertag="a"
+            shape="pill"
             size="sm"
             target="_self"
             type="button"
@@ -3653,10 +3653,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="secondary"
             event="click"
             exactactiveclass="active"
-            outline="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="outline"
           >
             Outline Button
           </cbutton-stub>
@@ -3672,10 +3672,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="success"
             event="click"
             exactactiveclass="active"
-            ghost="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="ghost"
           >
             Ghost Button
           </cbutton-stub>
@@ -3710,8 +3710,8 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="danger"
             event="click"
             exactactiveclass="active"
-            pill="true"
             routertag="a"
+            shape="pill"
             target="_self"
             type="button"
           >
@@ -3764,11 +3764,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="secondary"
             event="click"
             exactactiveclass="active"
-            outline="true"
             routertag="a"
             size="lg"
             target="_self"
             type="button"
+            variant="outline"
           >
             Outline Button
           </cbutton-stub>
@@ -3784,11 +3784,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="success"
             event="click"
             exactactiveclass="active"
-            ghost="true"
             routertag="a"
             size="lg"
             target="_self"
             type="button"
+            variant="ghost"
           >
             Ghost Button
           </cbutton-stub>
@@ -3824,8 +3824,8 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="danger"
             event="click"
             exactactiveclass="active"
-            pill="true"
             routertag="a"
+            shape="pill"
             size="lg"
             target="_self"
             type="button"
@@ -3883,10 +3883,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="secondary"
             event="click"
             exactactiveclass="active"
-            outline="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="outline"
           >
             <i
               class="cui-lightbulb"
@@ -3954,8 +3954,8 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="danger"
             event="click"
             exactactiveclass="active"
-            pill="true"
             routertag="a"
+            shape="pill"
             target="_self"
             type="button"
           >
@@ -3992,10 +3992,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="primary"
             event="click"
             exactactiveclass="active"
-            outline="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="outline"
           >
             Primary Off
           </cbutton-stub>
@@ -4012,10 +4012,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="secondary"
             event="click"
             exactactiveclass="active"
-            outline="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="outline"
           >
             Secondary Off
           </cbutton-stub>
@@ -4032,10 +4032,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="success"
             event="click"
             exactactiveclass="active"
-            outline="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="outline"
           >
             Success Off
           </cbutton-stub>
@@ -4052,10 +4052,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="info"
             event="click"
             exactactiveclass="active"
-            outline="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="outline"
           >
             Info Off
           </cbutton-stub>
@@ -4072,10 +4072,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="warning"
             event="click"
             exactactiveclass="active"
-            outline="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="outline"
           >
             Warning Off
           </cbutton-stub>
@@ -4092,10 +4092,10 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="danger"
             event="click"
             exactactiveclass="active"
-            outline="true"
             routertag="a"
             target="_self"
             type="button"
+            variant="outline"
           >
             Danger Off
           </cbutton-stub>
@@ -4252,11 +4252,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="secondary"
             event="click"
             exactactiveclass="active"
-            outline="true"
             routertag="a"
             size="lg"
             target="_self"
             type="button"
+            variant="outline"
           >
             Block level button
           </cbutton-stub>
@@ -4267,11 +4267,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="primary"
             event="click"
             exactactiveclass="active"
-            outline="true"
             routertag="a"
             size="lg"
             target="_self"
             type="button"
+            variant="outline"
           >
             Block level button
           </cbutton-stub>
@@ -4282,11 +4282,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="success"
             event="click"
             exactactiveclass="active"
-            outline="true"
             routertag="a"
             size="lg"
             target="_self"
             type="button"
+            variant="outline"
           >
             Block level button
           </cbutton-stub>
@@ -4297,11 +4297,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="info"
             event="click"
             exactactiveclass="active"
-            outline="true"
             routertag="a"
             size="lg"
             target="_self"
             type="button"
+            variant="outline"
           >
             Block level button
           </cbutton-stub>
@@ -4312,11 +4312,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="warning"
             event="click"
             exactactiveclass="active"
-            outline="true"
             routertag="a"
             size="lg"
             target="_self"
             type="button"
+            variant="outline"
           >
             Block level button
           </cbutton-stub>
@@ -4327,11 +4327,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="danger"
             event="click"
             exactactiveclass="active"
-            outline="true"
             routertag="a"
             size="lg"
             target="_self"
             type="button"
+            variant="outline"
           >
             Block level button
           </cbutton-stub>
@@ -4342,11 +4342,11 @@ exports[`StandardButtons.vue renders correctly 1`] = `
             color="info"
             event="click"
             exactactiveclass="active"
-            ghost="true"
             routertag="a"
             size="lg"
             target="_self"
             type="button"
+            variant="ghost"
           >
             Block level button
           </cbutton-stub>
diff --git a/tests/unit/views/icons/__snapshots__/CoreUIIcons.spec.js.snap b/tests/unit/views/icons/__snapshots__/CoreUIIcons.spec.js.snap
deleted file mode 100644
index 45170b2f..00000000
--- a/tests/unit/views/icons/__snapshots__/CoreUIIcons.spec.js.snap
+++ /dev/null
@@ -1,1650 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CoreUIIcons.vue renders correctly 1`] = `
-<div>
-  <ccard-stub>
-    <ccardheader-stub>
-      <i
-        class="cui-pencil"
-      />
-      CoreUI Icons
-      
-      <cbadge-stub
-        activeclass="active"
-        color="info"
-        event="click"
-        exactactiveclass="active"
-        routertag="a"
-        tag="span"
-        target="_self"
-      >
-        New
-      </cbadge-stub>
-       
-      <div
-        class="card-header-actions"
-      >
-        <a
-          class="card-header-action"
-          href="https://github.com/coreui/coreui-icons"
-          rel="noreferrer noopener"
-          target="_blank"
-        >
-          <small
-            class="text-muted"
-          >
-            Github
-          </small>
-        </a>
-      </div>
-    </ccardheader-stub>
-     
-    <ccardbody-stub>
-      <crow-stub
-        class="text-center "
-        gutters="true"
-      >
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-account-logout icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            account-logout
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-action-redo icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            action-redo
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-action-undo icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            action-undo
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-align-center icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            align-center
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-align-left icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            align-left
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-align-right icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            align-right
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-arrow-bottom icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            arrow-bottom
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-arrow-left icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            arrow-left
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-arrow-right icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            arrow-right
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-arrow-top icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            arrow-top
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-ban icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            ban
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-basket-loaded icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            basket-loaded
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-bell icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            bell
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-bold icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            bold
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-bookmark icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            bookmark
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-briefcase icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            briefcase
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-british-pound icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            british-pound
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-brush icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            brush
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-calculator icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            calculator
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-calendar icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            calendar
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-cart icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            cart
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-chart icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            chart
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-check icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            check
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-chevron-bottom icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            chevron-bottom
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-chevron-left icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            chevron-left
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-chevron-right icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            chevron-right
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-chevron-top icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            chevron-top
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-circle-check icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            circle-check
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-circle-x icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            circle-x
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-cloud icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            cloud
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-cloud-download icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            cloud-download
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-cloud-upload icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            cloud-upload
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-code icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            code
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-cog icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            cog
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-comment-square icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            comment-square
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-credit-card icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            credit-card
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-cursor icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            cursor
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-dashboard icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            dashboard
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-delete icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            delete
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-dollar icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            dollar
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-drop icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            drop
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-envelope-closed icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            envelope-closed
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-envelope-letter icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            envelope-letter
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-envelope-open icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            envelope-open
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-euro icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            euro
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-file icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            file
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-globe icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            globe
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-graph icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            graph
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-home icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            home
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-inbox icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            inbox
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-info icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            info
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-italic icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            italic
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-justify-center icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            justify-center
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-justify-left icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            justify-left
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-justify-right icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            justify-right
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-laptop icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            laptop
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-layers icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            layers
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-lightbulb icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            lightbulb
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-list icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            list
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-location-pin icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            location-pin
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-lock-locked icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            lock-locked
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-lock-unlocked icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            lock-unlocked
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-magnifying-glass icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            magnifying-glass
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-map icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            map
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-monitor icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            monitor
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-moon icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            moon
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-note icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            note
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-options icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            options
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-paperclip icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            paperclip
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-pencil icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            pencil
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-people icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            people
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-phone icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            phone
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-pie-chart icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            pie-chart
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-print icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            print
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-puzzle icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            puzzle
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-rss icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            rss
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-screen-desktop icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            screen-desktop
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-screen-smartphone icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            screen-smartphone
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-settings icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            settings
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-share icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            share
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-shield icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            shield
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-sort-ascending icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            sort-ascending
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-sort-descending icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            sort-descending
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-speech icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            speech
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-speedometer icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            speedometer
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-star icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            star
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-sun icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            sun
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-tablet icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            tablet
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-tags icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            tags
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-task icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            task
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-thumb-down icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            thumb-down
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-thumb-up icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            thumb-up
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-trash icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            trash
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-underline icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            underline
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-user icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            user
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-user-female icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            user-female
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-user-follow icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            user-follow
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-user-unfollow icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            user-unfollow
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-wrench icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            wrench
-          </div>
-        </ccol-stub>
-         
-        <ccol-stub
-          col="6"
-          md="3"
-          sm="4"
-          tag="div"
-          xl="2"
-        >
-          <i
-            class="cui-yen icons font-2xl d-block mt-4"
-          />
-           
-          <div>
-            yen
-          </div>
-        </ccol-stub>
-      </crow-stub>
-    </ccardbody-stub>
-  </ccard-stub>
-</div>
-`;
diff --git a/tests/unit/views/notifications/__snapshots__/Alerts.spec.js.snap b/tests/unit/views/notifications/__snapshots__/Alerts.spec.js.snap
index 90456325..4c234517 100644
--- a/tests/unit/views/notifications/__snapshots__/Alerts.spec.js.snap
+++ b/tests/unit/views/notifications/__snapshots__/Alerts.spec.js.snap
@@ -43,6 +43,7 @@ exports[`Alerts.vue renders correctly 1`] = `
            
           <calert-stub
             color="primary"
+            fade="true"
             show="true"
           >
             Primary Alert
@@ -50,6 +51,7 @@ exports[`Alerts.vue renders correctly 1`] = `
            
           <calert-stub
             color="secondary"
+            fade="true"
             show="true"
           >
             Secondary Alert
@@ -57,6 +59,7 @@ exports[`Alerts.vue renders correctly 1`] = `
            
           <calert-stub
             color="success"
+            fade="true"
             show="true"
           >
             Success Alert
@@ -64,6 +67,7 @@ exports[`Alerts.vue renders correctly 1`] = `
            
           <calert-stub
             color="danger"
+            fade="true"
             show="true"
           >
             Danger Alert
@@ -71,6 +75,7 @@ exports[`Alerts.vue renders correctly 1`] = `
            
           <calert-stub
             color="warning"
+            fade="true"
             show="true"
           >
             Warning Alert
@@ -78,6 +83,7 @@ exports[`Alerts.vue renders correctly 1`] = `
            
           <calert-stub
             color="info"
+            fade="true"
             show="true"
           >
             Info Alert
@@ -85,6 +91,7 @@ exports[`Alerts.vue renders correctly 1`] = `
            
           <calert-stub
             color="light"
+            fade="true"
             show="true"
           >
             Light Alert
@@ -92,6 +99,7 @@ exports[`Alerts.vue renders correctly 1`] = `
            
           <calert-stub
             color="dark"
+            fade="true"
             show="true"
           >
             Dark Alert
@@ -126,6 +134,7 @@ exports[`Alerts.vue renders correctly 1`] = `
         <div>
           <calert-stub
             color="primary"
+            fade="true"
             show="true"
           >
             
@@ -142,6 +151,7 @@ exports[`Alerts.vue renders correctly 1`] = `
            
           <calert-stub
             color="secondary"
+            fade="true"
             show="true"
           >
             
@@ -158,6 +168,7 @@ exports[`Alerts.vue renders correctly 1`] = `
            
           <calert-stub
             color="success"
+            fade="true"
             show="true"
           >
             
@@ -174,6 +185,7 @@ exports[`Alerts.vue renders correctly 1`] = `
            
           <calert-stub
             color="danger"
+            fade="true"
             show="true"
           >
             
@@ -190,6 +202,7 @@ exports[`Alerts.vue renders correctly 1`] = `
            
           <calert-stub
             color="warning"
+            fade="true"
             show="true"
           >
             
@@ -206,6 +219,7 @@ exports[`Alerts.vue renders correctly 1`] = `
            
           <calert-stub
             color="info"
+            fade="true"
             show="true"
           >
             
@@ -222,6 +236,7 @@ exports[`Alerts.vue renders correctly 1`] = `
            
           <calert-stub
             color="light"
+            fade="true"
             show="true"
           >
             
@@ -238,6 +253,7 @@ exports[`Alerts.vue renders correctly 1`] = `
            
           <calert-stub
             color="dark"
+            fade="true"
             show="true"
           >
             
@@ -283,6 +299,7 @@ exports[`Alerts.vue renders correctly 1`] = `
       <ccardbody-stub>
         <calert-stub
           color="success"
+          fade="true"
           show="true"
         >
           <h4
@@ -334,6 +351,7 @@ exports[`Alerts.vue renders correctly 1`] = `
         <calert-stub
           closebutton="true"
           color="secondary"
+          fade="true"
           show="true"
         >
           
@@ -341,20 +359,10 @@ exports[`Alerts.vue renders correctly 1`] = `
         
         </calert-stub>
          
-        <calert-stub
-          closebutton="true"
-          color="secondary"
-          fade="true"
-          show="true"
-        >
-          
-          Dismissible Alert with fade effect!
-        
-        </calert-stub>
-         
         <calert-stub
           class="alert-dismissible"
           color="secondary"
+          fade="true"
           show="true"
         >
           
@@ -426,6 +434,7 @@ exports[`Alerts.vue renders correctly 1`] = `
           <calert-stub
             closebutton="true"
             color="info"
+            fade="true"
             show="10"
           >
             
diff --git a/tests/unit/views/notifications/__snapshots__/Badges.spec.js.snap b/tests/unit/views/notifications/__snapshots__/Badges.spec.js.snap
index e0926c70..d85be661 100644
--- a/tests/unit/views/notifications/__snapshots__/Badges.spec.js.snap
+++ b/tests/unit/views/notifications/__snapshots__/Badges.spec.js.snap
@@ -197,7 +197,7 @@ exports[`Badges.vue renders correctly 1`] = `
          Badge
         
         <small>
-          pills
+          shape="pill"
         </small>
       </header>
        
@@ -205,49 +205,57 @@ exports[`Badges.vue renders correctly 1`] = `
         class="card-body"
       >
         <span
-          class="badge badge-primary badge-pill"
+          class="badge badge-primary"
+          shape="pill"
         >
           Primary
         </span>
          
         <span
-          class="badge badge-secondary badge-pill"
+          class="badge badge-secondary"
+          shape="pill"
         >
           Secondary
         </span>
          
         <span
-          class="badge badge-success badge-pill"
+          class="badge badge-success"
+          shape="pill"
         >
           Success
         </span>
          
         <span
-          class="badge badge-danger badge-pill"
+          class="badge badge-danger"
+          shape="pill"
         >
           Danger
         </span>
          
         <span
-          class="badge badge-warning badge-pill"
+          class="badge badge-warning"
+          shape="pill"
         >
           Warning
         </span>
          
         <span
-          class="badge badge-info badge-pill"
+          class="badge badge-info"
+          shape="pill"
         >
           Info
         </span>
          
         <span
-          class="badge badge-light badge-pill"
+          class="badge badge-light"
+          shape="pill"
         >
           Light
         </span>
          
         <span
-          class="badge badge-dark badge-pill"
+          class="badge badge-dark"
+          shape="pill"
         >
           Dark
         </span>
diff --git a/tests/unit/views/notifications/__snapshots__/Modals.spec.js.snap b/tests/unit/views/notifications/__snapshots__/Modals.spec.js.snap
index 200a76eb..8f9f6890 100644
--- a/tests/unit/views/notifications/__snapshots__/Modals.spec.js.snap
+++ b/tests/unit/views/notifications/__snapshots__/Modals.spec.js.snap
@@ -233,6 +233,7 @@ exports[`Modals.vue renders correctly 1`] = `
   <cmodal-stub
     backdrop="true"
     closeonbackdrop="true"
+    color="primary"
     fade="true"
     title="Modal title"
   >
diff --git a/tests/unit/views/users/__snapshots__/User.spec.js.snap b/tests/unit/views/users/__snapshots__/User.spec.js.snap
index 9867fdc8..3f507f5c 100644
--- a/tests/unit/views/users/__snapshots__/User.spec.js.snap
+++ b/tests/unit/views/users/__snapshots__/User.spec.js.snap
@@ -17,7 +17,7 @@ exports[`User.vue renders correctly 1`] = `
       </ccardheader-stub>
        
       <ccardbody-stub>
-        <ctable-stub
+        <cdatatable-stub
           defaultsorter="[object Object]"
           fields="[object Object],[object Object]"
           fixed="true"
diff --git a/tests/unit/views/users/__snapshots__/Users.spec.js.snap b/tests/unit/views/users/__snapshots__/Users.spec.js.snap
index 5f921553..e179a111 100644
--- a/tests/unit/views/users/__snapshots__/Users.spec.js.snap
+++ b/tests/unit/views/users/__snapshots__/Users.spec.js.snap
@@ -14,12 +14,12 @@ exports[`Users.vue renders correctly 1`] = `
       headerhtml="Users"
       name="slide"
     >
-      <ctable-stub
+      <cdatatable-stub
         clickablerows="true"
         defaultsorter="[object Object]"
         fields="[object Object],[object Object],[object Object],[object Object]"
         hover="true"
-        indexcolumn="true"
+        index-column=""
         items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
         itemsperpage="5"
         pagination="[object Object]"
diff --git a/tests/unit/views/widgets/__snapshots__/Widgets.spec.js.snap b/tests/unit/views/widgets/__snapshots__/Widgets.spec.js.snap
deleted file mode 100644
index 115cc521..00000000
--- a/tests/unit/views/widgets/__snapshots__/Widgets.spec.js.snap
+++ /dev/null
@@ -1,991 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Widgets.vue renders correctly 1`] = `
-<div>
-  <crow-stub
-    gutters="true"
-  >
-    <ccol-stub
-      lg="3"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetprogress-stub
-        footer="Lorem ipsum dolor sit amet enim."
-        header="89.9%"
-        text="Lorem ipsum..."
-        value="25"
-      >
-        <cprogress-stub
-          class="progress-xs my-3 mb-0"
-          color="success"
-          max="100"
-          precision="0"
-          value="25"
-        />
-      </cwidgetprogress-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      lg="3"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetprogress-stub
-        color="info"
-        footer="Lorem ipsum dolor sit amet enim."
-        header="12.124"
-        text="Lorem ipsum..."
-        value="25"
-      />
-    </ccol-stub>
-     
-    <ccol-stub
-      lg="3"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetprogress-stub
-        color="warning"
-        footer="Lorem ipsum dolor sit amet enim."
-        header="$98.111,00"
-        text="Lorem ipsum..."
-        value="25"
-      />
-    </ccol-stub>
-     
-    <ccol-stub
-      lg="3"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetprogress-stub
-        color="danger"
-        footer="Lorem ipsum dolor sit amet enim."
-        header="2 TB"
-        text="Lorem ipsum..."
-        value="25"
-      />
-    </ccol-stub>
-  </crow-stub>
-   
-  <crow-stub
-    gutters="true"
-  >
-    <ccol-stub
-      lg="3"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetprogress-stub
-        color="success"
-        footer="Lorem ipsum dolor sit amet enim."
-        header="89.9%"
-        inverse="true"
-        text="Lorem ipsum..."
-        value="25"
-      />
-    </ccol-stub>
-     
-    <ccol-stub
-      lg="3"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetprogress-stub
-        color="info"
-        footer="Lorem ipsum dolor sit amet enim."
-        header="12.124"
-        inverse="true"
-        text="Lorem ipsum..."
-        value="25"
-      />
-    </ccol-stub>
-     
-    <ccol-stub
-      lg="3"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetprogress-stub
-        color="warning"
-        footer="Lorem ipsum dolor sit amet enim."
-        header="$98.111,00"
-        inverse="true"
-        text="Lorem ipsum..."
-        value="25"
-      />
-    </ccol-stub>
-     
-    <ccol-stub
-      lg="3"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetprogress-stub
-        color="danger"
-        footer="Lorem ipsum dolor sit amet enim."
-        header="2 TB"
-        inverse="true"
-        text="Lorem ipsum..."
-        value="25"
-      />
-    </ccol-stub>
-  </crow-stub>
-   
-  <crow-stub
-    gutters="true"
-  >
-    <ccol-stub
-      col="12"
-      lg="3"
-      sm="6"
-      tag="div"
-    >
-      <cwidgeticon-stub
-        color="primary"
-        header="$1.999,50"
-        iconpadding="true"
-        text="Income"
-      >
-        <cicon-stub
-          fonticontag="i"
-          name="settings"
-          width="24"
-        />
-      </cwidgeticon-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      col="12"
-      lg="3"
-      sm="6"
-      tag="div"
-    >
-      <cwidgeticon-stub
-        color="info"
-        header="$1.999,50"
-        iconpadding="true"
-        text="Income"
-      >
-        <cicon-stub
-          fonticontag="i"
-          name="laptop"
-          width="24"
-        />
-      </cwidgeticon-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      col="12"
-      lg="3"
-      sm="6"
-      tag="div"
-    >
-      <cwidgeticon-stub
-        color="warning"
-        header="$1.999,50"
-        iconpadding="true"
-        text="Income"
-      >
-        <cicon-stub
-          fonticontag="i"
-          name="moon"
-          width="24"
-        />
-      </cwidgeticon-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      col="12"
-      lg="3"
-      sm="6"
-      tag="div"
-    >
-      <cwidgeticon-stub
-        color="danger"
-        header="$1.999,50"
-        iconpadding="true"
-        text="Income"
-      >
-        <cicon-stub
-          fonticontag="i"
-          name="bell"
-          width="24"
-        />
-      </cwidgeticon-stub>
-    </ccol-stub>
-  </crow-stub>
-   
-  <crow-stub
-    gutters="true"
-  >
-    <ccol-stub
-      col="12"
-      lg="3"
-      sm="6"
-      tag="div"
-    >
-      <cwidgeticon-stub
-        color="primary"
-        header="$1.999,50"
-        text="Income"
-      >
-        <cicon-stub
-          fonticontag="i"
-          name="settings"
-          width="24"
-        />
-      </cwidgeticon-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      col="12"
-      lg="3"
-      sm="6"
-      tag="div"
-    >
-      <cwidgeticon-stub
-        color="info"
-        header="$1.999,50"
-        text="Income"
-      >
-        <cicon-stub
-          fonticontag="i"
-          name="laptop"
-          width="24"
-        />
-      </cwidgeticon-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      col="12"
-      lg="3"
-      sm="6"
-      tag="div"
-    >
-      <cwidgeticon-stub
-        color="warning"
-        header="$1.999,50"
-        text="Income"
-      >
-        <cicon-stub
-          fonticontag="i"
-          name="moon"
-          width="24"
-        />
-      </cwidgeticon-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      col="12"
-      lg="3"
-      sm="6"
-      tag="div"
-    >
-      <cwidgeticon-stub
-        color="danger"
-        header="$1.999,50"
-        text="Income"
-      >
-        <cicon-stub
-          fonticontag="i"
-          name="bell"
-          width="24"
-        />
-      </cwidgeticon-stub>
-    </ccol-stub>
-  </crow-stub>
-   
-  <crow-stub
-    gutters="true"
-  >
-    <ccol-stub
-      col="12"
-      lg="4"
-      sm="6"
-      tag="div"
-    >
-      <cwidgeticon-stub
-        color="primary"
-        header="$1.999,50"
-        text="Income"
-      >
-        <cicon-stub
-          class="mx-5 "
-          fonticontag="i"
-          name="settings"
-          width="24"
-        />
-      </cwidgeticon-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      col="12"
-      lg="4"
-      sm="6"
-      tag="div"
-    >
-      <cwidgeticon-stub
-        color="info"
-        header="$1.999,50"
-        text="Income"
-      >
-        <cicon-stub
-          class="mx-5 "
-          fonticontag="i"
-          name="laptop"
-          width="24"
-        />
-      </cwidgeticon-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      col="12"
-      lg="4"
-      sm="6"
-      tag="div"
-    >
-      <cwidgeticon-stub
-        color="warning"
-        header="$1.999,50"
-        text="Income"
-      >
-        <cicon-stub
-          class="mx-5 "
-          fonticontag="i"
-          name="moon"
-          width="24"
-        />
-      </cwidgeticon-stub>
-    </ccol-stub>
-  </crow-stub>
-   
-  <widgetsbrand-stub
-    nocharts="true"
-  />
-   
-  <widgetsbrand-stub />
-   
-  <ccardgroup-stub
-    class="mb-4"
-  >
-    <cwidgetprogressicon-stub
-      color="info"
-      header="87.500"
-      text="Visitors"
-      value="25"
-    >
-      <cicon-stub
-        fonticontag="i"
-        height="36"
-        name="people"
-      />
-    </cwidgetprogressicon-stub>
-     
-    <cwidgetprogressicon-stub
-      color="success"
-      header="385"
-      text="New Clients"
-      value="25"
-    >
-      <cicon-stub
-        fonticontag="i"
-        height="36"
-        name="userFollow"
-      />
-    </cwidgetprogressicon-stub>
-     
-    <cwidgetprogressicon-stub
-      color="warning"
-      header="1238"
-      text="Products sold"
-      value="25"
-    >
-      <cicon-stub
-        fonticontag="i"
-        height="36"
-        name="basketLoaded"
-      />
-    </cwidgetprogressicon-stub>
-     
-    <cwidgetprogressicon-stub
-      header="28%"
-      text="Returning Visitors"
-      value="25"
-    >
-      <cicon-stub
-        fonticontag="i"
-        height="36"
-        name="chartPie"
-      />
-    </cwidgetprogressicon-stub>
-     
-    <cwidgetprogressicon-stub
-      color="danger"
-      header="5:34:11"
-      text="Avg. Time"
-      value="25"
-    >
-      <cicon-stub
-        fonticontag="i"
-        height="36"
-        name="speedometer"
-      />
-    </cwidgetprogressicon-stub>
-  </ccardgroup-stub>
-   
-  <ccardgroup-stub
-    class="mb-4"
-  >
-    <cwidgetprogressicon-stub
-      color="info"
-      header="87.500"
-      inverse="true"
-      text="Visitors"
-      value="25"
-    >
-      <cicon-stub
-        fonticontag="i"
-        height="36"
-        name="people"
-      />
-    </cwidgetprogressicon-stub>
-     
-    <cwidgetprogressicon-stub
-      color="success"
-      header="385"
-      inverse="true"
-      text="New Clients"
-      value="25"
-    >
-      <cicon-stub
-        fonticontag="i"
-        height="36"
-        name="userFollow"
-      />
-    </cwidgetprogressicon-stub>
-     
-    <cwidgetprogressicon-stub
-      color="warning"
-      header="1238"
-      inverse="true"
-      text="Products sold"
-      value="25"
-    >
-      <cicon-stub
-        fonticontag="i"
-        height="36"
-        name="basketLoaded"
-      />
-    </cwidgetprogressicon-stub>
-     
-    <cwidgetprogressicon-stub
-      color="primary"
-      header="28%"
-      inverse="true"
-      text="Returning Visitors"
-      value="25"
-    >
-      <cicon-stub
-        fonticontag="i"
-        height="36"
-        name="chartPie"
-      />
-    </cwidgetprogressicon-stub>
-     
-    <cwidgetprogressicon-stub
-      color="danger"
-      header="5:34:11"
-      inverse="true"
-      text="Avg. Time"
-      value="25"
-    >
-      <cicon-stub
-        fonticontag="i"
-        height="36"
-        name="speedometer"
-      />
-    </cwidgetprogressicon-stub>
-  </ccardgroup-stub>
-   
-  <crow-stub
-    gutters="true"
-  >
-    <ccol-stub
-      md="2"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetprogressicon-stub
-        color="info"
-        header="87.500"
-        text="Visitors"
-        value="25"
-      >
-        <cicon-stub
-          fonticontag="i"
-          height="36"
-          name="people"
-        />
-      </cwidgetprogressicon-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      md="2"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetprogressicon-stub
-        color="success"
-        header="385"
-        text="New Clients"
-        value="25"
-      >
-        <cicon-stub
-          fonticontag="i"
-          height="36"
-          name="userFollow"
-        />
-      </cwidgetprogressicon-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      md="2"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetprogressicon-stub
-        color="warning"
-        header="1238"
-        text="Products sold"
-        value="25"
-      >
-        <cicon-stub
-          fonticontag="i"
-          height="36"
-          name="basketLoaded"
-        />
-      </cwidgetprogressicon-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      md="2"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetprogressicon-stub
-        color="primary"
-        header="28%"
-        text="Returning Visitors"
-        value="25"
-      >
-        <cicon-stub
-          fonticontag="i"
-          height="36"
-          name="chartPie"
-        />
-      </cwidgetprogressicon-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      md="2"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetprogressicon-stub
-        color="danger"
-        header="5:34:11"
-        text="Avg. Time"
-        value="25"
-      >
-        <cicon-stub
-          fonticontag="i"
-          height="36"
-          name="speedometer"
-        />
-      </cwidgetprogressicon-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      md="2"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetprogressicon-stub
-        color="info"
-        header="972"
-        text="comments"
-        value="25"
-      >
-        <cicon-stub
-          fonticontag="i"
-          height="36"
-          name="speech"
-        />
-      </cwidgetprogressicon-stub>
-    </ccol-stub>
-  </crow-stub>
-   
-  <crow-stub
-    gutters="true"
-  >
-    <ccol-stub
-      md="2"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetprogressicon-stub
-        color="info"
-        header="87.500"
-        inverse="true"
-        text="Visitors"
-        value="25"
-      >
-        <cicon-stub
-          fonticontag="i"
-          height="36"
-          name="people"
-        />
-      </cwidgetprogressicon-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      md="2"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetprogressicon-stub
-        color="success"
-        header="385"
-        inverse="true"
-        text="New Clients"
-        value="25"
-      >
-        <cicon-stub
-          fonticontag="i"
-          height="36"
-          name="userFollow"
-        />
-      </cwidgetprogressicon-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      md="2"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetprogressicon-stub
-        color="warning"
-        header="1238"
-        inverse="true"
-        text="Products sold"
-        value="25"
-      >
-        <cicon-stub
-          fonticontag="i"
-          height="36"
-          name="basketLoaded"
-        />
-      </cwidgetprogressicon-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      md="2"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetprogressicon-stub
-        color="primary"
-        header="28%"
-        inverse="true"
-        text="Returning Visitors"
-        value="25"
-      >
-        <cicon-stub
-          fonticontag="i"
-          height="36"
-          name="chartPie"
-        />
-      </cwidgetprogressicon-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      md="2"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetprogressicon-stub
-        color="danger"
-        header="5:34:11"
-        inverse="true"
-        text="Avg. Time"
-        value="25"
-      >
-        <cicon-stub
-          fonticontag="i"
-          height="36"
-          name="speedometer"
-        />
-      </cwidgetprogressicon-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      md="2"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetprogressicon-stub
-        color="info"
-        header="972"
-        inverse="true"
-        text="comments"
-        value="25"
-      >
-        <cicon-stub
-          fonticontag="i"
-          height="36"
-          name="speech"
-        />
-      </cwidgetprogressicon-stub>
-    </ccol-stub>
-  </crow-stub>
-   
-  <widgetsdropdown-stub />
-   
-  <crow-stub
-    gutters="true"
-  >
-    <ccol-stub
-      lg="3"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetheaderdetails-stub
-        color="primary"
-        leftfooter="+432,50 (15,78%)"
-        leftheader="$1.890,65"
-        rightfooter="Today 6:43 AM"
-        rightheader="SALE"
-      >
-        <cchartlinesimple-stub
-          backgroundcolor="transparent"
-          bordercolor="rgba(255,255,255,.55)"
-          datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
-          label="Sales"
-          style="height: 40px;"
-        />
-         
-        <cchartbarsimple-stub
-          backgroundcolor="rgba(0,0,0,.2)"
-          datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
-          label="Sales"
-          style="height: 40px;"
-        />
-      </cwidgetheaderdetails-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      lg="3"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetheaderdetails-stub
-        color="success"
-        leftfooter="+432,50 (15,78%)"
-        leftheader="$1.890,65"
-        rightfooter="Today 6:43 AM"
-        rightheader="SALE"
-      >
-        <cchartlinesimple-stub
-          backgroundcolor="transparent"
-          bordercolor="rgba(255,255,255,.55)"
-          datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
-          label="Sales"
-          style="height: 40px;"
-        />
-         
-        <cchartbarsimple-stub
-          backgroundcolor="rgba(0,0,0,.2)"
-          datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
-          label="Sales"
-          style="height: 40px;"
-        />
-      </cwidgetheaderdetails-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      lg="3"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetheaderdetails-stub
-        color="danger"
-        leftfooter="+432,50 (15,78%)"
-        leftheader="$1.890,65"
-        rightfooter="Today 6:43 AM"
-        rightheader="SALE"
-      >
-        <cchartlinesimple-stub
-          backgroundcolor="transparent"
-          bordercolor="rgba(255,255,255,.55)"
-          datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
-          label="Sales"
-          style="height: 40px;"
-        />
-         
-        <cchartbarsimple-stub
-          backgroundcolor="rgba(0,0,0,.2)"
-          datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
-          label="Sales"
-          style="height: 40px;"
-        />
-      </cwidgetheaderdetails-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      lg="3"
-      sm="6"
-      tag="div"
-    >
-      <cwidgetheaderdetails-stub
-        color="warning"
-        leftfooter="+432,50 (15,78%)"
-        leftheader="$1.890,65"
-        rightfooter="Today 6:43 AM"
-        rightheader="SALE"
-      >
-        <cchartlinesimple-stub
-          backgroundcolor="transparent"
-          bordercolor="rgba(255,255,255,.55)"
-          datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
-          label="Sales"
-          style="height: 40px;"
-        />
-         
-        <cchartbarsimple-stub
-          backgroundcolor="rgba(0,0,0,.2)"
-          datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
-          label="Sales"
-          style="height: 40px;"
-        />
-      </cwidgetheaderdetails-stub>
-    </ccol-stub>
-  </crow-stub>
-   
-  <crow-stub
-    gutters="true"
-  >
-    <ccol-stub
-      lg="2"
-      sm="4"
-      tag="div"
-    >
-      <cwidgetsimple-stub
-        header="title"
-        text="1,123"
-      >
-        <cchartlinesimple-stub
-          backgroundcolor="transparent"
-          bordercolor="danger"
-          datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
-          label="Sales"
-          style="height: 40px;"
-        />
-      </cwidgetsimple-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      lg="2"
-      sm="4"
-      tag="div"
-    >
-      <cwidgetsimple-stub
-        header="title"
-        text="1,123"
-      >
-        <cchartlinesimple-stub
-          backgroundcolor="transparent"
-          bordercolor="primary"
-          datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
-          label="Sales"
-          style="height: 40px;"
-        />
-      </cwidgetsimple-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      lg="2"
-      sm="4"
-      tag="div"
-    >
-      <cwidgetsimple-stub
-        header="title"
-        text="1,123"
-      >
-        <cchartlinesimple-stub
-          backgroundcolor="transparent"
-          bordercolor="success"
-          datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
-          label="Sales"
-          style="height: 40px;"
-        />
-      </cwidgetsimple-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      lg="2"
-      sm="4"
-      tag="div"
-    >
-      <cwidgetsimple-stub
-        header="title"
-        text="1,123"
-      >
-        <cchartbarsimple-stub
-          backgroundcolor="danger"
-          datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
-          label="Sales"
-          style="height: 40px;"
-        />
-      </cwidgetsimple-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      lg="2"
-      sm="4"
-      tag="div"
-    >
-      <cwidgetsimple-stub
-        header="title"
-        text="1,123"
-      >
-        <cchartbarsimple-stub
-          backgroundcolor="primary"
-          datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
-          label="Sales"
-          style="height: 40px;"
-        />
-      </cwidgetsimple-stub>
-    </ccol-stub>
-     
-    <ccol-stub
-      lg="2"
-      sm="4"
-      tag="div"
-    >
-      <cwidgetsimple-stub
-        header="title"
-        text="1,123"
-      >
-        <cchartbarsimple-stub
-          backgroundcolor="success"
-          datapoints="10,22,34,46,58,70,46,23,45,78,34,12"
-          label="Sales"
-          style="height: 40px;"
-        />
-      </cwidgetsimple-stub>
-    </ccol-stub>
-  </crow-stub>
-</div>
-`;