List Item
ProA structured row component for displaying a single entry within a list. Supports a leading element (avatar, icon, or checkbox), primary and secondary text, metadata, and trailing actions. The building block for settings lists, contact lists, file browsers, and navigation menus.
8 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Simple list item with primary text and optional secondary text. | Use for basic lists like navigation items or simple settings. |
| With Avatar | List item with a leading avatar for user or entity representation. | Use for contact lists, team member lists, or conversation threads. |
| With Action | ||
| Interactive |
Usage Guidelines
Keep primary text concise — one line maximum, truncate with ellipsis if needed.
Mix different leading element types (icons and avatars) in the same list.
Use secondary text for supporting details like descriptions, dates, or metadata.
Show more than two trailing action buttons — use an overflow menu instead.
Maintain consistent leading elements within a list — all avatars or all icons, not mixed.
Nest interactive elements that compete for click targets.
Use the hover state to indicate interactivity.
Code
Design Tokens
Accessibility
- Use role="listbox" on the container and role="option" on each item for selection lists.
- For navigation lists, use <nav> with <ul>/<li> and <a> elements instead.
- Selected items must have aria-selected="true".
- Disabled items should use aria-disabled="true" and remove the click handler.
- Trailing action buttons must have individual accessible labels.