Skip to content

Pointer Events

Control pointer events

Syntax

visual="pointer-events:[value]"

Values

ValueCSS OutputDescription
nonepointer-events: noneIgnore pointer events
autopointer-events: autoNormal pointer events

Examples

html
<div visual="pointer-events:none">Click through</div>

Preview

Pointer Events

visual="pointer-events:none" - Make elements click-through or interactive

auto (clickable)
none (click-through)
View Code
html
<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <div space="p:small" visual="bg:primary text:white rounded:small pointer-events:auto">auto (clickable)</div>
  <div space="p:small" visual="bg:neutral-400 text:white rounded:small pointer-events:none">none (click-through)</div>
</div>