BlockUI & Dividers
Blocking overlays, skeleton states and text dividers.
Block a card
Monthly Recurring Revenue
$48.2K
12.4%vs last month
The overlay is absolutely positioned inside a .nx-block parent, so it covers exactly the element it belongs to and inherits its radius.
Block a form
Blocking a form while it saves is more honest than a disabled button: it also stops people editing fields that are about to be overwritten.
Overlay variants
Spinner
With label
Locked
Error
Text dividers
Default centred
Aligned to the start
Aligned to the end
Dashed rule
With a badge
With an icon
In context
or continue with
Skeleton vs block
Skeletons for first load, overlays for refreshSkeleton — nothing to show yet
Block — stale content still visible
Sarah Chen
Head of Product
Keeping the previous values on screen while they refresh reads as faster than blanking the card, and it avoids layout jumps.