Icon Button

A circular button component for icon-only actions like close, settings, share, and more.

Import

import PrettyUI

Basic Usage

PIconButton("plus") {
    print("Add tapped!")
}

Variants

PIconButton supports the same variants as PButton:

// Primary - filled with primary color
PIconButton("plus").variant(.primary)

// Secondary - muted background
PIconButton("gearshape").variant(.secondary)

// Outline - bordered
PIconButton("heart.fill").variant(.outline)

// Ghost - transparent (default)
PIconButton("xmark").variant(.ghost)

// Destructive - for dangerous actions
PIconButton("trash").variant(.destructive)

Sizes

Four sizes are available:

PIconButton("star.fill").size(.sm)  // 32pt
PIconButton("star.fill").size(.md)  // 40pt (default)
PIconButton("star.fill").size(.lg)  // 48pt
PIconButton("star.fill").size(.xl)  // 56pt

// Custom size
PIconButton("star.fill").size(.custom(64))

Custom Colors

Override the default colors:

// Using Color values
PIconButton("bell.fill")
    .background(Color.purple)
    .foreground(.white)

// Using ColorTokens (theme-aware)
PIconButton("star.fill")
    .background(.success)
    .foreground(.successForeground)

// Both at once
PIconButton("bolt.fill")
    .colors(background: .yellow, foreground: .black)

Custom Icon Styling

Customize the icon size and weight:

// Custom icon size
PIconButton("gear")
    .iconSize(24)

// Custom font weight
PIconButton("gear")
    .fontWeight(.bold)

// Custom font
PIconButton("gear")
    .font(.system(size: 20, weight: .semibold))

Custom Button Size

Set a specific button size:

PIconButton("heart.fill")
    .frame(60)

Disabled State

PIconButton("heart.fill")
    .variant(.primary)
    .disabled()

Haptic Feedback

By default, PIconButton provides haptic feedback on iOS. Disable it if needed:

PIconButton("star")
    .haptics(false)

Common Patterns

Close Button

PIconButton("xmark") {
    dismiss()
}
.variant(.ghost)

Back Button

PIconButton("chevron.left") {
    goBack()
}
.variant(.ghost)

Settings Button

PIconButton("gearshape") {
    openSettings()
}
.variant(.secondary)

Share Button

PIconButton("square.and.arrow.up") {
    shareContent()
}
.variant(.ghost)

More Options

PIconButton("ellipsis") {
    showMenu()
}
.variant(.ghost)

Add Button

PIconButton("plus") {
    addItem()
}
.variant(.primary)
.size(.lg)

Delete Button

PIconButton("trash") {
    confirmDelete()
}
.variant(.destructive)

Real-World Examples

Navigation Bar

HStack {
    PIconButton("chevron.left") { goBack() }
        .variant(.ghost)
    
    Spacer()
    
    Text("Profile")
        .font(.headline)
    
    Spacer()
    
    PIconButton("gearshape") { openSettings() }
        .variant(.ghost)
}

Floating Action Button

ZStack(alignment: .bottomTrailing) {
    ScrollView { /* content */ }
    
    PIconButton("plus") {
        createNew()
    }
    .variant(.primary)
    .size(.xl)
    .padding()
}

Card Actions

PCard {
    // Card content...
} header: {
    HStack {
        Text("Notifications").font(.headline)
        Spacer()
        PIconButton("ellipsis") { showOptions() }
            .variant(.ghost)
            .size(.sm)
    }
}

API Reference

Initializer

public init(_ systemName: String, action: @escaping () -> Void = {})

Modifiers

Enums

PIconButtonSize

• .sm — 32pt
• .md — 40pt (default)
• .lg — 48pt
• .xl — 56pt
• .custom(CGFloat) — Custom size

Accessibility

PIconButton automatically:

• Uses the SF Symbol name as the accessibility label
• Announces as a button for VoiceOver
• Shows disabled state visually

For better accessibility, consider adding a custom label:

PIconButton("xmark") { dismiss() }
    .accessibilityLabel("Close")