Mastering SwiftUI: Why Styling is Better Than Duplicating Components

SwiftUI’s power lies in its declarative and composable design. Yet many developers fall into the trap of duplicating UI components just to achieve different styling. A common example? Creating multiple buttons for different visual states like “Primary”, “Secondary”, and “Destructive”.

In this article, we’ll explore why using a custom ViewModifier is often the better, more scalable approach. We’ll walk through a complete example and contrast it with the inefficient alternative.

❌ The Inefficient Way: Duplicated Components

Say you’re building a button with different roles — primary action, secondary option, and destructive action. The naive approach?

struct PrimaryButton: View {
    let title: String
    var body: some View {
        Button(title) {
            print("action")
        }
        .padding()
        .background(Color.blue)
        .foregroundColor(.white)
        .cornerRadius(8)
    }
}

struct SecondaryButton: View {
    let title: String
    var body: some View {
        Button(title) {
            print("action")
        }
        .padding()
        .background(Color.blue)
        .foregroundColor(.white)
        .cornerRadius(8)
    }
}

struct DestructiveButton: View {
    let title: String
    var body: some View {
        Button(title) {
            print("action")
        }
        .padding()
        .background(Color.blue)
        .foregroundColor(.white)
        .cornerRadius(8)
    }
}

Usage:

PrimaryButton(title: "Save")
SecondaryButton(title: "Cancel")
DestructiveButton(title: "Delete")

While this works, it clutters your codebase, introduces duplication, and makes global styling changes hard to manage.

✅ The Better Way: Using a Custom View Modifier

A ViewModifier is a powerful SwiftUI tool that lets you encapsulate view appearance and behavior in a reusable way.

Step 1: Define an Enum for Button Types

enum AppButtonStyleType {
    case primary, secondary, destructive
}

Step 2: Create a Custom ViewModifier

struct AppButtonModifier: ViewModifier {
    let type: AppButtonStyleType
    let isPressed: Bool

    func body(content: Content) -> some View {
        let backgroundColor: Color
        let foregroundColor: Color

        switch type {
        case .primary:
            backgroundColor = .blue
            foregroundColor = .white
        case .secondary:
            backgroundColor = .gray.opacity(0.2)
            foregroundColor = .black
        case .destructive:
            backgroundColor = .red
            foregroundColor = .white
        }

        return content
            .padding()
            .background(backgroundColor)
            .foregroundColor(foregroundColor)
            .cornerRadius(8)
            .opacity(isPressed ? 0.7 : 1.0)
    }
}

Step 3: Create a View Extension for Easy Use

extension View {
    func appButtonStyle(type: AppButtonStyleType, isPressed: Bool = false) -> some View {
        self.modifier(AppButtonModifier(type: type, isPressed: isPressed))
    }
}

✅ Usage Example with Gesture Support

struct ContentView: View {
    @State private var isPressed = false

    var body: some View {
        VStack(spacing: 20) {
            Button("Save me") {
               print("action") 
            }
            .appButtonStyle(type: .primary, isPressed: isPressed)

            Button("Cancel") {
               print("action") 
            }
            .appButtonStyle(type: .secondary)

            Button("Delete") {
               print("action") 
            }
            .appButtonStyle(type: .destructive)
        }
        .padding()
    }
}

Now you have one modifier to rule them all. Clean, scalable, and easily configurable.

✅ Why This Approach is Better

🧩 Modular & Reusable

You define your styles once and apply them anywhere — no need to duplicate component logic.

🎯 Cleaner Views

Your View code focuses only on layout and data, not appearance logic.

🌗 Easier Theming

Want to switch to dark mode or add dynamic theming? Change just your modifier.

🔁 Composability

You can combine this modifier with others, allowing flexibility in large layouts.

🆚 ViewModifier vs. Custom View Components

🧩 When Should You Still Use Custom Components?

• When you have structural differences, not just visual (e.g., buttons with loading indicators).
• When a component has unique logic or data bindings.
• When it’s a complex control like a login form or card view.

But for styling and consistency — modifiers are your best friend in SwiftUI.

Conclusion

Instead of creating multiple button components for slight visual changes, use a custom ViewModifier with an enum. This pattern is cleaner, DRY, and far more scalable for real-world SwiftUI apps.

With just one modifier, you’ve unlocked a system that’s flexible, elegant, and easy to evolve as your app grows.