Skip to content
Discount Badges preview
Rendered from the SwiftUI source on this page.

Discount Badges

From syxUI — written for both platforms, not translated between them.

Discount and offer badges.

Badges · SwiftUI · iOS 17

  • badges
  • swiftui

The actual source

DiscountBadges.swift
// Discount Badges · syxUI · https://syxui.dev/components/tag-discount
// Free in any project. Keep this line and credit syxUI where a person can read it.

import SwiftUI

let tgGreen = Color(red: 0.16, green: 0.66, blue: 0.40)
let tgRed = Color(red: 0.90, green: 0.24, blue: 0.28)
let tgPink = Color(red: 0.95, green: 0.35, blue: 0.55)

// Discount badges
struct DiscountBadges: View {
    var body: some View {
        HStack(spacing: 8) {
            Text("-20%").font(.system(size: 13, weight: .bold)).foregroundStyle(.white).padding(.horizontal, 10).padding(.vertical, 5).background(tgRed, in: RoundedRectangle(cornerRadius: 7, style: .continuous))
            Text("BOGO").font(.system(size: 12, weight: .bold)).foregroundStyle(.white).padding(.horizontal, 10).padding(.vertical, 5).background(tgPink, in: RoundedRectangle(cornerRadius: 7, style: .continuous))
            Text("FREE SHIP").font(.system(size: 12, weight: .bold)).foregroundStyle(tgGreen).padding(.horizontal, 10).padding(.vertical, 5).background(tgGreen.opacity(0.14), in: RoundedRectangle(cornerRadius: 7, style: .continuous))
        }
    }
}
iOS 17 · No dependencies

Dependencies

SwiftUI
No external dependencies

Requires iOS 17