ContactRow

Usage

ContactRow presents a contact or search hit in phone-book and directory lists. Each row is 32px tall, full width, with a leading icon, optional divider, primary label, and optional trailing value cluster.

When to use

Scrollable search results where each hit opens or selects a contact.
Single-select lists that need a selected wash on the active row.
Rows that pair a glyph with a name and a phone number or extension.

When not to use

Compact grid tiles in a phone-book category; use ContactChip.
Generic navigation rows without a trailing value; consider Item or Tree.
Removable filter chips; use Token.

Interaction

Pass onClick to render a native button. Omit it only when a parent owns activation. Use selected for the active row and disabled for unavailable entries.

Value and prefix

value holds secondary text aligned to the inline end. valuePrefix renders in emphasis before the muted value, for short labels such as an extension marker.

ContactChip / Accessibility

ContactRow / API and Development

On this page

ContactRow

Usage

When to use

Scrollable search results where each hit opens or selects a contact.
Single-select lists that need a selected wash on the active row.
Rows that pair a glyph with a name and a phone number or extension.

When not to use

Compact grid tiles in a phone-book category; use ContactChip.
Generic navigation rows without a trailing value; consider Item or Tree.
Removable filter chips; use Token.

Interaction

Pass onClick to render a native button. Omit it only when a parent owns activation. Use selected for the active row and disabled for unavailable entries.

Value and prefix

value holds secondary text aligned to the inline end. valuePrefix renders in emphasis before the muted value, for short labels such as an extension marker.

ContactChip / Accessibility

ContactRow / API and Development

On this page