Push badge

새로운 업데이트나 알림이 있음을 시각적으로 알려주기 위해 사용합니다.

@MainActor struct PushBadge

Overview

작은 점 또는 임의의 문자열(숫자·“N” 등)을 표시할 수 있으며 다양한 크기와 위치를 지원합니다. 주로 아이콘이나 버튼 주변에 새로운 알림이나 메시지가 있음을 나타내기 위해 사용됩니다.

// 기본 점 형태 뱃지
PushBadge(variant: .dot)

// 문자열 표시 뱃지
PushBadge(variant: .text("N"))
    .size(.small)

// 최대치 표기 뱃지 (99 초과 시 "99+")
PushBadge(variant: .maxCount(150))
    .backgroundColor(.red)

// 배경과 분리하는 아웃라인 보더 적용 (아바타 등 겹침 배경에서 사용)
PushBadge(variant: .dot)
    .outlineBorder()

Topics

Initializers

init(variant: Variant)

PushBadge를 초기화합니다.

  • Parameters

    ParameterDescription
    variant뱃지의 표시 형태 (dot, text, maxCount)

Instance Properties

var body: some View

뷰의 내용과 동작을 정의합니다.

Instance Methods

func backgroundColor(SwiftUI.Color) -> PushBadge

배경 색상을 설정합니다.

  • Parameters

    ParameterDescription
    color배경 색상

  • Return Value

    배경 색상이 변경된 PushBadge

func fontColor(SwiftUI.Color) -> PushBadge

텍스트 색상을 설정합니다.

  • Parameters

    ParameterDescription
    color텍스트 색상

  • Return Value

    텍스트 색상이 변경된 PushBadge

func outlineBorder(Bool, color: SwiftUI.Color) -> PushBadge

배경과 뱃지를 분리하는 아웃라인 보더를 설정합니다.

  • Parameters

    ParameterDescription
    outlineBorder아웃라인 보더 표시 여부, 생략하면 기본값으로 true 적용
    color아웃라인 보더 색상, 생략하면 기본값으로 .semantic(.backgroundNeutralPrimary) 적용

  • Return Value

    아웃라인 보더가 설정된 PushBadge

  • Discussion

    아바타 등 겹치는 배경 위에 뱃지를 얹을 때, 뱃지 주위에 배경색 테두리를 그려 시각적으로 분리합니다. 이 모디파이어를 호출하지 않으면 off이고, 인자 없이 호출하면 on이 됩니다. 테두리와 뱃지 사이 간격은 크기·형태별로 상이합니다.

func size(Size) -> PushBadge

뱃지의 크기를 설정합니다.

  • Parameters

    ParameterDescription
    size뱃지 크기

  • Return Value

    크기가 변경된 PushBadge

Enumerations

enum Position

뱃지의 위치를 정의하는 열거형입니다.

  • Overview

    수직 위치(top, center, bottom)와 수평 위치(leading, center, trailing)를 함께 지정할 수 있습니다.

    // 우측 상단에 위치
someView.pushBadge(position: .top(.trailing))

// 좌측 하단에 위치
someView.pushBadge(position: .bottom(.leading))

Enumeration Cases

case bottom(HorizontalPosition)

하단 위치

  • Parameters

    ParameterDescription
    horizontalPosition수평 위치, 생략하면 기본값으로 .center 적용
case center(HorizontalPosition)

중앙 위치

  • Parameters

    ParameterDescription
    horizontalPosition수평 위치, 생략하면 기본값으로 .center 적용
case top(HorizontalPosition)

상단 위치

  • Parameters

    ParameterDescription
    horizontalPosition수평 위치, 생략하면 기본값으로 .center 적용

Enumerations

enum HorizontalPosition

수평 위치를 정의하는 열거형입니다.

Enumeration Cases
case center

중앙 정렬

case leading

좌측 정렬

case trailing

우측 정렬

enum Size

뱃지의 크기를 정의하는 열거형입니다.

Enumeration Cases

case medium

큰 크기

case small

중간 크기

case xsmall

가장 작은 크기

enum Variant

뱃지의 표시 형태를 정의하는 열거형입니다.

Enumeration Cases

case dot

작은 점 형태의 뱃지

case maxCount(Int, max: Int)

최대치를 적용해 숫자를 표시하는 뱃지

  • Parameters

    ParameterDescription
    count표시할 숫자
    max표기 상한, 생략하면 기본값으로 99 적용. count가 max를 초과하면 "{max}+"로 표시
case text(String)

임의의 문자열을 표시하는 뱃지

  • Parameters

    ParameterDescription
    text표시할 문자열

Associated Extensions

extension View
func pushBadge(variant: PushBadge.Variant, size: PushBadge.Size, fontColor: SwiftUI.Color, backgroundColor: SwiftUI.Color, outlineBorder: Bool, outlineBorderColor: SwiftUI.Color, position: PushBadge.Position, inset: CGSize) -> some View

현재 뷰에 푸시 알림 뱃지를 표시합니다.

  • Parameters

    ParameterDescription
    variant뱃지의 표시 형태, 생략하면 기본값으로 .dot 적용
    size뱃지 크기, 생략하면 기본값으로 .xsmall 적용
    fontColor텍스트 색상, 생략하면 기본값으로 .semantic(.staticWhite) 적용
    backgroundColor배경 색상, 생략하면 기본값으로 .semantic(.surfaceBrandPrimary) 적용
    outlineBorder배경과 분리하는 아웃라인 보더 표시 여부, 생략하면 기본값으로 false 적용
    outlineBorderColor아웃라인 보더 색상, 생략하면 기본값으로 .semantic(.backgroundNeutralPrimary) 적용
    position뱃지 위치, 생략하면 기본값으로 .top(.trailing) 적용
    inset부착 위치를 대상 안쪽으로 들이는 여백, 생략하면 기본값으로 .zero 적용

  • Return Value

    뱃지가 적용된 뷰

  • Discussion

    뷰의 특정 위치에 알림 또는 메시지 표시용 뱃지를 추가합니다.

    Button("메시지") { }
    .pushBadge(variant: .maxCount(3), position: .top(.leading))

Image.icon(.bell)
    .pushBadge()  // 기본값: 우측 상단에 빨간 점

Relationships

Conforms To

Swift.Sendable

SwiftUICore.View

© 2026 Wanted Lab, Inc.