diff --git a/src/BootstrapBlazor.Server/Components/Samples/Dropdowns.razor b/src/BootstrapBlazor.Server/Components/Samples/Dropdowns.razor
index fb96993c63a..71a55356052 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/Dropdowns.razor
+++ b/src/BootstrapBlazor.Server/Components/Samples/Dropdowns.razor
@@ -6,27 +6,27 @@
 <h4>@Localizer["Description"]</h4>
 
 <DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal">
-    <Dropdown TValue="string" Items="Items" OnSelectedItemChanged="@ShowMessage" Color="Color.Secondary" />
+    <Dropdown TValue="string" Items="Items" OnSelectedItemChanged="@ShowMessage" Color="Color.Secondary"></Dropdown>
     <ConsoleLogger @ref="Logger" />
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["NullTitle"]" Introduction="@Localizer["NullIntro"]" Name="Null">
-    <Dropdown TValue="string" Items="EmptyList" Color="Color.Secondary" />
+    <Dropdown TValue="string" Items="EmptyList" Color="Color.Secondary"></Dropdown>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["ColorTitle"]" Introduction='@Localizer["ColorIntro"]' Name="Color">
     <div class="row g-3">
         <div class="col-6 col-sm-4 col-md-3">
-            <Dropdown TValue="string" Items="Items" Color="Color.Primary" />
+            <Dropdown TValue="string" Items="Items" Color="Color.Primary"></Dropdown>
         </div>
         <div class="col-6 col-sm-4 col-md-3">
-            <Dropdown TValue="string" Items="Items" Color="Color.Info" />
+            <Dropdown TValue="string" Items="Items" Color="Color.Info"></Dropdown>
         </div>
         <div class="col-6 col-sm-4 col-md-3">
-            <Dropdown TValue="string" Items="Items" Color="Color.Warning" />
+            <Dropdown TValue="string" Items="Items" Color="Color.Warning"></Dropdown>
         </div>
         <div class="col-6 col-sm-4 col-md-3">
-            <Dropdown TValue="string" Items="Items" Color="Color.Danger" />
+            <Dropdown TValue="string" Items="Items" Color="Color.Danger"></Dropdown>
         </div>
     </div>
 </DemoBlock>
@@ -34,16 +34,16 @@
 <DemoBlock Title="@Localizer["SplitTitle"]" Introduction='@Localizer["SplitIntro"]' Name="Split">
     <div class="row g-3">
         <div class="col-6 col-sm-4 col-md-3">
-            <Dropdown TValue="string" Items="Items" ShowSplit="true" Color="Color.Primary" />
+            <Dropdown TValue="string" Items="Items" ShowSplit="true" Color="Color.Primary"></Dropdown>
         </div>
         <div class="col-6 col-sm-4 col-md-3">
-            <Dropdown TValue="string" Items="Items" ShowSplit="false" Color="Color.Info" />
+            <Dropdown TValue="string" Items="Items" ShowSplit="false" Color="Color.Info"></Dropdown>
         </div>
         <div class="col-6 col-sm-4 col-md-3">
-            <Dropdown TValue="string" Items="Items" ShowSplit="true" Color="Color.Warning" />
+            <Dropdown TValue="string" Items="Items" ShowSplit="true" Color="Color.Warning"></Dropdown>
         </div>
         <div class="col-6 col-sm-4 col-md-3">
-            <Dropdown TValue="string" Items="Items" ShowSplit="true" Color="Color.Danger" />
+            <Dropdown TValue="string" Items="Items" ShowSplit="true" Color="Color.Danger"></Dropdown>
         </div>
     </div>
 </DemoBlock>
@@ -51,22 +51,22 @@
 <DemoBlock Title="@Localizer["SizeTitle"]" Introduction="@Localizer["SizeIntro"]" Name="Size">
     <div class="row g-3">
         <div class="col-6 col-sm-4 col-md-3 col-xl-auto">
-            <Dropdown TValue="string" Items="Items" Size="Size.ExtraSmall" />
+            <Dropdown TValue="string" Items="Items" Size="Size.ExtraSmall"></Dropdown>
         </div>
         <div class="col-6 col-sm-4 col-md-3 col-xl-auto">
