From 8a488deac111fbc43b8739c8959b8ae60cbedc80 Mon Sep 17 00:00:00 2001
From: Shigma <shigma10826@gmail.com>
Date: Wed, 30 Nov 2022 20:58:06 +0800
Subject: [PATCH] fix(theme): default to vertical align top on badges inside
 headings (#1584)

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
---
 docs/guide/theme-badge.md                       |  8 ++++----
 src/client/theme-default/components/VPBadge.vue | 11 ++++++++++-
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/docs/guide/theme-badge.md b/docs/guide/theme-badge.md
index 99b43151c03..9a4363f3be9 100644
--- a/docs/guide/theme-badge.md
+++ b/docs/guide/theme-badge.md
@@ -15,10 +15,10 @@ You may use the `Badge` component which is globally available.
 
 Code above renders like:
 
-### Title <Badge type="info" text="default" vertical="middle" />
-### Title <Badge type="tip" text="^1.9.0" vertical="middle" />
-### Title <Badge type="warning" text="beta" vertical="middle" />
-### Title <Badge type="danger" text="caution" vertical="middle" />
+### Title <Badge type="info" text="default" />
+### Title <Badge type="tip" text="^1.9.0" />
+### Title <Badge type="warning" text="beta" />
+### Title <Badge type="danger" text="caution" />
 
 ## Custom Children
 
diff --git a/src/client/theme-default/components/VPBadge.vue b/src/client/theme-default/components/VPBadge.vue
index 0d7d20d4dfd..c99701f7c9f 100644
--- a/src/client/theme-default/components/VPBadge.vue
+++ b/src/client/theme-default/components/VPBadge.vue
@@ -19,11 +19,20 @@ defineProps<{
   border-radius: 10px;
   padding: 0 8px;
   line-height: 18px;
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 600;
   transform: translateY(-2px);
 }
 
+h1 .VPBadge,
+h2 .VPBadge,
+h3 .VPBadge,
+h4 .VPBadge,
+h5 .VPBadge,
+h6 .VPBadge {
+  vertical-align: top;
+}
+
 h2 .VPBadge {
   border-radius: 11px;
   line-height: 20px;