diff --git a/components/badge/BadgeRibbon.razor b/components/badge/BadgeRibbon.razor
index 7f06694b..805a2015 100644
--- a/components/badge/BadgeRibbon.razor
+++ b/components/badge/BadgeRibbon.razor
@@ -7,7 +7,9 @@
         @ChildContent
     }
     <div class="@ClassMapper.Class" style="@_colorStyle">
-        @if (TextTemplate != null)@TextTemplate else @Text
+        <span class="ant-ribbon-text">
+            @if (TextTemplate != null)@TextTemplate else @Text
+        </span>
         <div class="ant-ribbon-corner" style="@_cornerColorStyle" />
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/site/AntBlazor.Docs/Demos/Components/Badge/demo/Ribbon.razor b/site/AntBlazor.Docs/Demos/Components/Badge/demo/Ribbon.razor
index 80ba9f9f..08e8fc28 100644
--- a/site/AntBlazor.Docs/Demos/Components/Badge/demo/Ribbon.razor
+++ b/site/AntBlazor.Docs/Demos/Components/Badge/demo/Ribbon.razor
@@ -2,6 +2,14 @@
     <Card Bordered>And raises the spyglass.</Card>
 </BadgeRibbon>
 <br />
+<BadgeRibbon Text="Pushes open the window" Color="orange">
+    <Card Bordered>And raises the spyglass.</Card>
+</BadgeRibbon>
+<br />
+<BadgeRibbon Text="Pushes open the window" Color="#832">
+    <Card Bordered>And raises the spyglass.</Card>
+</BadgeRibbon>
+<br />
 <BadgeRibbon >
     <TextTemplate>
         <Icon Type="windows" Theme="outline" />Pushes open the window
@@ -9,4 +17,4 @@
     <ChildContent>
         <Card Bordered>And raises the spyglass.</Card>
     </ChildContent>
-</BadgeRibbon>
\ No newline at end of file
+</BadgeRibbon>
diff --git a/tests/badge/RibbonTests.cs b/tests/badge/RibbonTests.cs
index 83625f50..e6a7895c 100644
--- a/tests/badge/RibbonTests.cs
+++ b/tests/badge/RibbonTests.cs
@@ -1,4 +1,4 @@
-using Bunit;
+using Bunit;
 using Microsoft.AspNetCore.Components;
 using Xunit;
 
@@ -13,6 +13,7 @@ namespace AntDesign.Tests.Badge
             cut.MarkupMatches(@"
                 <div class=""ant-ribbon-wrapper""> 
                     <div class=""ant-ribbon ant-ribbon-placement-end"">
+                    <span class=""ant-ribbon-text""></span>
                         <div class=""ant-ribbon-corner""></div>
                     </div>
                 </div>
@@ -32,6 +33,7 @@ namespace AntDesign.Tests.Badge
                 <div class=""ant-ribbon-wrapper""> 
                     <div /> 
                     <div class=""ant-ribbon ant-ribbon-placement-start"">
+                    <span class=""ant-ribbon-text""></span>
                     <div class=""ant-ribbon-corner"">
                         </div>
                     </div>
@@ -48,6 +50,7 @@ namespace AntDesign.Tests.Badge
                 <div class=""ant-ribbon-wrapper""> 
                     <div /> 
                     <div class=""ant-ribbon ant-ribbon-placement-end"">
+                    <span class=""ant-ribbon-text""></span>
                     <div class=""ant-ribbon-corner"">
                         </div>
                     </div>
@@ -68,6 +71,7 @@ namespace AntDesign.Tests.Badge
                 <div class=""ant-ribbon-wrapper""> 
                     <div /> 
                     <div class=""ant-ribbon ant-ribbon-placement-end ant-ribbon-color-green"">
+                    <span class=""ant-ribbon-text""></span>
                     <div class=""ant-ribbon-corner"">
                         </div>
                     </div>
@@ -91,6 +95,7 @@ namespace AntDesign.Tests.Badge
                 <div class=""ant-ribbon-wrapper""> 
                     <div /> 
                     <div class=""ant-ribbon ant-ribbon-placement-end"" style=""background: {color}"">
+                    <span class=""ant-ribbon-text""></span>
                     <div class=""ant-ribbon-corner"" style=""color: {color}"">
                         </div>
                     </div>
@@ -112,7 +117,7 @@ namespace AntDesign.Tests.Badge
                 <div class=""ant-ribbon-wrapper""> 
                     <div /> 
                     <div class=""ant-ribbon ant-ribbon-placement-end"">
-                        unicorn
+                    <span class=""ant-ribbon-text"">unicorn</span>
                         <div class=""ant-ribbon-corner"">
                             </div>
                         </div>
@@ -142,7 +147,9 @@ namespace AntDesign.Tests.Badge
                 <div class=""ant-ribbon-wrapper""> 
                     <div /> 
                     <div class=""ant-ribbon ant-ribbon-placement-end"">
-                        <span class=""cool"">Hello</span>
+                        <span class=""ant-ribbon-text"">
+                            <span class=""cool"">Hello</span>
+                        </span>
                         <div class=""ant-ribbon-corner"">
                         </div>
                     </div>