diff --git a/docs/.vuepress/theme/global-components/AlphaBadge.vue b/docs/.vuepress/theme/global-components/AlphaBadge.vue
new file mode 100644
index 0000000000..77eb7dfce1
--- /dev/null
+++ b/docs/.vuepress/theme/global-components/AlphaBadge.vue
@@ -0,0 +1,23 @@
+<template>
+ <CustomBadge text="Alpha" type="alpha" :withLinkIcon=withLinkIcon :link="link"/>
+</template>
+
+<script>
+export default {
+  name: 'AlphaBadge',
+  props: {
+    text: {
+      type: String,
+      default: 'Alpha',
+      // required: true // to suppress Vue warnings
+    },
+    withLinkIcon: {
+      type: Boolean,
+      default: false
+    },
+    link: {
+      type: String,
+    },
+  }
+}
+</script>
diff --git a/docs/.vuepress/theme/global-components/BetaBadge.vue b/docs/.vuepress/theme/global-components/BetaBadge.vue
new file mode 100644
index 0000000000..278b7b30cd
--- /dev/null
+++ b/docs/.vuepress/theme/global-components/BetaBadge.vue
@@ -0,0 +1,23 @@
+<template>
+ <CustomBadge text="Beta" type="beta" :withLinkIcon=withLinkIcon :link="link"/>
+</template>
+
+<script>
+export default {
+  name: 'BetaBadge',
+  props: {
+    text: {
+      type: String,
+      default: 'Beta',
+      // required: true // to suppress Vue warnings
+    },
+    withLinkIcon: {
+      type: Boolean,
+      default: false
+    },
+    link: {
+      type: String,
+    },
+  }
+}
+</script>
diff --git a/docs/.vuepress/theme/global-components/CustomBadge.vue b/docs/.vuepress/theme/global-components/CustomBadge.vue
index 789e3035c2..0eb5c2f3f8 100644
--- a/docs/.vuepress/theme/global-components/CustomBadge.vue
+++ b/docs/.vuepress/theme/global-components/CustomBadge.vue
@@ -35,5 +35,32 @@ export default {
     background-color #00b6c8
   &.bronze
     background-color #15bb70
+  &.alpha
+  &.beta
+    position relative
+    top -.2em
+    left .6em
+    text-transform uppercase
+    font-size 14px
+    font-weight 700
+    border-radius 4px
+    padding .32em .6em .25em 1.2em
+    color $neutral800
+    &::before
+      position absolute
+      content: '•'
+      font-size 1.5em
+      left .25em
+      top .12em
+      content: '•'
+      font-size 1.5em
+  &.alpha
+    background-color $danger100 // check palette.styl for values
+    &::before
+      color $danger600
+  &.beta
+    background-color $alternative100
+    &::before
+      color $alternative600
 </style>