Alert Item

beta

The AlertItem component renders a single alert or notification row: a theme-colored left accent, title, relative timestamp, optional unread indicator, metadata line, and optional action link. Rows support full-row navigation via to/onClick while keeping nested action links independently clickable.

AlertItem deliberately ships without a list container. Render items inside any container you already use — a Card, a plain Layout.Vertical, or your own wrapper — and the row handles its own accent and corner rounding based on its position.

Installation

import { AlertItem } from '@harnessio/ui/components'

//...

return (
  <AlertItem theme="info" read timestamp={timestamp} to="/alerts/1">
    <AlertItem.Title>Company All-Hands This Friday</AlertItem.Title>
    <AlertItem.Description>
      Join us at 10:00 PT for the Q3 town hall...
    </AlertItem.Description>
    <AlertItem.Link to="/invite">View invite</AlertItem.Link>
  </AlertItem>
)

To show several alerts, render multiple AlertItems inside any container of your choice.

Anatomy

All parts of the AlertItem can be imported and composed as required:

<AlertItem theme="info" read timestamp={timestamp}>
  <AlertItem.Title />
  <AlertItem.Description />
  <AlertItem.Link />
</AlertItem>

Row (AlertItem) — the container for a single notification. A required theme sets the left accent color (info, success, warning, danger), read controls the read/unread styling (unread rows get a tinted background and a dot), and timestamp renders a relative time on the right.
Title — the row’s primary line; also supplies the accessible name for full-row navigation.
Description (optional) — a secondary line of supporting detail, truncated to fit the row.
Link (optional) — an action link below the text that stays clickable on its own, even when the whole row is navigable.

Make the whole row navigate by passing to (renders a link overlay) or onClick (renders a button overlay). AlertItem ships without a list wrapper — place rows inside whatever container you’re already using.

Best practices

Use AlertItem for a feed of notifications or alerts — things that happened and may need follow-up — rather than for inline, in-context messaging (use Alert for that).
Match the theme to the severity: danger for failures and outages, warning for risks, success for completions, info for neutral updates.
Give every row a clear Title; it doubles as the accessible name when the row is navigable.
Use to/onClick to make the whole row navigate to the relevant detail, and reserve AlertItem.Link for a distinct secondary action.

Don’t

Don’t overload a row with multiple action links; keep one clear next step.
Don’t rely on the theme accent color alone to convey severity — the title text should make the meaning clear too.
Don’t use AlertItem for transient, auto-dismissing feedback; reach for a toast instead.

Content

Write titles as short, specific summaries of what happened — “Pipeline failed”, “New feature release”.
Keep descriptions to one line of essential detail; they truncate, so front-load the important words.
Use sentence case for titles, descriptions, and link labels; label links with a verb (“View status page”, “View invite”).

Accessibility

Full-row navigation is backed by a real interactive element — a Link when you pass to, or a <button> when you pass onClick — so the row is reachable and operable by keyboard, not just the mouse.

Keyboard

The row overlay is a genuine tab stop: a link activates with Enter, a button with Enter and Space.
A nested AlertItem.Link is a separate tab stop layered above the overlay, so people can reach the secondary action independently of the row.
Modifier clicks (Cmd/Ctrl/Shift + click) on a row with onClick are left to the browser, so a row backed by a link still opens in a new tab as expected.

Labeling

The row overlay takes its accessible name from the AlertItem.Title text automatically; override it with linkProps.aria-label when the title alone isn’t descriptive enough.
The relative timestamp comes from TimeAgoCard and sits above the overlay so it can expose its own full date on hover/focus.

Focus & states

The row link/button and any nested link each show the standard focus ring (:focus-visible) via the --cn-focus token.
Unread rows are distinguished by a tinted background and an indicator dot in addition to the theme accent.

Known limitations

The read/unread dot is a plain <span>. It carries an aria-label of “Read”/“Unread”, but because it’s a span with no role, screen readers may not announce that state reliably — don’t rely on it as the only signal that a row is unread.
A row isn’t a live region. Unlike Alert (which uses role="alert"), an AlertItem added to a feed isn’t announced automatically; if new alerts arrive dynamically, manage focus or an announcement yourself.
No list semantics. Because AlertItem ships without a container, a stack of rows has no role="list"/listitem grouping. If the grouping matters, add your own list roles on the wrapper.

Properties

`AlertItem`

Renders a single alert row with a theme accent, read/unread styling, and optional row navigation.

Prop	Required	Default	Type
theme	true		'info' \| 'success' \| 'warning' \| 'danger'
read	false	true	boolean
timestamp	false		string \| number \| null
to	false		string
linkProps	false		Omit<LinkProps, 'to'>
onClick	false		() => void
children	true		ReactNode

`Title`

Primary heading shown in the item header row.

Prop	Required	Default	Type
children	true		ReactNode
className	false		string

`Description`

Truncated description shown on the metadata line.

Prop	Required	Default	Type
children	true		ReactNode
className	false		string

`Link`

Optional action link rendered below the metadata line. Uses Alert link styling.

Prop	Required	Default	Type
to	true		string
children	true		ReactNode
external	false	false	boolean