A single, flexible item primitive that unifies the "start content + label + description + end content" pattern across Astryx. Use it wherever you need a structured row: dropdown menus, selectors, contact lists, notifications, file browsers, and activity feeds.
ts
| Guidance | Practices |
|---|---|
| Do | Use named slots (startContent, label, description, endContent) for the common layout. These cover the 80% case. |
| Do | Use density="compact" for menus and dense lists, "balanced" for standard rows, and "spacious" for roomier layouts. |
| Do | Set labelLines and descriptionLines to control truncation when content length varies. |
| Do | Use align="start" when start or end content is taller than a single line of text. |
| Don't | Don't nest interactive elements (buttons, links) inside an interactive Item; it creates confusing focus and click targets. |
| Don't | Don't use Item for navigation between views; use proper navigation components instead. |
| Don't | Don't add read/unread or inbox-specific behavior directly; compose a thin wrapper like PreviewItem instead. |
A basic item with a label, supporting description, and end-aligned timestamp. Use this for simple rows that need consistent text alignment and spacing.
Items with leading avatars and icons in the startContent slot. Keep start content small so the row stays compact and easy to scan.
Items with end-aligned metadata and badges. Use the endContent slot for counts, status, timestamps, and other secondary row information.