Item
Simple label-value display primitive.
Quick Preview
Status
Approved
Budget
₦85m
Composition
Use this public composition when building Item:
Item
├── ItemLabel
└── ItemValueUsage
<Item><ItemLabel>Status</ItemLabel><ItemValue>Approved</ItemValue></Item>Examples
Default Item
Use this as the starting point for Item. Keep product data, routing, fetching, and authorization logic in the consuming app.
Status
Approved
Budget
₦85m
Props
| Prop/API | Type | Default | Description |
|---|---|---|---|
render | Base UI render prop | - | Changes rendered element while preserving styles. |
className | string | - | Local layout or spacing overrides. |
| native/root props | React component props | - | Passed through to the underlying root or primitive. |
Accessibility
- Preserve the documented Item composition so labels, triggers, content, and controls remain connected.
- Provide visible labels or accessible names for interactive controls.
- Preserve the component-provided focus, keyboard, disabled, and invalid-state behavior.
- Do not communicate state with color alone; include text, icons, or helper copy.