Item
Generic row used as the base of many interfaces.
Installation
npx axiom add itempnpm dlx axiom add itemyarn dlx axiom add itembun x axiom add itemColors come from item.default.{default,pressed,selected}.{background,divider} in the component tokens.
Structure
An item has three areas:
┌─────────┬──────────────────────────┬──────────┐
│ leading │ content │ trailing │
└─────────┴──────────────────────────┴──────────┘Usage
import { Item } from "@/components/ui/item";
<Item onPress={openContact}>
<Item.Leading>
<Avatar source={{ uri: user.photo }} fallback="JC" />
</Item.Leading>
<Item.Content>
<Item.Title>Jane Cooper</Item.Title>
<Item.Description>Product designer</Item.Description>
</Item.Content>
<Item.Trailing>
<Icon name="chevron-right" />
</Item.Trailing>
</Item>;Props
Item
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Item.Leading, Item.Content and Item.Trailing, in that order. All three are optional. |
onPress | () => void | — | Makes the whole row pressable through Tappable, with a pressed background. Without it the row is static. |
onLongPress | () => void | — | Called on long press. Pair it with a Menu for row actions. |
size | 'sm' | 'md' | 'lg' | 'md' | Minimum height: 44, 52 or 64pt. Content can make the row taller. |
selected | boolean | false | Tints the background with feedback.infoSubtle and sets accessibilityState.selected. |
disabled | boolean | false | Blocks presses and dims title, description and icons. |
divider | boolean | 'inset' | false | Hairline under the row. 'inset' starts it after the leading area, like iOS lists. |
align | 'center' | 'start' | 'center' | Vertical alignment of leading and trailing, start for rows with multi-line content. |
asChild | boolean | false | Merges the item into its child, for example a router Link. See Slot. |
accessibilityLabel | string | — | Replaces the text screen readers read from the row’s content. |
accessibilityRole | AccessibilityRole | 'button' with onPress | Role announced by screen readers, such as link. |
accessibilityState | AccessibilityState | — | Merged with selected and disabled. |
style | StyleProp<ViewStyle> | — | Extra styles for the row. |
Item.Leading, Item.Trailing
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | An Avatar, an Icon, a Checkbox, a Switch, a value, a Badge… |
style | StyleProp<ViewStyle> | — | Extra styles for the area. |
Item.Content, Item.Title, Item.Description
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Item.Title and Item.Description inside Item.Content, or anything custom. |
numberOfLines | number | 1 | On Title and Description: lines before truncation. |
Use cases
Navigation row
A chevron on the right says that the row opens another screen.
<Item onPress={() => router.push("/account/payments")} divider="inset">
<Item.Leading>
<IconTile icon="card" color="green" />
</Item.Leading>
<Item.Content>
<Item.Title>Payment methods</Item.Title>
</Item.Content>
<Item.Trailing>
<Text color="muted">2</Text>
<Icon name="chevron-right" color="subtle" />
</Item.Trailing>
</Item>Row with an action
The trailing area holds a button that does its own thing. The row itself stays pressable.
<Item onPress={() => openProfile(user.id)}>
<Item.Leading>
<Avatar source={user.photo} fallback={user.initials} />
</Item.Leading>
<Item.Content>
<Item.Title>{user.name}</Item.Title>
<Item.Description>{user.mutuals} mutual friends</Item.Description>
</Item.Content>
<Item.Trailing>
<Button
size="sm"
variant={user.following ? "outline" : "solid"}
onPress={() => toggleFollow(user.id)}
>
{user.following ? "Following" : "Follow"}
</Button>
</Item.Trailing>
</Item>Multi-line content
align="start" keeps the avatar at the top when the description wraps.
<Item align="start">
<Item.Leading><Avatar … /></Item.Leading>
<Item.Content>
<Item.Title numberOfLines={2}>…</Item.Title>
<Item.Description numberOfLines={3}>…</Item.Description>
</Item.Content>
</Item>