ConversationItem

Stable
WCAG 2.2 evidence
RTL

One conversation in a list: avatar, name, time, the last message and an unread count. Built on React Aria Link: with href it is a native <a> (client-side routing through RouterProvider), without it a focusable link that calls onPress. Enter activates it, the focus ring is drawn inside the row, and the whole 60 px row is the target (WCAG 2.1.1, 2.4.7, 2.5.8). The current conversation carries aria-current (1.3.1, 4.1.2). Its accessible name is the row's text in reading order: name, muted, time, preview and the unread count as words ("2 unread messages"), so nothing depends on colour or the badge shape (1.1.1, 1.4.1, 2.4.4). Consumer duties: render the items in a list (<ul>/<li>) inside a labelled nav or region ("Conversations"); a translated unreadLabel and mutedLabel; links to real conversation URLs where possible.

import { ConversationItem } from "@nexera-ui/react";

Loading example…

4
examples: 31
props: 3
live controls: 1
platform: 10
WCAG criteria: 1
block uses it

Try every prop. Copy the code.

Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.

Loading…

isMutedfalse

isCurrentfalse

isDisabledfalse

Generated code

import { ConversationItem } from "@nexera-ui/react";

<ConversationItem />

Examples 3

The same examples as Storybook, rendered live. Open Code to copy one.

List

A conversation list in a labelled nav: the current one carries aria-current; press another to switch.

Loading example…

app.tsx

import { useState } from "react";
import { Avatar, ConversationItem, Presence } from "@nexera-ui/react";

export function List() {
  const [current, setCurrent] = useState("sara");
  const people = [
    {
      id: "sara",
      name: "Sara Malik",
      initials: "SM",
      preview: "Approved. Enjoy the long weekend.",
      time: "10:31",
    },
    {
      id: "bilal",
      name: "Bilal Ahmed",
      initials: "BA",
      preview: "Can you check my payslip?",
      time: "09:12",
      unread: 2,
    },
    {
      id: "people",
      name: "#people-ops",
      initials: "P",
      preview: "Hina: new leave policy is live",
      time: "Mon",
      isMuted: true,
    },
    { id: "hina", name: "Hina Raza", initials: "HR", preview: "Thanks!", time: "Sun" },
  ];
  return (
    <nav aria-label="Conversations">
      <ul className="m-0 flex list-none flex-col gap-1 p-0">
        {people.map((person) => (
          <li key={person.id}>
            <ConversationItem
              name={person.name}
              preview={person.preview}
              time={person.time}
              {...(person.unread === undefined ? {} : { unread: person.unread })}
              isMuted={person.isMuted ?? false}
              isCurrent={current === person.id}
              {...(current === person.id ? { "aria-current": "true" as const } : {})}
              onPress={() => {
                setCurrent(person.id);
              }}
              avatar={
                <Avatar
                  size="lg"
                  initials={person.initials}
                  isDecorative
                  {...(person.id === "bilal" ? { presence: <Presence status="online" /> } : {})}
                />
              }
            />
          </li>
        ))}
      </ul>
    </nav>
  );
}

Long content

Long names and previews end with an ellipsis; the time and the count keep their place.

Loading example…

app.tsx

import { Avatar, ConversationItem } from "@nexera-ui/react";

<ConversationItem
  href="#sara"
  name="Sara Malik-Rahman, Head of People Operations"
  preview="Approved. Enjoy the long weekend, and remember to log the leave in the HR portal."
  time="10:31"
  avatar={<Avatar size="lg" initials="SM" isDecorative />}
  unread="99+"
/>;

Right to left

Right-to-left: the avatar is on the right and the time on the left.

Loading example…

app.tsx

import { Avatar, ConversationItem } from "@nexera-ui/react";

<ConversationItem
  href="#sara"
  name="سارة مالك"
  preview="تمت الموافقة. استمتعي بالعطلة."
  time="10:31"
  avatar={<Avatar size="lg" initials="SM" isDecorative />}
  unread={2}
/>;

Props 31

