Favorite Button
Heart toggle button with spring animation and fill transition for bookmarking.
SwiftUI Implementation
Pure Vanilla Swift • No DependenciesfavoriteButton.swift
import Foundation
import SwiftUI
struct FavoriteButton: View {
@Binding var isFavorite: Bool
var body: some View {
Button(action: {
isFavorite.toggle()
}) {
/// You can download custom symbols used in this component:
/// custom.heart.fill: https://drive.google.com/file/d/1FrubVKYkTqG61-iAA0LVv5MnjQKx1WUI/view?usp=sharing
/// custom.heart: https://drive.google.com/file/d/1FbTd5rpydjMYCSktub2k9N7YeKVSDMVN/view?usp=sharing
Image(isFavorite ? "custom.heart.fill" : "custom.heart")
.font(.system(size: 20))
.fontWeight(.regular)
.symbolRenderingMode(.multicolor)
.symbolEffect(.bounce, value: isFavorite)
.shadow(color: .gray.opacity(0.5), radius: 5, x: 0, y: 2)
.sensoryFeedback(.success, trigger: isFavorite)
}
.buttonStyle(PlainButtonStyle())
}
}
struct UseFavoriteButton: View {
@State private var isFavorite: Bool = false
var body: some View {
FavoriteButton(isFavorite: $isFavorite)
}
}
#Preview {
UseFavoriteButton()
}Ready to copy and paste directly into any Xcode project running iOS 16.0+.
Recommended Use Cases
- First-run onboarding flows and feature introductions
- Paywalls, upgrade prompts, and subscription tiers
- Dashboard overviews, stats tracking, and metric highlights
Component Details
- Category
- Buttons
- iOS Compatibility
- iOS 16.0+
- Xcode Version
- Xcode 15+
- Platform
- iOS
- License Tier
- Free
- Themes & Contexts
- dashboardonboardingpaywall
- Keywords
- favoritebuttontoggleheart
C
Compot for iOS
Native SwiftUI playground app
Preview all 130+ components interactively on your device and copy code straight to Xcode with 1 tap.
Get Compot on the App StoreRelated SwiftUI Components
More components in Buttons and related app architectures.
ButtonsiOS 16.0+
Primary Button Basic
High-emphasis prominent action button with standard SwiftUI prominence styling and haptic feedback.
View Component & Code
ButtonsiOS 16.0+
CTA Button Large Basic
Full-width, high-impact call-to-action button designed for onboarding screens, welcome flows, and paywalls.
View Component & Code
ButtonsiOS 16.0+
Secondary Button Basic
Medium-emphasis secondary action button styled for alternative user workflows and dismissal actions.
View Component & Code