Label

Text with a symbol or another icon beside it.

import { Label } from '@satinhq/kit'

Example

import { Label, List, Screen, Section } from '@satinhq/kit'

function Example() {
  return (
    <Screen>
      <List id="example">
        <Section>
          <Label symbol="book">Books</Label>
          <Label symbol="star">Favorites</Label>
        </Section>
      </List>
    </Screen>
  )
}

9:41

Read the example, then change its values in the code.

Choose a symbol

Use symbol with a name from the symbol catalog. See SymbolImage.

Supply another icon

Use icon for a React node when the icon is not a catalog symbol. Put the title in children.

Good to know

• The example displays Books with a book symbol and Favorites with a star symbol, each beside its text.

API

Scroll horizontally to read every column.

Prop	Type	Description
children	ReactNode	The text.
symbol	SymbolName	Optional catalog symbol.
icon	ReactNode	Optional custom icon.

Related: Quick start, List, Screen.

:::