Label
Label is a view that displays an icon and a title. Label provides a consistent way to display icon-text combinations, commonly used in navigation items and lists.
Label is a view that displays an icon and a title. Label provides a consistent way to display icon-text combinations, commonly used in navigation items and lists.
Examples
Basic Usage
Preview unavailable for this example in the static docs build.
Show code
<Label icon="🏠" title="Home"></Label>Icon Only
Preview unavailable for this example in the static docs build.
Show code
<Label icon="⭐" title="Favorites" variant="iconOnly"></Label>Title Only
Preview unavailable for this example in the static docs build.
Show code
<Label icon="⚙️" title="Settings" variant="titleOnly"></Label>API
| Prop | Type | Required | Description |
|---|---|---|---|
icon | ReactNode | No | Label icon |
title | string | Yes | Label text |
variant | 'automatic' | 'iconOnly' | 'titleOnly' | No | Label style variant Default: 'automatic' |
style | IBaseComponent['style'] | No | Custom CSS style (overrides variant) |
Inherits additional props from Omit<IBaseComponent, 'style'>.
Overview
Label is a view that displays an icon and a title. Label provides a consistent way to display icon-text combinations, commonly used in navigation items and lists.
SwiftUI Correspondence: Similar to SwiftUI's Label.
Variants
Label supports different display variants:
Notes
- Label requires
iconandtitleprops - Label supports different variants:
default,iconOnly,titleOnly - Label provides consistent spacing and alignment
- Use Label for navigation items, list items, and menu items
- Label automatically handles icon and text alignment
Best Practices
- Icons: Use appropriate icons that match the label meaning
- Consistency: Use Label consistently for icon-text combinations
- Accessibility: Ensure labels are accessible with proper text
- Variants: Choose appropriate variant for your use case
- Spacing: Label provides consistent spacing automatically