Label

Expo UI Label matches the official SwiftUI Label API and displays a title alongside an icon.

Usage

Basic label with SF Symbol

import { Host, Label } from '@expo/ui/swift-ui';

export default function BasicLabelExample() {
  return (
    <Host style={{ flex: 1 }}>
      <Label title="Favorites" systemImage="star.fill" />
    </Host>
  );
}

With custom icon

Use the icon prop to provide a custom React node as the icon instead of an SF Symbol.

import { Host, Label, Image } from '@expo/ui/swift-ui';

export default function LabelCustomIconExample() {
  return (
    <Host style={{ flex: 1 }}>
      <Label
        title="Custom Icon"
        icon={
          <Image systemName="sparkles" size={20} color="purple" />
        }
      />
    </Host>
  );
}

Icon only

Use the labelStyle modifier with iconOnly to display only the icon. Always provide a title for accessibility even though it won't be visible.

import { Host, Label } from '@expo/ui/swift-ui';
import { labelStyle } from '@expo/ui/swift-ui/modifiers';

export default function LabelIconOnlyExample() {
  return (
    <Host style={{ flex: 1 }}>
      <Label
        title="Settings"
        systemImage="gear"
        modifiers={[labelStyle('iconOnly')]}
      />
    </Host>
  );
}

API

import { Label } from '@expo/ui/swift-ui';

Component

Label

Type: React.Element<LabelProps>

Renders a native label view, which could be used in a list or section.

LabelProps

children

Optional • Type: ReactNode

Custom title view. Accepts any React node (for example, a VStack with title and subtitle). When provided, this takes precedence over title.

Deprecated: Use foregroundStyle modifier instead.

color

Optional • Type: ColorValue

The color of the label icon.

icon

Optional • Type: ReactNode

Custom icon view to be displayed in the label. When provided, this takes precedence over systemImage.

systemImage

Optional • Type: SFSymbols7_0

The name of the SFSymbol to be displayed in the label.

title

Optional • Type: string

The title text to be displayed in the label.

Inherited props

• CommonViewModifierProps