Small elements · Hodi SDK

The small elements that go with a row or a title: a chip, a filter, a source's or a household's avatar. Like Hodi's captions and metadata, chips are written in the mono font.

Chip

A small capsule of text, for a short piece of information such as a language, a state or a duration.

import { Chip } from 'hodi:sdk'

<Chip tone="success">Active</Chip>

Props?: optional

childrenReactNode

The chip's text, in a few words.

tone?'success' | 'warning' | 'danger' | 'accent'

The chip's colour: neutral by default, green, yellow, red or in the accent colour.

size?'capsule' | 'row'

The chip's size: capsule by default, row at the end of a settings row.

title?string

What the chip means, shown on hover.

label?string

A fuller name than the text, for screen readers.

FilterChip

A filter in a row of filters. It is a pill, which turns white when chosen.

import { FilterChip } from 'hodi:sdk'

<FilterChip
  selected={filter === 'all'}
  count={12}
  onClick={() => setFilter('all')}
>
  All
</FilterChip>

Props?: optional

selectedboolean

true when the filter is chosen.

childrenReactNode

The filter's text.

onClick?() => void

What a click does, for a filter that changes the page without leaving it.

href?string

The address to open, for a filter that leads to another page.

count?number

The number of items the filter keeps, shown after the text.

icon?LucideIcon

A Lucide icon, shown before the text.

disabled?boolean

The filter is greyed out and can't be chosen.

SourceAvatar

A source's icon, taken from its site, or its initials when the site has none. It is never round: round is kept for people and households.

import { SourceAvatar } from 'hodi:sdk'

<SourceAvatar
  sourceId={article.sourceId}
  sourceName="Le Monde"
  size={44}
/>

Props?: optional

sourceIdstring

The source's id, as an article gives it.

sourceNamestring

The source's name, whose initials the avatar takes when it has no icon.

size?18 | 20 | 22 | 26 | 44

The avatar's size, in px. It is 18 by default.

HouseholdAvatar

A household's photo, or its initial when it has no photo. It is round, like a profile on the Who's in? screen.

import { HouseholdAvatar } from 'hodi:sdk'

<HouseholdAvatar
  name="Smith"
  photo={household.photo}
  size={64}
/>

Props?: optional

namestring

The household's name, whose initial the avatar takes when it has no photo.

photostring | null

The address of the household's photo (household.photo), or null.

sizenumber

The avatar's width, in px, ring included.

preview?string | null

A photo the person just chose but hasn't sent yet. It shows in place of photo.