Content

Label

An icon and a short text, aligned.

iOSSwiftUI HStack of Image and TextAndroidCompose Row of Icon and TextRenders in a Screen or an Island
Label on iOS
iOSSwiftUI HStack of Image and Text
Label on Android
AndroidCompose Row of Icon and Text

Import

ts
import {Label} from '@hzblj/kara-ui'

Props

An inline icon + text pair — the thing you put inside a button, a menu row or a section header. For a full tappable row with a subtitle and chevron, use ListItem.

PropTypeDefaultDescription
icon*IconName—

One of the app's icons, before the title.

title*string—

The text beside the icon.

colorColorToken'content.primary'

Colours the icon and the title alike. content.primary by default.

iconSizeSpaceSize's20'

The icon's size. s20 by default.

testIDstring—

Test identifier, forwarded to the native view.

variantTextVariant'body'

The title's text style. body by default.

icon*
IconName

One of the app's icons, before the title.

title*
string

The text beside the icon.

color'content.primary'
ColorToken

Colours the icon and the title alike. content.primary by default.

iconSize's20'
SpaceSize

The icon's size. s20 by default.

testID
string

Test identifier, forwarded to the native view.

variant'body'
TextVariant

The title's text style. body by default.

Platform notes

  • An inline pair for a button, a menu row or a section header. For a tappable row with a subtitle, use ListItem.