Morphs · Youj

Use a state icon when the icon itself should show which state a control is in: a menu that opens, a track that plays, a microphone that's muted, a page that's saved. When the two states are two different icons with no state icon between them, use IconSwap. For a one-off confirmation, like a check after a save, a plain icon with trigger="mount" says it with less.

Installation

State icons ship with the rest of the set.

npm i @youj/icons

Or copy one in with the Youj CLI. Each is its own item and brings the icon engine with it.

npx @youj/cli add icon-menu

Usage

Pass your state to active. false is the first state, true the second.

import { useState } from 'react'
import { MenuIcon } from '@youj/icons'

export function NavToggle() {
  const [open, setOpen] = useState(false)
  return (
    <button type="button" aria-expanded={open} aria-controls="site-nav" aria-label="Menu" onClick={() => setOpen(!open)}>
      <MenuIcon active={open} />
    </button>
  )
}

Each icon names its two states in meta.states, for example MenuIcon.meta.states is ['menu', 'close']. The morph shows the state, and the button carries it for assistive technology, here with aria-expanded.

Examples

Driving them from state

A state icon follows your state; it doesn't hold its own. That keeps it honest when the state changes from somewhere else, like a keyboard shortcut or the server. In this editor, each toolbar button is a pressed toggle, and its icon shows the formatting it applies.

useIconState builds the state, the button props and the icon props in one call:

import { BoldIcon, useIconState } from '@youj/icons'

const bold = useIconState({ label: 'Bold' })

<button {...bold.buttonProps}>
  <BoldIcon {...bold.iconProps} />
</button>

Reference

Propssize, strokeWidth, aria-label… (8)

Props

State icons take the same props as every icon. active is the one that matters here: it overrides the trigger and holds the icon in its second state while it's true.

IconProps props
Prop	Type	Default
`size`	`number \| string` Rendered width and height. default 24	`24`
`strokeWidth`	`number` Stroke width in viewBox units. default 1.5	`1.5`
`className`	`string`	–
`style`	`CSSProperties`	–
`aria-label`	`string` Gives the icon role="img". Without it the icon is decorative (aria-hidden).	–
`trigger`	`IconTrigger` `'hover''mount''loop''none'` What plays the choreography. Hover also listens to a hovered/focused parent button or `data-yj-trigger` group.	–
`active`	`boolean` Controlled state for state icons (menu → close, play → pause…). Overrides the trigger.	–
`ref`	`Ref<SVGSVGElement>`	–

MotionMorph steps, second beat, snaps and flips… · reduced motion

Motion

Motion tokens
Moment	Tokens	Value
Morph stepseach move in a sequence	`duration.fastease.standard` 140ms · cubic-bezier(0.2, 0, 0, 1)	140mscubic-bezier(0.2, 0, 0, 1)
Second beatstarts one `fast` step after the first	`duration.baseease.standard` 220ms · cubic-bezier(0.2, 0, 0, 1)	220mscubic-bezier(0.2, 0, 0, 1)
Snaps and flipsparts that turn or click into place	`spring.snappy` 0.2s, bounce 0	0.2s, bounce 0
Success and arrivalsaved, added, invited, verified	`spring.settle` 0.45s, bounce 0.3	0.45s, bounce 0.3
Draw onchecks, slashes and marks writing themselves	`duration.slowease.emphasized` 340ms · cubic-bezier(0.6, 0, 0.1, 1)	340mscubic-bezier(0.6, 0, 0.1, 1)

Reduced motion

The icon switches straight to its new state, with no morph.

Each icon's choreography is its own, built from these tokens. The explorer's Morph view describes what each one does, and toggles them all in a wave.

Reduced motion

The icon switches to its new state instantly. The state is still visible, since the slash, the pause bars or the close mark all appear, just without the morph.

AccessibilityKeyboard, ARIA, announcements