TechnologiesSwiftUIControls and Style Configurations

LabelStyleConfiguration struct

iOSmacOStvOSwatchOSvisionOSiOS 14.0+✓ renders

The properties of a label.

How it works

LabelStyleConfiguration carries the resolved pieces of a label — its title and its icon — to a custom label style so you can arrange them yourself. When you conform a type to LabelStyle, SwiftUI hands your makeBody(configuration:) method one of these configurations describing the label that needs styling, leaving the layout entirely up to you. Reach for it whenever the built-in label styles don't match the placement, spacing, or emphasis you want, and you'd rather compose the title and icon directly than accept SwiftUI's default horizontal arrangement.

  1. Receive the configuration in makeBody(configuration:)

    A LabelStyle's only requirement is makeBody(configuration:), which SwiftUI calls once for each styled label and supplies a LabelStyleConfiguration. The configuration is your handle on the label being styled — everything you draw flows from it. In the example, VerticalLabelStyle implements makeBody(configuration:) and returns some View built from the configuration it's given.

  2. Place the icon with configuration.icon

    The icon property is an opaque view representing the label's symbol or image, already created by whoever wrote the Label. You position it however you like and apply your own modifiers without knowing its concrete type. Here configuration.icon is placed at the top of a VStack and enlarged with .font(.title).

  3. Place the text with configuration.title

    The title property is the companion opaque view for the label's text content. Pairing it with the icon lets you define the complete label layout — vertical, reversed, badged, or anything else. The example renders configuration.title beneath the icon and shrinks it with .font(.caption), producing a stacked title-under-icon look.

  4. Apply the style with labelStyle(_:)

    A custom style only takes effect once you attach it to a label hierarchy with the labelStyle(_:) modifier; SwiftUI then routes each affected Label through your makeBody, populating a fresh LabelStyleConfiguration each time. The example installs the style with .labelStyle(VerticalLabelStyle()) on the Label, so the framework feeds that label's title and icon into the configuration.

Try it — Swap the order of configuration.icon and configuration.title inside the VStack so the caption sits above the symbol, and watch the same LabelStyleConfiguration drive a title-over-icon arrangement instead.

Example & preview

Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.

LabelStyleConfiguration.swift
struct LabelStyleConfigurationDemo: View {
    struct VerticalLabelStyle: LabelStyle {
        func makeBody(configuration: LabelStyleConfiguration) -> some View {
            VStack(spacing: 4) {
                configuration.icon
                    .font(.title)
                configuration.title
                    .font(.caption)
            }
        }
    }

    var body: some View {
        Label("Favorites", systemImage: "star.fill")
            .labelStyle(VerticalLabelStyle())
            .foregroundStyle(.yellow)
            .padding()
    }
}
Live preview
Favorites
Favorites
swift → lexer → parser → sema → uiir → canvas Open in Studio ↗
What's new in SwiftUI 27 →