Rows

Display a title, subtitle and optional image.

Example

import { Row, Screen } from "ink";
import artwork from "../assets/wallsocket.jpg";

export default function Albums() {
  return <Screen title="Albums">
    <Row
      image={artwork}
      title="Wallsocket"
      subtitle="underscores"
      href="/album"
    />
  </Screen>;
}

Create app/album.tsx for the destination. For actions, use onPress instead of href, or onLongPress for a long press.

An album row with artwork, Wallsocket and underscores.

Subtitle icons

Use a Material icon or custom SVG beside the subtitle.

import { Row } from "ink";
import { download } from "ink/icons";
import spotify from "./assets/spotify.svg";

<Row title="Wallsocket" subtitle="underscores" subtitleIcon={spotify} />
<Row title="Downloaded album" subtitle="Available offline" subtitleIcon={download} />

Album rows with Spotify and download icons beside their subtitles.

Long titles

Titles wrap by default. Set titleMaxLines=1 to truncate them. Subtitles always truncate to one line.

<Row
  title="A long title that stays on one line"
  titleMaxLines={1}
  subtitle="A longer subtitle that truncates rather than wrapping onto a second line."
/>

The same long title wrapping on the first row and truncated on the second.

Text only

Omit image or subtitle when not needed.

<Row title="Alex" subtitle="See you at the station." />
<Row title="Music club" />

Rows without images, including a title that wraps.

Title icons

Use titleIcon for a status inline with the title. Wrapped lines use the full row width.

import { checkCircleFilled } from "ink/icons";

<Row title="A long episode title that wraps onto another line"
  titleIcon={checkCircleFilled} subtitle="Finished" />

Titles use Ink’s standard size of 26. Numbers in subtitles align automatically.