-            <Dropdown TValue="string" Items="Items" Size="Size.Small" />
+            <Dropdown TValue="string" Items="Items" Size="Size.Small"></Dropdown>
         </div>
         <div class="col-6 col-sm-4 col-md-3 col-xl-auto">
-            <Dropdown TValue="string" Items="Items" Size="Size.Medium" />
+            <Dropdown TValue="string" Items="Items" Size="Size.Medium"></Dropdown>
         </div>
         <div class="col-6 col-sm-4 col-md-3 col-xl-auto">
-            <Dropdown TValue="string" Items="Items" Size="Size.Large" />
+            <Dropdown TValue="string" Items="Items" Size="Size.Large"></Dropdown>
         </div>
         <div class="col-6 col-sm-4 col-md-3 col-xl-auto">
-            <Dropdown TValue="string" Items="Items" Size="Size.ExtraLarge" />
+            <Dropdown TValue="string" Items="Items" Size="Size.ExtraLarge"></Dropdown>
         </div>
         <div class="col-6 col-sm-4 col-md-3 col-xl-auto">
-            <Dropdown TValue="string" Items="Items" Size="Size.ExtraExtraLarge" />
+            <Dropdown TValue="string" Items="Items" Size="Size.ExtraExtraLarge"></Dropdown>
         </div>
     </div>
 </DemoBlock>
@@ -74,16 +74,16 @@
 <DemoBlock Title="@Localizer["DirectionTitle"]" Introduction='@Localizer["DirectionIntro"]' Name="Direction">
     <div class="row form-inline form-inline-end g-3">
         <div class="col-6 col-sm-4 col-md-3">
-            <Dropdown TValue="string" Items="Items" Direction="Direction.Dropleft" ShowLabel="true" DisplayText="Start" />
+            <Dropdown TValue="string" Items="Items" Direction="Direction.Dropleft" ShowLabel="true" DisplayText="Start"></Dropdown>
         </div>
         <div class="col-6 col-sm-4 col-md-3">
-            <Dropdown TValue="string" Items="Items" Direction="Direction.Dropright" ShowLabel="true" DisplayText="End" />
+            <Dropdown TValue="string" Items="Items" Direction="Direction.Dropright" ShowLabel="true" DisplayText="End"></Dropdown>
         </div>
         <div class="col-6 col-sm-4 col-md-3">
-            <Dropdown TValue="string" Items="Items" Direction="Direction.Dropup" ShowLabel="true" DisplayText="Up" />
+            <Dropdown TValue="string" Items="Items" Direction="Direction.Dropup" ShowLabel="true" DisplayText="Up"></Dropdown>
         </div>
         <div class="col-6 col-sm-4 col-md-3">
-            <Dropdown TValue="string" Items="Items" Direction="Direction.Dropdown" ShowLabel="true" DisplayText="Down" />
+            <Dropdown TValue="string" Items="Items" Direction="Direction.Dropdown" ShowLabel="true" DisplayText="Down"></Dropdown>
         </div>
     </div>
 </DemoBlock>
@@ -96,7 +96,7 @@
                       Color="Color.Secondary"
                       MenuAlignment="Alignment.Left"
                       Direction="Direction.Dropdown"
-                      ShowLabel="true" DisplayText="Start" />
+                      ShowLabel="true" DisplayText="Start"></Dropdown>
         </div>
         <div class="col-6 col-sm-4 col-md-3">
             <Dropdown TValue="string"
@@ -104,7 +104,7 @@
                       Color="Color.Secondary"
                       MenuAlignment="Alignment.Right"
                       Direction="Direction.Dropdown"
-                      ShowLabel="true" DisplayText="End" />
+                      ShowLabel="true" DisplayText="End"></Dropdown>
         </div>
         <div class="col-6 col-sm-4 col-md-3">
             <Dropdown TValue="string"
@@ -112,7 +112,7 @@
                       Color="Color.Secondary"
                       MenuAlignment="Alignment.Center"
                       Direction="Direction.Dropdown"
-                      ShowLabel="true" DisplayText="Center" />
+                      ShowLabel="true" DisplayText="Center"></Dropdown>
         </div>
         <div class="col-6 col-sm-4 col-md-3">
             <Dropdown TValue="string"
@@ -121,7 +121,7 @@
                       MenuAlignment="Alignment.Center"
                       Direction="Direction.Dropup"
                       ShowLabel="true"
