Skip to content
DataBrowse data components
ComponentsDataNew in 0.2

Inbox

Notification center with unread tinting, item meta, and overflow scroll.

Live preview

Notifications3 unread
  • AL

    Atlas approved your review

    2 min ago
    New
  • MK

    SSO certificate rotates in 7 days

    1 hr ago
  • RS

    3 teammates joined

    Yesterday

Usage

Adapters:React stableVue stable
index.html
<div class="lm-inbox" role="log" aria-live="polite">
  <ul class="lm-inbox-list">…</ul>
</div>

CSS classes (4)

ClassDescription
lm-inboxOuter card
lm-inbox-headerTitle row
lm-inbox-listScroll region
lm-inbox-itemEach notification

React props (1)

PropTypeDefaultDescription
itemsNotification[]——

Accessibility

  • Wrap in role='log' or aria-live='polite'.
  • Mark unread with aria-label.

Spotted something wrong? Edit this entry on GitHub.