InboxItem

An InboxItem is one thing that happened elsewhere and that the person should see: someone mentioned them, an agent waits for their approval, work was handed to them. An unread item has a bold title and a pink attention dot; an action it needs sits in the row. It is the row of ActivityInbox.

PageLightDarkBoth

When to use

Which message goes where is in Choosing a component.

Anatomy

• InboxItem: the row. Required.
• InboxItemTrigger: an invisible button that covers the whole row and opens the item. Required.
• InboxItemSelection: a Checkbox for selecting several items. Optional.
• InboxItemContent: the text column. Required.
  • InboxItemContext: where it happened: a channel, a task, a computer.
  • InboxItemHeading with InboxItemTitle: what happened, with an optional 14px icon before it.
  • InboxItemSubtitle: a second line of context, such as "Thread in #launch-week".
  • InboxItemBody or InboxItemMessage: the excerpt, starting with InboxItemSender.
  • InboxItemMetadata: chips for the task, replies and mentions.
• InboxItemTrailing: InboxItemTimestamp, InboxItemActions and, while unread, the attention dot.

States

PageLightDarkBoth

Behavior

• The trigger covers the whole row. Buttons in the row sit above it, and each one can be pressed on its own.
• Divide items with line-hairline, starting at the text.

Content

• Write the context line as where it happened: #launch-week · task #25.
• Write the title as who did what, with a teammate verb: "Martin needs your OK", "Bugen handed off #25" (Writing).
• Keep the excerpt to at most 2 lines.

Accessibility

• The parts render native elements through Base UI's useRender. InboxItemTrigger is a native button; with disabled it gets aria-disabled and ignores clicks.
• Give the trigger an accessible name that names the item: aria-label="Open Martin needs your OK". Set aria-current on the trigger of the open item.
• Name the selection checkbox and every icon-only action: aria-label="Select activity item", aria-label="Mark as done".
• The attention dot is drawn in CSS and isn't announced. Say "unread" in the trigger's name, or add a visually hidden word.

Rules

• Use ink-outline small buttons for actions in the row, never pink: a list can hold several items that wait for the person at once (Button).
• Lead with who, when there is a who: the person's or agent's avatar. A notice from the system has no who; see NotificationCenter.