MediaObject

Molecule
Image or icon paired with text content. The fundamental building block for list items, notifications, and comment layouts.
src/molecules/media-objects
View in Surfaces & data

Playground

Every control sets a real prop of MediaObjectProps. The JSX below updates as you go.
RC
Grace Hopper
Compilers · Berlin
Reviewed the latest pull request and left comments on the auth middleware changes.
2h ago
Props
title
string
description
string
meta
string
Alignment
pick one
reversed
boolean
bordered
boolean
compact
boolean
JSX · MediaObjectProps
<MediaObject
title="Grace Hopper"
description="Compilers · Berlin"
meta="2h ago"
center
/>

Variants

5 examples from src/molecules/media-objects/media-objects.md, each rendered live from its own JSX.
RC
Rachel Chen
rachel.chen@example.com
Compact
<MediaObject compact avatar="RC" title="Rachel Chen" description="rachel.chen@example.com" />
RC
Rachel Chen
Commented on the deploy pipeline.
1h
Bare row with meta
<MediaObject avatar="RC" title="Rachel Chen" description="Commented on the deploy pipeline." meta="1h" />
Security first
End-to-end encryption with automatic key rotation.
Icon
<MediaObject bordered title="Security first" description="End-to-end encryption with automatic key rotation." icon={<Icon shield primary size={18} />} />
Ada Lovelace
ada@example.com
Action
The trailing action slot takes any control; the button's onPress is yours to wire.
<MediaObject bordered src="/ada-lovelace.jpg" title="Ada Lovelace" description="ada@example.com" action={<Button outline small>Invite</Button>} />
Tappable
Passing onPress makes the whole row a single tap target; wire it to your own handler and every tap runs it.
<MediaObject onPress={() => {}} bordered avatar="RC" title="Rachel Chen" description="Engineering Lead" />

Anatomy

RC
Grace Hopper
Compilers · Berlin
Reviewed the latest pull request and left comments on the auth middleware changes.
2h ago
1
Media
2
Title
3
Description
4
Meta
5
Action
Dimmed parts appear only in some states or variants.

Props

19 props on MediaObjectProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
10 props
title
string
–
Primary line: the bold heading (e.g. a person's name).
description
string
–
Secondary line: muted supporting text under the title (e.g. a role or email).
body
ReactNode
–
Optional longer body paragraph rendered below the description.
meta
string
–
Trailing metadata text pinned to the right (e.g. "2h ago", "admin").
avatar
string
–
Initials for the leading avatar (e.g. "RC"); rendered as <Avatar>{avatar}</Avatar>.
src
string | number
–
Photo for the leading avatar (a URI string or a bundled require(...) image); takes precedence over initials.
icon
ReactNode
–
A leading icon glyph rendered in a tinted square box (stands in for an SVG icon).
bareIcon
boolean
false
Draw the icon node as it is, with no tinted box around it: a lead that is its own mark, such as a numbered <Badge step> (the Layout page's "try in this order" list).
action
ReactNode
–
A trailing action node (e.g. a <Button>), pinned to the right edge.
onPress
() => void
–
Make the whole row a tappable target (navigate to a detail, select a row). When set, the row renders as a Pressable with a button role and a pressed affordance, so you never hand-roll a Pressable for a tappable media row.
Alignment
pick one
2 props
center
boolean
false
start
boolean
false
Direction
pick one
2 props
reversed
boolean
false
leading
boolean
false
Surface
1 prop
bordered
boolean
false
Surface.
Density
1 prop
compact
boolean
false
Menu-header density: a smaller leading avatar (28px) and title/description type stepped down one size, for a compact identity row (e.g. a menu or dropdown header). Backward-compatible; without it the row keeps its default 40px avatar and type.
Layout
3 props
truncate
boolean
false
Layout.
testID
string
–
E2E hook forwarded to the root element.
style
LayoutStyle
–
Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.

Accessibility and keyboard

Keyboard
Not focusable. It has no interaction of its own and takes the semantics of what it wraps.
Semantics
Roles
button

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
Ada Lovelace
ada@example.com
Web
control 10 · field 10 · card 16 · Instrument Sans
Ada Lovelace
ada@example.com
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
Ada Lovelace
ada@example.com
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

<MediaObject
avatar="RC"
title="Rachel Chen"
description="Engineering Lead"
body="Reviewed the latest pull request and left comments on the auth middleware changes."
bordered
/>

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--fd
--fm
--ft
--tx3

Related components