System
Four parts, all optional but the title: LockupMedia → LockupTitle → LockupDescription → LockupActions. The root carries the size and the alignment; every part reads its scale off that, so nothing inside is hand-sized.
Nothing came back for that search in the last 90 days. Try a shorter phrase, or widen the date range.
Pick the size from the container, not from how important the message is: sm inside a card, a table body, or a small panel; md (default) in a modal, a side panel, or a page section; lg on a full page.
Nothing needs your attention right now.
Nothing needs your attention right now.
Nothing needs your attention right now.
align="center" (default) for full pages and modals, where the block owns the whole space. align="start" inside a card or a side panel, where the text should line up with everything else in the column.
Files people share with you land here.
Files people share with you land here.
Tone colors the media chip and nothing else: the box, the type, and the layout never move. variant="bare" drops the chip and bumps the glyph a step, which is what an avatar or an image wants.
Neutral reads as a resting state, not a problem.
Accent is the default: an ordinary, expected outcome.
Success confirms work that just completed.
Destructive is for a failure the reader has to act on.
At lg the title takes the display size, so set level={1}: a whole page given over to one message is that page's heading.
The run was stopped, usually because the dev server restarted. Your transcript is saved.
Every prop each part accepts.
| Part | Prop | Type | Default | Notes |
|---|---|---|---|---|
Lockup | size | sm · md · lg | md | Match it to the container, not to the weight of the message |
Lockup | align | center · start | center | Center on full pages and modals, start inside cards and side panels |
LockupMedia | tone | neutral · accent · success · destructive | accent | Colour only; never changes the box, the type, or the layout |
LockupMedia | variant | tinted · bare | tinted | Bare drops the chip and bumps the glyph a step; use it for an avatar or an image |
LockupTitle | level | 1 – 6 | 2 | Heading rank only; the size comes from the root, not from this |
LockupDescription | — | — | — | Plain paragraph; capped near 55 characters a line so centred copy holds together |
LockupActions | — | — | — | One primary button, optionally a secondary beside it; wraps rather than overflows |