List Item Component
Style: action button
Row with inline edit/delete/cancel buttons
Hey Olivia, Katherine sent me over the latest doc. I just have a quick question about the...
You're now connected with Lana. Start a conversation to begin collaborating.
The deadline for the Q3 report has passed. Please submit your section.
Updated the design tokens file with the latest color palette.
@* Status values: default, primary, warning *@
<ListItem Style="button"
Status="default"
Title="Phoenix Baker"
BadgeText="Label"
Description="Hey Olivia, Katherine sent me over the latest doc..."
OnDelete="HandleDelete"
OnCancel="HandleCancel"
OnEdit="HandleEdit" />Style: dropdown menu
Row with trailing menu button
I've reviewed the wireframes and left some comments. Can we schedule a sync?
Just pushed the updated API endpoints to staging. Ready for QA when you are.
There's a critical issue with the payment gateway integration.
<ListItem Style="dropdown"
Status="primary"
Title="Orlando Diggs"
BadgeText="New"
Description="Just pushed the updated API endpoints to staging." />Style: arrow
Row with chevron-right affordance
The user research findings are ready. I've compiled everything into the shared drive.
New component library version is available. Migration guide has been added.
Your access to the production environment expires in 3 days.
<ListItem Style="arrow"
Status="default"
Title="Kate Morrison"
BadgeText="Label"
Description="The user research findings are ready." />Display only (no actions)
Row with ShowActions=false — title, badge, and description fill the full width
Read-only activity entry. Useful for feeds, notifications, and audit trails where no action is needed.
Automated deployment completed at 14:32 UTC. All health checks are passing.
Database will be read-only from 02:00–02:30 UTC for index rebuild.
@* ShowActions="false" hides the entire action area *@
<ListItem Status="default"
ShowActions="false"
Title="Olivia Rhye"
BadgeText="Label"
Description="Read-only activity entry. Useful for feeds and audit trails." />With avatar (leading)
ShowAvatar=true adds a 48px avatar on the left; the row vertically centers to match
Hey Olivia, Katherine sent me over the latest doc. I just have a quick question about the...
I've reviewed the wireframes and left some comments. Can we schedule a sync?
Your access to the production environment expires in 3 days.
Read-only activity entry with a leading avatar.
@* ShowAvatar="true" adds a 48px leading avatar and centers the row vertically *@
<ListItem Style="button"
Status="primary"
Title="Phoenix Baker"
BadgeText="Label"
Description="Hey Olivia, Katherine sent me over the latest doc..."
ShowAvatar="true"
AvatarInitials="OR"
OnDelete="HandleDelete"
OnCancel="HandleCancel"
OnEdit="HandleEdit" />
@* Works across all Style variants — button, dropdown, arrow, and ShowActions=false *@
<ListItem Style="dropdown"
Title="Natali Craig"
BadgeText="Label"
Description="..."
ShowAvatar="true"
AvatarInitials="NC" />AvatarContent override — render a custom Avatar (e.g., with status dot or image)
You're now connected with Lana. Start a conversation to begin collaborating.
Last active 2 hours ago. Will respond when back online.
@* AvatarContent fully replaces the built-in <Avatar />.
Use this when you need a status dot, a specific color, or a custom image. *@
<ListItem Style="button" Status="primary"
Title="Lana Steiner" BadgeText="Online"
Description="..."
ShowAvatar="true"
OnDelete="HandleDelete" OnCancel="HandleCancel" OnEdit="HandleEdit">
<AvatarContent>
<Avatar Size="lg" Color="brand" Initials="LS"
ShowStatus="true" StatusColor="success" />
</AvatarContent>
</ListItem>Custom content slots
TitleContent, BadgeContent, DescriptionContent, Actions
<ListItem Status="primary">
<TitleContent>
<span>Custom <strong>Title</strong> Content</span>
</TitleContent>
<BadgeContent>
<Badge Color="brand" Size="sm" Text="Custom Badge" />
</BadgeContent>
<DescriptionContent>
<span>This list item uses <strong>RenderFragment</strong> slots.</span>
</DescriptionContent>
<Actions>
<Button Variant="secondary" Size="sm" Text="View" />
<Button Variant="primary" Size="sm" Text="Approve" />
</Actions>
</ListItem>InfoRowItem — inbox-style info-rich rows
Email inbox (Outlook-style) — avatar→checkbox hover swap, emphasis=info for unread
@* Emphasis: none | info | success | warning | critical *@
<div class="info-row-list">
<InfoRowItem Primary="Jane Cooper"
Secondary="Q3 budget review — please sign off"
Tertiary="Hi team, attaching the revised figures..."
Meta="2:34 PM"
Emphasis="info"
HoverCheckbox="true"
IsChecked="@isChecked"
IsCheckedChanged="@((bool v) => isChecked = v)">
<Leading><Avatar Size="md" Initials="JC" /></Leading>
<TrailingIcons>
<svg>...</svg> @* paperclip *@
<svg>...</svg> @* flag *@
</TrailingIcons>
</InfoRowItem>
</div>Patient list — emphasis=success for new admission, =critical for urgent
<InfoRowItem Primary="John Doe · MRN-4821"
Secondary="Cardiology · Room 402-B"
Tertiary="Last visit: Apr 2 · Attending: Dr. Lim"
Meta="Age 54"
Emphasis="success">
<Leading><Avatar Size="md" Color="success" Initials="JD" /></Leading>
<TrailingIcons><span class="pill">NEW</span></TrailingIcons>
</InfoRowItem>Order list — compact density, status in meta, warning emphasis for disputes
@* Compact="true" hides the tertiary line and reduces row height *@
<InfoRowItem Primary="#ORD-10294"
Secondary="Acme Corporation · 14 items · Priority"
Meta="$1,284.50"
Emphasis="warning"
Compact="true">
<Leading>...</Leading>
<TrailingIcons>Needs action</TrailingIcons>
</InfoRowItem>Book catalog — thumbnail leading, ISBN tertiary, price meta
<InfoRowItem Primary="The Pragmatic Programmer"
Secondary="David Thomas, Andrew Hunt"
Tertiary="ISBN 978-0-201-61622-4 · 352 pages"
Meta="$42.00"
Emphasis="success">
<Leading>
<div class="book-thumb">PP</div>
</Leading>
<TrailingIcons><span class="pill">NEW</span></TrailingIcons>
</InfoRowItem>