Repository: dotnetcore/BootstrapBlazor (2025-08-03T02:26:41Z)

Issue:
feat(RadioList): add outline style
### Is there an existing issue for this?

- [x] I have searched the existing issues

### Is your feature request related to a problem? Please describe the problem.

add outline style

### Describe the solution you'd like

_No response_

### Additional context

_No response_


Discussion:
@ArgoZhang Thank you for contacting us. We will give feedback later.



Patch:
diff --git a/src/BootstrapBlazor/Components/Radio/RadioList.razor.cs b/src/BootstrapBlazor/Components/Radio/RadioList.razor.cs
index 899f1d4946b..2157303a21d 100644
--- a/src/BootstrapBlazor/Components/Radio/RadioList.razor.cs
+++ b/src/BootstrapBlazor/Components/Radio/RadioList.razor.cs
@@ -46,7 +46,8 @@ public partial class RadioList<TValue>
         .Build();
 
     private string? GetButtonItemClassString(SelectedItem item) => CssBuilder.Default("btn")
-        .AddClass($"active bg-{Color.ToDescriptionString()}", CurrentValueAsString == item.Value)
+        .AddClass($"btn-outline-{Color.ToDescriptionString()}")
+        .AddClass("active", CurrentValueAsString == item.Value)
         .Build();
 
     /// <summary>
diff --git a/src/BootstrapBlazor/Components/Radio/RadioList.razor.scss b/src/BootstrapBlazor/Components/Radio/RadioList.razor.scss
index f60f1e5e8f3..80b82db9b81 100644
--- a/src/BootstrapBlazor/Components/Radio/RadioList.razor.scss
+++ b/src/BootstrapBlazor/Components/Radio/RadioList.razor.scss
@@ -1,4 +1,4 @@
-.radio-list {
+﻿.radio-list {
     --bb-radio-item-width: #{$bb-radio-item-width};
     --bb-radio-item-padding: #{$bb-radio-item-padding};
     --bb-radio-group-item-active-color: #{$bb-radio-group-item-active-color};
@@ -24,7 +24,6 @@
     }
 
     &.btn-group {
-        border: var(--bs-border-width) solid var(--bs-border-color);
         display: inline-flex;
         flex: 0 !important;
         flex-wrap: nowrap;
@@ -39,12 +38,18 @@
         }
 
         &.disabled > span {
+            --bs-btn-hover-color: var(--bs-btn-color);
+            --bs-btn-active-color: var(--bs-btn-color);
             opacity: var(--bs-btn-disabled-opacity);
 
             &:not(.active) {
                 background-color: var(--bs-secondary-bg);
             }
         }
+
+        .btn-outline-info {
+            --bs-btn-active-color: var(--bb-radio-group-item-active-color);
+        }
     }
 
     &.btn-group-vertical {


Test patch:
diff --git a/test/UnitTest/Components/RadioTest.cs b/test/UnitTest/Components/RadioTest.cs
index 3cbc56d2718..2c56a6c8644 100644
--- a/test/UnitTest/Components/RadioTest.cs
+++ b/test/UnitTest/Components/RadioTest.cs
@@ -232,13 +232,13 @@ public void IsButton_Ok()
         {
             pb.Add(a => a.Color, Color.Danger);
         });
-        cut.Contains("btn active bg-danger");
+        cut.Contains("btn btn-outline-danger");
 
         cut.InvokeAsync(() =>
         {
             var btn = cut.Find(".btn");
             btn.Click();
-            cut.Contains("btn active bg-danger");
+            cut.Contains("btn btn-outline-danger active");
         });
     }