Can I add SF Symbols?

Extend the copied code with Label or Image(systemName:) as needed.

⚙️Loaders 🌈Gradients 🪪Cards ⚡Animations 🔔Alerts 📸Photo Picker 🕶️Shadows 🔘Buttons 🧩Grids 🎨Palettes 🔍JSON → Model 🌐API Generator 📝Postman → Code 📋JSON Format 🔐Base64

Button Builder

Variant

Style

Size

Title

Text color

Background

Padding V

Padding H

Corner radius

Border

Shadow

Button Builder

Variant

Style

Size

Title

Text color

Background

Padding V

Padding H

Corner radius

Border

Shadow

Generated Code

import SwiftUI

enum AppButtonVariant {

case primary

case secondary

case tertiary

}

enum AppButtonStyle {

case filled

case outline

case ghost

}

enum AppButtonSize {

case sm

case md

case lg

}

struct AppButtonModifier: ViewModifier {

let variant: AppButtonVariant

let style: AppButtonStyle

let size: AppButtonSize

let cornerRadius: CGFloat = 12

let borderWidth: CGFloat = 1

let shadowEnabled: Bool = false

let shadowRadius: CGFloat = 16

let shadowX: CGFloat = 0

let shadowY: CGFloat = 8

private var padding: (v: CGFloat, h: CGFloat, font: CGFloat) {

switch size {

case .sm: return (8, 12, 14)

case .md: return (12, 16, 16)

Button Builder

Variant

Style

Size

Title

Text color

Background

Padding V

Padding H

Corner radius

Border

Shadow

Device Preview

Generated Code

import SwiftUI

enum AppButtonVariant {

case primary

case secondary

case tertiary

}

enum AppButtonStyle {

case filled

case outline

case ghost

}

enum AppButtonSize {

case sm

case md

case lg

}

struct AppButtonModifier: ViewModifier {

let variant: AppButtonVariant

let style: AppButtonStyle

let size: AppButtonSize

let cornerRadius: CGFloat = 12

let borderWidth: CGFloat = 1

let shadowEnabled: Bool = false

let shadowRadius: CGFloat = 16

let shadowX: CGFloat = 0

let shadowY: CGFloat = 8

private var padding: (v: CGFloat, h: CGFloat, font: CGFloat) {

switch size {

case .sm: return (8, 12, 14)

case .md: return (12, 16, 16)

728×90

between-tool-content · Ad slot ready

SwiftUI Button Builder

Build styled SwiftUI buttons quickly with padding, backgrounds, corner radius, and borders.

Use it to standardize primary/secondary button styles across your app.

How to use

Configure padding, colors, corner radius, and border.
Preview the button in the device frame.
Copy the Button style code.
Reuse for primary and secondary actions.

Responsive

in-content · Ad slot ready

Examples (copy-paste)

Primary button

Button("Continue") {}
  .padding(.vertical, 12)
  .padding(.horizontal, 16)
  .background(Color.blue)
  .foregroundStyle(.white)
  .clipShape(RoundedRectangle(cornerRadius: 12))

FAQs

Can I add SF Symbols?: Extend the copied code with Label or Image(systemName:) as needed.

Related tools

SwiftUI Loader Generator

SwiftUI tool

SwiftUI Gradient Generator

SwiftUI tool

SwiftUI Card Generator

SwiftUI tool

SwiftUI Animation Generator

SwiftUI tool

SwiftUI Alert Generator

SwiftUI tool