Component kit/Overlays Desktop

Overlays

On a phone, side sheets rise from the bottom, long forms take the full screen, and the ⋯ menu becomes an action sheet with Cancel in thumb reach.

Bottom sheet · quick edit

The quick-edit sheet rises from the bottom. Tap the pencil on a row; drag-handle, scrim tap or Cancel closes.

Global StoreStaging
Stone linen jacketIrish Linen · HS 30612
£690Draft
Charcoal herringbone jacketPerennial · VBC 218.1003
£780Available
Navy birdseye two-piece suitCrystal Springs · HS 81045
£1,150Available
Midnight mohair dinner suitCeremony · VBC 150.2201
£1,480Available
Navy chalk-stripe three-pieceRevenge · VBC 403.0118
£1,390Available
Mid-grey flannel trousersSherry Flannel · HS 64033
£340Draft
Brown glen check waistcoatMoorland Tweed · HS 92201
£260Retired

Discard your changes?

You changed Stone linen jacket. Closing now loses those edits.

Changes savedStone linen jacket, version 2
UsesSheet side=bottom.k-sheet.k-bottom.k-grab--e-phone-sheet--motion-sheet-in

Full-screen sheet

Large sheets take the whole phone. Close top left, one primary at the bottom, the form scrolls between.

Uses.k-sheet.k-bottom.k-full.ov-fullbar.ov-sum

Unsaved-changes guard

A second, shorter sheet on top. Keep editing sits lowest, under the thumb.

Global StoreStaging
Stone linen jacketIrish Linen · HS 30612
£690Draft
Charcoal herringbone jacketPerennial · VBC 218.1003
£780Available
Navy birdseye two-piece suitCrystal Springs · HS 81045
£1,150Available
Midnight mohair dinner suitCeremony · VBC 150.2201
£1,480Available
Navy chalk-stripe three-pieceRevenge · VBC 403.0118
£1,390Available
Mid-grey flannel trousersSherry Flannel · HS 64033
£340Draft
Brown glen check waistcoatMoorland Tweed · HS 92201
£260Retired

Discard your changes?

You changed Stone linen jacket. Closing now loses those edits.

Uses.k-guard.ov-pbtnsrole=alertdialog

Dialog

Dialogs become bottom sheets with stacked full-width buttons, primary nearest the thumb. Tap Pull updates.

Global StoreStaging
Navy birdseye two-piece suitUpdate ready · v4 from HQ
Uses.k-sheet.k-bottom.ov-pbtnsDialog

Confirm · neutral, destructive, typed

Same words as desktop. The typed phrase keeps its own line; the danger button wakes on a match. Try the third.

Publish to 6 brands?

Navy chalk-stripe three-piece v3 goes into every brand's Global Store today.

Revoke Website checkout?

Requests signed with rjdtc_••••f3a9 stop at once. The key stays in Revoked for audit.

RJ MTM setup failed at ERP retailer account, attempt 2.
Destructive confirm button
default
focus
disabled
error
Does not match CLEAN UP rj-mtm
loading
UsesAlertDialog.ov-pbtns.btn-danger[data-ov-typed]

Confirm unverified currency

Every affected cloth, then one tick. Save prices stays asleep until it is ticked. Tap Save prices.

PricesStaging
3 USD prices changed. The USD rate for RJ Clothing isn't confirmed.
Uses.ov-ack[data-ov-ack].ov-ic.warn.chip.warning

Popover

On touch the popover opens as a short bottom sheet from the price you tapped.

Global StoreStaging
Navy birdseye two-piece suitCrystal Springs · HS 81045
£1,150Available
UsesPopover → Sheet.ov-dl

Tooltip and hover card

There is no hover on touch. Tooltips appear on long press; a hover card becomes a tap-to-peek card with a way through.

Copy handle

Long press shows the name. Anything important is a visible label instead.

Crystal SpringsHolland & Sherry · HS 81045
Colour
Navy birdseye
Cloth
100% wool, 280 g
Stock
In stock

Used by 3 products.

UsesTooltipHoverCard → Sheet.tip.ov-hcard

Motion and reduced motion

With reduced motion on, sheets appear and leave at once.

Bottom sheetRises · --motion-sheet-in / out
Action sheetRises · --motion-sheet-in / out
Full-screen sheetRises · --motion-sheet-in / out
ScrimFades with its layer
Save toastRises 8px · 2.6 s
Usesprefers-reduced-motion.ov-rm--ease-in--ease-out