Component state matrix

The design systems team does this per component. Default, hover, disabled, loading, and danger all have to sit next to each other. The hover tile has to be the component’s real hover styling, applied as a prop. A designer’s approximation of hover is not enough for a matrix you will keep.

This happens each time you document a component, not once when the button is first drawn. The person doing it already owns the states in code. They should not paint five frames by eye and hope the fills still match next month.

The job is five PNGs from one file. You keep named exports for Default, Hover, Disabled, Loading, and Danger. One data file is keyed by those names and supplies the label and icon for each state. One export writes the set. The next component is the same shape: named exports plus a keyed file.

Give Lerret a React component under .lerret/ and optional data. export writes a PNG. Same component, named-export variants, one run.

The component is .lerret/design-system/button-states.jsx with those five named exports. One file, five variants. The label and the icon can change per state. The rest of the button stays shared. Hover is a prop on the real button, so the hover tile is the hover the product uses.

Data is one file keyed by variant name, supplying the label and icon for each state. This is the third of the four bulk patterns: named-export variants plus per-variant keyed data in one data file. One run writes all five images. The key names match the named exports, so Hover reads the Hover block. There is no batch product, no queue, no orchestrator.

The images are PNGs: button-states.png, button-states-hover.png, and so on.

Five states come from one file, and the hover state is the component’s real hover styling applied as a prop. A design file with five frames will keep the hover fill in sync by eye. You use Lerret because the matrix is the component’s states, and the filenames match those states.

npx @lerret/cli@latest export

Start a project with npx create-lerret@latest. More in the use cases index.