Press "Try it" on a card to load that prop into the playground.

name*Nexera

string

Who the conversation is with. One line with an ellipsis; the full name is part of the link's accessible name.

previewNexera

ReactNode

Last message. One line with an ellipsis; the full text is part of the accessible name and shown in the conversation.

timeNexera

ReactNode

Time of the last message, formatted for the reader's locale.

dateTimeNexera

string

Machine-readable time of time (ISO 8601). When set, the time is a <time> element.

unreadNexera

string | number

Unread messages. A number is shown in the locale's digits; a string (for example "99+") as given. Shows the count badge and the unread styling (bold preview, brand time). Not shown when omitted or 0.

unreadLabelNexera

(unread: string) => string

Text alternative of the unread badge, from the displayed count; it replaces the bare number for screen readers (WCAG 1.1.1, 1.4.1). Translate it, with your locale's plural rules.

isMutedNexera

boolean

Notifications are muted: the name turns text/secondary and Icon/LuVolumeX follows it, with the text alternative mutedLabel.

mutedLabelNexera

string

Text alternative of the muted icon. Translate it.

isCurrentNexera

boolean

This is the open conversation: nav/active-bg fill and aria-current="page" (WCAG 1.3.1, 4.1.2). Pass aria-current="true" instead when the list does not change the page URL.

avatarNexera

ReactNode

Avatar: pass <Avatar size="lg" isDecorative... /> (the name is read already). A presence inside it that is not decorative adds its status ("Online") to the link's name.

classNameNexera

string

Extra classes, merged last so they win over the defaults.

styleNexera

CSSProperties

Inline style.

isDisabledReact Aria

boolean

Whether the link is disabled.

onPressReact Aria

(e: PressEvent) => void

Handler that is called when the press is released over the target.

onPressStartReact Aria

(e: PressEvent) => void

Handler that is called when a press interaction starts.

onPressEndReact Aria

(e: PressEvent) => void

Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.

onPressChangeReact Aria

(isPressed: boolean) => void

Handler that is called when the press state changes.

onPressUpReact Aria

(e: PressEvent) => void

Handler that is called when a press is released over the target, regardless of whether it started on the target or not.

autoFocusReact Aria

boolean

Whether the element should receive focus on render.

hrefReact Aria

string

A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).

hrefLangReact Aria

string

Hints at the human language of the linked URL. See[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang).

targetReact Aria

HTMLAttributeAnchorTarget

The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).

relReact Aria

string

The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).

downloadReact Aria

string | boolean

Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).

pingReact Aria

string

A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).

referrerPolicyReact Aria

"" | "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url"

How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).

routerOptionsReact Aria

never

Options for the configured client side router.

aria-labelReact Aria

string

Defines a string value that labels the current element.

aria-labelledbyReact Aria

string

Identifies the element (or elements) that labels the current element.

aria-describedbyReact Aria

string

Identifies the element (or elements) that describes the object.

idReact Aria

string

The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).

* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.

Accessible by default.

Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.

WCAG 2.2 evidence

8 direct · 2 supporting

1.1.1Non-text ContentLevel A · tested directly
1.3.1Info and RelationshipsLevel A · tested directly
1.4.1Use of ColorLevel A · tested directly
1.4.10ReflowLevel AA · supporting test
2.1.1KeyboardLevel A · tested directly
2.4.3Focus OrderLevel A · tested directly
2.4.4Link Purpose (In Context)Level A · tested directly
2.4.7Focus VisibleLevel AA · tested directly
2.5.8Target Size (Minimum)Level AA · supporting test
4.1.2Name, Role, ValueLevel A · tested directly

Fits any width.

Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.

0 px · drag the corner

Styling hooks

Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.

data-current
data-disabled
data-hovered
data-pressed

Usage

<ConversationItem className="data-current:opacity-90 shadow-sm" />

Used in blocks

InboxMessaging and collaboration

Theme studio

ConversationItem

Try every prop. Copy the code.

Examples 3

List

Long content

Right to left

Props 31

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components