-                      DisplayText="Center" />
+                      DisplayText="Center"></Dropdown>
         </div>
     </div>
 </DemoBlock>
@@ -129,8 +129,7 @@
 <DemoBlock Title="@Localizer["ItemsTitle"]" Introduction='@Localizer["ItemsIntro"]' Name="Items">
     <div class="row">
         <div class="col-12 col-sm-6">
-            <Dropdown TValue="string" Items="@Foos">
-            </Dropdown>
+            <Dropdown TValue="string" Items="@Foos"></Dropdown>
         </div>
         <div class="col-12 col-sm-6">
             <Button @onclick="@AddItem">@Localizer["AddItem"]</Button>
@@ -155,20 +154,29 @@
 <DemoBlock Title="@Localizer["CascadeTitle"]" Introduction="@Localizer["CascadeIntro"]" Name="Cascade">
     <div class="row g-3">
         <div class="col-12 col-sm-6">
-            <Dropdown TValue="string" Items="Items3" OnSelectedItemChanged="OnCascadeBindSelectClick" />
+            <Dropdown TValue="string" Items="Items3" OnSelectedItemChanged="OnCascadeBindSelectClick"></Dropdown>
         </div>
         <div class="col-12 col-sm-6">
-            <Dropdown TValue="string" Items="Items2" />
+            <Dropdown TValue="string" Items="Items2"></Dropdown>
         </div>
     </div>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["IsFixedButtonTextTitle"]" Introduction="@Localizer["IsFixedButtonTextIntro"]" Name="IsFixedButtonText">
-    <Dropdown TValue="string" Items="RadioItems" IsFixedButtonText="true" />
+    <Dropdown TValue="string" Items="RadioItems" IsFixedButtonText="true"></Dropdown>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["FixedButtonTextTitle"]" Introduction="@Localizer["FixedButtonTextIntro"]" Name="FixedButtonText">
-    <Dropdown TValue="string" Items="RadioItems" IsFixedButtonText="true" FixedButtonText="@Localizer["City"]" />
+    <Dropdown TValue="string" Items="RadioItems" IsFixedButtonText="true" FixedButtonText="@Localizer["City"]"></Dropdown>
+</DemoBlock>
+
+<DemoBlock Title="@Localizer["ButtonTemplateTitle"]" Introduction="@Localizer["ButtonTemplateIntro"]" Name="ButtonTemplate">
+    <Dropdown TValue="string" Items="RadioItems">
+        <ButtonTemplate>
+            <i class="fa-solid fa-home"></i>
+            <span>@context.Text</span>
+        </ButtonTemplate>
+    </Dropdown>
 </DemoBlock>
 
 <AttributeTable Items="@GetAttributes()" />
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
index 1e40b93fe59..e04989c351e 100644
--- a/src/BootstrapBlazor.Server/Locales/en-US.json
+++ b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -1773,6 +1773,8 @@
     "IsFixedButtonTextIntro": "Set <code>IsFixedButtonText</code> to <b>true</b> make the ButtonText to const",
     "FixedButtonTextTitle": "Set the fixed button text",
     "FixedButtonTextIntro": "Set the <code>FixedButtonText</code> value for fixed button text",
+    "ButtonTemplateTitle": "Button Template",
+    "ButtonTemplateIntro": "You can customize the displayed content by setting <code>ButtonTemlate</code>",
     "AttributeValue": "Currently selected value",
     "AttributeClass": "Style",
     "AttributeColor": "Color",
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
index 535f9120fe6..e48800bfe47 100644
--- a/src/BootstrapBlazor.Server/Locales/zh-CN.json
+++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -1773,6 +1773,8 @@
     "IsFixedButtonTextIntro": "通过设置 <code>IsFixedButtonText</code> 使更改下拉选项时按钮文本不变",
     "FixedButtonTextTitle": "设置固定按钮文字",
     "FixedButtonTextIntro": "通过设置 <code>FixedButtonText</code> 来设置固定按钮的初始文字",
+    "ButtonTemplateTitle": "按钮模板",
+    "ButtonTemplateIntro": "通过设置 <code>ButtonTemlate</code> 可以自定义显示内容",
     "AttributeValue": "当前选中的值",
     "AttributeClass": "样式",
     "AttributeColor": "颜色",