# List Row

> Data in Twentyfirst UI.

Component · Data · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/ListRow/)

## Example

```tsx
import { ListRow } from "@twentyfirstmedia/pro";

export default function Preview() {
  return (
    <div
      className="tf-list"
      style={{
        maxWidth: 380,
      }}
    >
      <ListRow
        avatar="Jonah Petit"
        title="Jonah Petit"
        subtitle="Can we move the review to Thursday?"
        meta="09:12"
        unread
        active
      />
      <ListRow
        avatar="Sun Lee"
        title="Sun Lee"
        subtitle="Payout file for March is attached"
        meta="Yesterday"
      />
      <ListRow
        icon="bell"
        tint="butter"
        title="Billing"
        subtitle="Card ending 4417 expires soon"
        meta="Mon"
      />
    </div>
  );
}
```

## Props

### ListRow

| Prop | Type | Notes |
| --- | --- | --- |
| `avatar?` | `string` |  |
| `icon?` | `IconName` |  |
| `tint?` | `Tint \| "plain"` |  |
| `leading?` | `ReactNode` |  |
| `title` | `ReactNode` | Required |
| `subtitle?` | `ReactNode` |  |
| `meta?` | `ReactNode` |  |
| `trailing?` | `ReactNode` |  |
| `unread?` | `boolean` |  |
| `active?` | `boolean` |  |
| `onClick?` | `() => void` |  |
| `href?` | `string` | Makes the row a link (with `linkAs` for a router's link). |
| `linkAs?` | `ElementType` |  |
| `actions?` | `ReactNode` | Buttons of the row's own (rename, remove …), outside the clickable area so nothing interactive is nested. Without `onClick` and `href` the row is not interactive at all. |
| `titleLines?` | `number` | Lines the title may take before it ends in an ellipsis (default: it wraps freely). |
| `subtitleLines?` | `number` | Lines the subtitle may take (default 1); badges and facts wrap within them. |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |