Action List · Youj

Installation & usage

npm i @youj/react

For an app already set up with npx @youj/cli init, which installs the peers (@youj/core, @youj/motion, motion and Base UI) and wires the provider. New app? Start at Installation.

Use an action list where a screen asks someone to do things: alerts that need a decision, setup steps, renewals coming due, reviews waiting. Each row is an icon tile, a title, one line of detail, an optional chip and the row's own action. For a stream of events that only informs, use a Notification Center; for one record's fields, a Property List.

import { CalendarIcon, ShieldAlertIcon } from '@youj/icons'
import { ActionList, ActionListItem, Button } from '@youj/react'

<ActionList title="Waiting on you" count={9} action={<Button variant="ghost" size="sm">View all</Button>}>
  {alerts.map((alert) => (
    <ActionListItem
      key={alert.id}
      icon={<ShieldAlertIcon />}
      tone="danger"
      title={alert.title}
      detail={alert.detail}
      meta={<><CalendarIcon /> {alert.due}</>}
      action={<Button variant="secondary" size="sm" onClick={() => resolve(alert.id)}>Resolve</Button>}
    />
  ))}
</ActionList>

tone colors the icon tile (neutral, accent, info, success, warning or danger); the chip takes the same tone unless you pass metaTone. count sits in a chip beside the title and can be larger than the rows you show, with the header action linking to the rest. Key every row by a stable id: the rows are a PresenceList, so removing one when it is done fades it out and closes the gap.

Below 20rem of its own width, the chip and the action wrap under the text instead of squeezing it.

Reference

PropsActionList, ActionListItem

Props

ActionList props
Prop	Type	Default
`title`	`ReactNode` What the list is: "Waiting on you". Names the section.	–
`description`	`ReactNode` A muted line under the title: where the rows came from, how they're sorted.	–
`count`	`number` How many there are, in a chip beside the title. It can be more than the rows shown.	–
`action`	`ReactNode` At the end of the header: a "View all" link or button.	–
`headingLevel`	`2 \| 3 \| 4 \| 5 \| 6` The title's heading level. default 3	`3`
`children`	`ReactNode` ActionListItems, each keyed by a stable id.	–
Other props pass through: extends `ComponentProps<'section'>`.

ActionListItem

ActionListItem props
Prop	Type	Default
`icon`	`ReactNode` The row's icon, drawn in a tile in the row's tone.	–
`tone`	`ActionListTone` `'neutral''accent''info''success''warning''danger'` The tile's (and, with `emphasis`, the row's) tone. default 'neutral'	`'neutral'`
`title`Required	`ReactNode` What to act on: "Contract renews in 12 days".	–
`detail`	`ReactNode` One line of why: who, how much, by when.	–
`meta`	`ReactNode` A chip before the action: the date, amount or state that makes it urgent. Text, optionally led by a small icon.	–
`metaTone`	`ActionListTone` `'neutral''accent''info''success''warning''danger'` The chip's tone. Default: the row's.	–
`action`	`ReactNode` At the row's end: the row's own action, usually a small Button.	–
`emphasis`	`boolean` Sets this row apart as the one to do first: a tinted panel in its tone. default false	`false`
Other props pass through: extends `ComponentProps<'li'>`.

StylingParts and data attributes

MotionAdd, remove · reduced motion

Motion

Motion tokens
Moment	Tokens	Value	Curve
Row addeddrops in and fades up	`duration.baseease.enter` 220ms · cubic-bezier(0.16, 1, 0.3, 1)	220mscubic-bezier(0.16, 1, 0.3, 1)
Row removedfades out; the rows below close the gap	`duration.fastease.exitspring.smooth` 140ms · cubic-bezier(0.4, 0, 1, 1) · 0.36s, bounce 0	140mscubic-bezier(0.4, 0, 1, 1)0.36s, bounce 0

Reduced motion

Rows come and go at once.

Reduced motion

Rows are added and removed at once, with no fade or slide.

AccessibilityRegion, list