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.

Usage

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 component can be imported and composed as required.

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

API Reference

`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