Compositions

Inbox

A two-pane layout (list left, focused message right) for any "list + detail" surface — inboxes, notification centers, comment threads, audit logs. The chrome is universal: tab strip → toolbar → optional bulk-action bar → two-pane body.

Overview

Inbox is a composition, not a single component. It assembles a tab strip (Tabs), a toolbar with persistent select-all, a message card list, a detail pane, and an optional bulk-action bar. The bulk bar replaces the toolbar's right cluster when rows are selected — it never floats over.

Use cases

  • Inbox / notifications. The canonical example — workflow events, mentions, approvals.
  • Comment threads. Same chrome on a list of comments + the focused thread on the right.
  • Audit logs. Pair Dense rows with the same two-pane layout when each event has details to drill into.
  • Approvals queues. List of pending items + the focused request body + an action footer.

Anatomy

PartClassRole
Tab strip.ib-tabsFilters by status (All · Unread · Mentions). Count pills inside each tab.
Toolbar.ib-toolbarSelect-all on the left, search · sort · new on the right.
Bulk action bar.ib-bulkbarAppears only when rows are selected. Replaces the toolbar's right cluster.
Message card.ib-cardList row — avatar + title + preview + timestamp + unread dot.
Detail pane.ib-detailRight side. Empty state explains "Select a message". Full body + reply when populated.
Bell trigger.ib-bell-triggerThe entry point. Bell icon in the global header opens a 5-card preview dropdown.

Best practices

  • Persistent select-all. The select-all stays in the toolbar at all times — not just when items are already selected. It always shows a chevron menu (All / Unread / Read / Starred).
  • Bulk bar replaces, never floats. When selections exist, the bulk bar takes over the toolbar's right cluster. Never have both visible at once.
  • Read/unread is the primary state. Bold weight + unread dot. Other states (starred, mentioned) ride on top of read/unread, not replacing it.
  • Empty detail pane is mandatory. Never show blank. Render "Select a message" with a contextual hint about what selecting will do.

Composition

Inbox composes from: Tabs (status filters), Buttons (toolbar actions), Badges (mention/priority chips on cards), Dropdowns (select-all menu, bell preview).