Lockup

Lockup places icons, avatars, actions, shortcut hints, and counts beside a body that can grow, wrap, or truncate. Read Layout to choose a layout component.

Put exactly one LockupBody inside Lockup, with any number of LockupRail siblings before or after it. Parts appear in DOM order, so the first part sits on the inline-start side in both left-to-right and right-to-left text.

Rails and sizing

A rail keeps its intrinsic inline size. The body takes the remaining space and can shrink below its content, so long text wraps or truncates instead of widening the row. Lockup does not truncate text itself.

gap sets the same space between every pair of adjacent parts. For different spacing inside a rail, put a Cluster inside it.

An empty rail still takes up a part and a gap. To leave a rail out, render the LockupRail conditionally, not only its children.

Rail content

A rail holds supporting items, not running text. Pass a string, a number, or elements. Items in one rail sit side by side. To keep text and an element flowing together, such as a phrase with a Kbd, wrap them in one element.

Alignment

railAlignment sets how rails line up with the body. firstLine is the default. It centres each rail on the first line of the body, so an icon stays beside that line when the text wraps. A rail taller than the first line makes the row taller. center centres each rail on the whole body.

Use center for an avatar beside a name and description, for controls, and for a body without a line of text to align with.

firstLine measures the first line with the typography Lockup inherits. When the body starts with another type style, such as a Heading, the rails sit off-centre. Put the typography component around Lockup instead, and set elementType="span" on a Lockup inside a Heading.

Interactive content

Put a link inside LockupBody and other controls in their own rails, as siblings of the link. Do not put a control inside another interactive element.

Choose the rendered element

Set elementType="li" on a Lockup that is a direct child of ul or ol.

Set elementType="span" when Lockup sits inside phrasing content. Its parts, and any Lockup nested inside it, then render span elements. The content you pass must also be phrasing content.

Own the rendered elements

Use renderRoot to render your own element for Lockup, LockupRail, or LockupBody, and spread the domProps onto it. Lockup can't tell what your element is, so:

• Set elementType on the parts inside your root, such as span inside an a.
• Give an inline root, such as a link in running text, display: inline-flex with your own className or style. Lockup lays out a root you render as a block-level flex container, unless it sits inside a span Lockup.
• Return a container for LockupRail, such as a div or span, and render its children. Put an image inside the rail, not in its place.

Render a figure as the root and a figcaption as the body to caption an image. Set margin="0" to remove the figure's browser margin.

Render a rail as a time element so the date it shows carries a machine-readable value.

Read Composition for the general elementType and renderRoot rule.

API

LockupProps

LockupRailProps

LockupBodyProps