Chip

간결한 정보나 선택 상태를 시각적으로 표현합니다. 태그, 필터, 선택된 항목 등을 나타내며, 아이콘 및 텍스트와 함께 사용할 수 있습니다. 작고 유연한 형태로 다양한 인터랙션을 지원합니다.

@MainActor struct Chip

Overview

텍스트와 콘텐츠를 포함하는 칩 형태의 버튼입니다. 다양한 크기와 스타일을 지원하며, 탭 이벤트를 처리할 수 있습니다.

Chip(
    variant: .solid,
    size: .medium,
    text: "액션"
)
.backgroundColor(.semantic(.surfaceBrandPrimary))
.fontColor(.semantic(.staticWhite))
.leadingContent {
    Image.icon(.heart)
        .resizable()
        .renderingMode(.template)
        .frame(width: 14, height: 14)
        .foregroundStyle(SwiftUI.Color.semantic(.foregroundNeutralPrimary))
}

// 비활성화
Chip(text: "필터")
    .disabled(true)

콘텐츠 슬롯

텍스트 앞뒤에 임의의 뷰를 하나씩 넣을 수 있는 슬롯입니다.

슬롯 뷰는 가공 없이 그대로 배치되므로 크기와 색상은 사용처에서 정합니다. 시안상 슬롯은 정사각 아이콘 자리이며 권장 크기는 large 16, medium·small 14, xsmall 12입니다.

Chip(text: "김티드")
    .leadingContent {
        Thumbnail(urlString: profileImageURL, ratio: .r1x1)
            .width(14)
    }

Note

비활성화는 SwiftUI 표준 disabled(_:)를 사용합니다. 상위 컨테이너에 한 번 걸면 하위 컴포넌트까지 함께 비활성 스타일로 표시됩니다. 슬롯 뷰에는 색을 강제하지 않으므로, 비활성 상태의 색 변화가 필요하면 사용처에서 처리합니다.

Topics

Initializers

init(variant: Variant, size: Size, text: String, handler: (() -> Void)?)

칩을 초기화합니다.

  • Parameters

    ParameterDescription
    variant칩의 외관 스타일, 생략하면 기본값으로 .solid 적용
    size칩의 크기, 생략하면 기본값으로 .medium 적용
    text칩에 표시할 텍스트
    handler칩 클릭 시 실행할 핸들러, 생략하면 기본값으로 nil 적용

Instance Properties

var body: some View

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

Instance Methods

func active(Bool) -> Chip

칩의 선택 상태를 설정합니다.

  • Parameters

    ParameterDescription
    active선택 상태 여부

  • Return Value

    수정된 칩 인스턴스

func activeColor(SwiftUI.Color) -> Chip

칩의 활성화 상태 색상을 설정합니다.

  • Parameters

    ParameterDescription
    color활성화 상태일 때의 색상

  • Return Value

    수정된 칩 인스턴스

func backgroundColor(SwiftUI.Color) -> Chip

칩의 배경색을 설정합니다.

  • Parameters

    ParameterDescription
    color적용할 배경색

  • Return Value

    수정된 칩 인스턴스

func borderColor(SwiftUI.Color) -> Chip

칩의 테두리 색상을 설정합니다.

  • Parameters

    ParameterDescription
    color적용할 테두리 색상

  • Return Value

    수정된 칩 인스턴스

  • Discussion

    Note

    outlined variant에서만 적용됩니다. (solid는 테두리를 그리지 않습니다.)

func fontColor(SwiftUI.Color) -> Chip

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

  • Parameters

    ParameterDescription
    color적용할 텍스트 색상

  • Return Value

    수정된 칩 인스턴스

func leadingContent<V>(() -> V) -> Chip

텍스트 앞에 표시할 콘텐츠를 지정합니다.

  • Parameters

    ParameterDescription
    content표시할 뷰를 생성하는 클로저

  • Return Value

    수정된 칩 인스턴스

  • Discussion

    슬롯 뷰는 가공 없이 그대로 배치되므로 크기와 색상은 사용처에서 정합니다. 시안상 권장 크기는 large 16, medium·small 14, xsmall 12입니다.

    Chip(text: "김티드")
    .leadingContent {
        Image.icon(.bell)
            .resizable()
            .renderingMode(.template)
            .frame(width: 14, height: 14)
            .foregroundStyle(SwiftUI.Color.semantic(.foregroundNeutralPrimary))
    }

    Note

    4.0.0에서 제거된 leadingImage(_:)·imageColor(_:)를 대체합니다. leadingImage(Image.icon(.bell))은 이 슬롯에서 아이콘을 직접 구성하는 형태로 옮겨집니다.

func trailingContent<V>(() -> V) -> Chip

텍스트 뒤에 표시할 콘텐츠를 지정합니다.

  • Parameters

    ParameterDescription
    content표시할 뷰를 생성하는 클로저

  • Return Value

    수정된 칩 인스턴스

  • Discussion

    슬롯 뷰는 가공 없이 그대로 배치되므로 크기와 색상은 사용처에서 정합니다. 시안상 권장 크기는 large 16, medium·small 14, xsmall 12입니다.

    Chip(text: "김티드")
    .trailingContent {
        Image.icon(.closeThick)
            .resizable()
            .renderingMode(.template)
            .frame(width: 14, height: 14)
            .foregroundStyle(SwiftUI.Color.semantic(.foregroundNeutralPrimary))
    }

    Note

    4.0.0에서 제거된 trailingImage(_:)·imageColor(_:)를 대체합니다. trailingImage(Image.icon(.closeThick))은 이 슬롯에서 아이콘을 직접 구성하는 형태로 옮겨집니다.

Enumerations

enum Size

칩의 크기를 정의합니다.

Enumeration Cases

case large

큰 크기

case medium

중간 크기

case small

작은 크기

case xsmall

가장 작은 크기

Initializers

init?(rawValue: String)
enum Variant

칩의 외관을 결정하는 열거형입니다.

Enumeration Cases

case outlined

테두리만 있는 아웃라인 스타일

case solid

배경색이 채워진 스타일

Relationships

Conforms To

Swift.Sendable

SwiftUICore.View

© 2026 Wanted Lab, Inc.