diff --git a/Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/ButtonPreview.swift b/Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/ButtonPreview.swift
index b4897535..e04c2292 100644
--- a/Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/ButtonPreview.swift
+++ b/Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/ButtonPreview.swift
@@ -29,6 +29,7 @@ struct ButtonPreview: View {
         Picker("Style", selection: self.$model.style) {
           Text("Filled").tag(ButtonVM.Style.filled)
           Text("Plain").tag(ButtonVM.Style.plain)
+          Text("Light").tag(ButtonVM.Style.light)
           Text("Bordered with small border").tag(ButtonVM.Style.bordered(.small))
           Text("Bordered with medium border").tag(ButtonVM.Style.bordered(.medium))
           Text("Bordered with large border").tag(ButtonVM.Style.bordered(.large))
diff --git a/Sources/ComponentsKit/Components/Button/Models/ButtonStyle.swift b/Sources/ComponentsKit/Components/Button/Models/ButtonStyle.swift
index 9396e997..787dadba 100644
--- a/Sources/ComponentsKit/Components/Button/Models/ButtonStyle.swift
+++ b/Sources/ComponentsKit/Components/Button/Models/ButtonStyle.swift
@@ -7,6 +7,8 @@ extension ButtonVM {
     case filled
     /// A button with a transparent background.
     case plain
+    /// A button with a partially transparent background.
+    case light
     /// A button with a transparent background and a border.
     case bordered(BorderWidth)
   }
diff --git a/Sources/ComponentsKit/Components/Button/Models/ButtonVM.swift b/Sources/ComponentsKit/Components/Button/Models/ButtonVM.swift
index 6d59e8e0..1d5dac56 100644
--- a/Sources/ComponentsKit/Components/Button/Models/ButtonVM.swift
+++ b/Sources/ComponentsKit/Components/Button/Models/ButtonVM.swift
@@ -50,36 +50,30 @@ public struct ButtonVM: ComponentVM {
 // MARK: Shared Helpers
 
 extension ButtonVM {
-  private var mainColor: UniversalColor {
-    let color = self.color?.main ?? .content2
-    return color.enabled(self.isEnabled)
-  }
-  private var contrastColor: UniversalColor {
-    let color = self.color?.contrast ?? .foreground
-    return color.enabled(self.isEnabled)
-  }
   var backgroundColor: UniversalColor? {
     switch self.style {
     case .filled:
-      return self.mainColor
+      let color = self.color?.main ?? .content2
+      return color.enabled(self.isEnabled)
+    case .light:
+      let color = self.color?.background ?? .content1
+      return color.enabled(self.isEnabled)
     case .plain, .bordered:
       return nil
     }
   }
   var foregroundColor: UniversalColor {
-    switch self.style {
+    let color = switch self.style {
     case .filled:
-      return self.contrastColor
-    case .plain:
-      return self.mainColor
-    case .bordered:
-      let color = self.color?.main ?? .foreground
-      return color.enabled(self.isEnabled)
+      self.color?.contrast ?? .foreground
+    case .plain, .light, .bordered:
+      self.color?.main ?? .foreground
     }
+    return color.enabled(self.isEnabled)
   }
   var borderWidth: CGFloat {
     switch self.style {
-    case .filled, .plain:
+    case .filled, .plain, .light:
       return 0.0
     case .bordered(let borderWidth):
       return borderWidth.value
@@ -87,7 +81,7 @@ extension ButtonVM {
   }
   var borderColor: UniversalColor? {
     switch self.style {
-    case .filled, .plain:
+    case .filled, .plain, .light:
       return nil
     case .bordered:
       if let color {