{
  "title": "Item",
  "description": "List row primitive with optional leading, title, description, trailing, and chevron.",
  "url": "/docs/components/item",
  "since": "0.8.0",
  "tags": [
    "display",
    "list"
  ],
  "platform": "both",
  "source": "---\ntitle: Item\ndescription: List row primitive with optional leading, title, description, trailing, and chevron.\nsince: 0.8.0\ntags: [display, list]\nplatform: both\ncategory: display\n---\n\nimport { BundleSize } from '@/components/bundle-size';\nimport { Preview } from '@/components/preview';\nimport { PropsTable } from '@/components/props-table';\n\n<BundleSize component=\"Item\" />\n\n## At a glance\n\n- A generic horizontal row for settings lists, menus, and data rows.\n- Four horizontal zones: `leading | title + description | trailing | chevron`.\n- All zones except `title` are optional.\n- Becomes a tappable `Pressable` when `onPress` is provided.\n\n## Preview\n\n<Preview name=\"item-basic\" />\n\n## Usage\n\n```tsx\nimport { Item } from '@nori-ui/core';\n\n// Navigation row with chevron\n<Item\n  title=\"Profile\"\n  description=\"Manage your account settings\"\n  chevron\n  onPress={() => navigate('/profile')}\n/>\n\n// With leading icon and trailing badge\n<Item\n  leading={<UserIcon size={24} />}\n  title=\"Manuel Bieh\"\n  description=\"manuel@example.com\"\n  trailing={<Badge tone=\"primary\">Admin</Badge>}\n  chevron\n  onPress={() => navigate('/users/1')}\n/>\n\n// Non-tappable informational row\n<Item\n  title=\"Version\"\n  trailing={<Text>1.0.0</Text>}\n/>\n```\n\n## `chevron`\n\nSet `chevron={true}` (or just `chevron` as a boolean shorthand) to render a\nright-pointing arrow at the trailing edge — the standard affordance for\nnavigation rows that drill deeper.\n\n## `disabled`\n\nSet `disabled={true}` to prevent interaction. The row renders at reduced opacity\nand `onPress` is suppressed. Useful for locked entries in a settings list.\n\n## Props\n\n<PropsTable component=\"Item\" />\n"
}