Skip to main content
Label(props: {
    title: string | Component;
    icon?: Component;
    systemImage?: string;
}): Component;
​
title
string | Component
required
The label text. Can be a plain string or a component for custom styling.
​
icon
Component
A custom icon component displayed alongside the title.
​
systemImage
string
A system symbol name (SF Symbols) to use as the icon. Mutually exclusive with icon.

​
Support

​
Usage

​
Label with system image

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

​
Label with custom icon

Label({
    title: "Profile",
    icon: Image({ url: "https://example.com/avatar.png" })
        .resizable()
        .frame({ width: 20, height: 20 })
})

​
Label with styled title

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

​
Labels in a list

List([
    NavigationLink(
        Label({ title: "Messages", systemImage: "message" }),
        () => MessagesView()
    ),
    NavigationLink(
        Label({ title: "Calendar", systemImage: "calendar" }),
        () => CalendarView()
    ),
    NavigationLink(
        Label({ title: "Photos", systemImage: "photo" }),
        () => PhotosView()
    ),
])

​
See Also