List Item Component

Phoenix BakerLabel

Hey Olivia, Katherine sent me over the latest doc. I just have a quick question about the...

Lana SteinerActive

You're now connected with Lana. Start a conversation to begin collaborating.

Candice WuOverdue

The deadline for the Q3 report has passed. Please submit your section.

Drew Cano

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" />

Natali CraigLabel

I've reviewed the wireframes and left some comments. Can we schedule a sync?

Orlando DiggsNew

Just pushed the updated API endpoints to staging. Ready for QA when you are.

Andi LaneUrgent

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." />

Kate MorrisonLabel

The user research findings are ready. I've compiled everything into the shared drive.

Koray OkumusFeatured

New component library version is available. Migration guide has been added.

Demi WilkinsonReview

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." />

Olivia RhyeLabel

Read-only activity entry. Useful for feeds, notifications, and audit trails where no action is needed.

Release v2.4.0 deployedShipped

Automated deployment completed at 14:32 UTC. All health checks are passing.

Scheduled maintenance windowNotice

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." />

OR

Phoenix BakerLabel

Hey Olivia, Katherine sent me over the latest doc. I just have a quick question about the...

NC

Natali CraigLabel

I've reviewed the wireframes and left some comments. Can we schedule a sync?

DW

Demi WilkinsonReview

Your access to the production environment expires in 3 days.

OR

Olivia RhyeLabel

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" />

LS

Lana SteinerOnline

You're now connected with Lana. Start a conversation to begin collaborating.

CW

Candice WuAway

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 Title ContentCustom Badge

This list item uses RenderFragment slots for fully custom content rendering.

<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>

JC

Jane Cooper

Q3 budget review — please sign off

2:34 PMHi team, attaching the revised figures from finance. Let me know if anything looks off before...

MR

Mohammed Al-Rashid

Re: Staging deployment is ready for QA

11:42 AMPushed the latest build. All health checks green. Let me know when you've verified the checkout flow and...

PN

Priya Nair

Design critique notes

YesterdayThanks for the walkthrough yesterday. A few small things I noticed on the settings page — nothing urgent.

!

Security Alerts

Unusual sign-in blocked from Lagos

Apr 11We blocked a sign-in attempt to your account. If this was you, confirm your identity within 24 hours.

@* 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>

JD

John Doe · MRN-4821

Cardiology · Room 402-B

Age 54Last visit: Apr 2, 2026 · Attending: Dr. Lim

NEW

AO

Amara Okafor · MRN-4822

ICU · Room 201-A

Age 67Post-op day 2 · BP unstable · Attending: Dr. Chen

CRIT

SR

Sofia Rossi · MRN-4823

Orthopedics · Room 308

Age 42Scheduled discharge: Apr 14 · Physical therapy cleared

KW

Kenji Watanabe · MRN-4824

Oncology · Room 515

Age 58Chemotherapy round 3 of 6 · Next infusion: Apr 15, 09:00

<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>

#ORD-10294

Acme Corporation · 14 items · Priority shipping

$1,284.50

Needs action

#ORD-10293

Globex Inc · 3 items · Standard shipping

$247.00

Shipped

#ORD-10292

Initech · 8 items · Express

$892.10

Disputed

@* 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>

PP

The Pragmatic Programmer

David Thomas, Andrew Hunt

$42.00ISBN 978-0-201-61622-4 · 352 pages · 2nd Edition

NEW

DDI

Designing Data-Intensive Applications

Martin Kleppmann

$58.50ISBN 978-1-449-37332-0 · 616 pages · O'Reilly Media

RF

Refactoring

Martin Fowler

$49.99ISBN 978-0-134-75759-9 · 448 pages · 2nd Edition

<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>

List Item Component

Style: action button

Style: dropdown menu

Style: arrow

Display only (no actions)

With avatar (leading)

Custom content slots

InfoRowItem — inbox-style info-rich rows