Skip to main content
Label(props: { title: string | Component; icon?: Component; systemImage?: string }): Component;

​
Parameters

​
props.title
string | Component
The label text. Can be a plain string or a component for custom styling.
​
props.icon
Component
Optional custom icon component to display alongside the text.
​
props.systemImage
string
Optional system image name to use as the icon.

​
Support

​
Usage

​
Text-only label

Label({
    title: "Settings"
})

​
Label with system image

Label({
    title: "Favorite",
    systemImage: "star.fill"
})

​
Label with custom icon

Label({
    title: "Download",
    icon: Image({ systemName: "arrow.down.circle" })
        .foregroundStyle(Color("blue"))
})

​
Label with styled text

Label({
    title: Text("Important")
        .font("headline")
        .foregroundStyle(Color("red")),
    systemImage: "exclamationmark.triangle"
})

​
Label in lists

List([
    Label({
        title: "Messages",
        systemImage: "message"
    }),
    Label({
        title: "Calendar", 
        systemImage: "calendar"
    }),
    Label({
        title: "Photos",
        systemImage: "photo"
    })
])