Sections
Interactivity
Atomic interactivity classes allow you to quickly change an element’s interactivity.
Pointer events
Section titled Pointer eventsThe pointer-events CSS property enables or disables all mouse events on an element.
Pointer events classes
Section titled Pointer events classes| Class | Output | Definition |
|---|---|---|
.pe-auto |
pointer-events: auto; |
The element behaves as it would if the pointer-events property were not specified. |
.pe-none |
pointer-events: none; |
Disables mouse events (clicking, dragging, hovering, etc.) on the element and its decendents. |
Pointer events examples
Section titled Pointer events examples<div class="pe-auto">…</div>
<div class="pe-none">…</div>Focus
Section titled FocusThe focus utility classes allow you to apply custom focus styles to an element. Add the conditional prefix f: to only apply the style when the element is focused.
Focus classes
Section titled Focus classes| Class | Definition |
|---|---|
.focus |
The element will have the default Stacks focus style applied. |
.focus-inset |
The element will have the inset Stacks focus style applied. |
.focus-bordered |
The element will have the default Stacks focus style applied and match the border to the focus style. |
.focus-inset-bordered |
The element will have the inset Stacks focus style applied and match the border to the focus style. |
Focus examples
Section titled Focus examples<div class="focus">…</div>
<div class="focus-inset">…</div>
<div class="focus-bordered">…</div>
<div class="focus-inset-bordered">…</div>Conditional focus examples
Section titled Conditional focus examples<div class="focus" role="button" tabindex="0">…</div>
<div class="focus-inset" role="button" tabindex="0">…</div>
<div class="focus-bordered" role="button" tabindex="0">…</div>
<div class="focus-inset-bordered" role="button" tabindex="0">…</div>User select
Section titled User selectThe user-select CSS property controls whether the user can select text.
User select classes
Section titled User select classes| Class | Output | Definition |
|---|---|---|
.us-auto |
user-select: auto; |
The element behaves as it would if the user-select property were not specified. |
.us-none |
user-select: none; |
The text of the element and its sub-elements is not selectable. It may be appropriate to combine with |
User select examples
Section titled User select examples<div class="us-auto">…</div>
<div class="us-none">…</div>User drag
Section titled User dragThe user-drag CSS property controls whether the user can drag an image.
User drag classes
Section titled User drag classes| Class | Output | Definition |
|---|---|---|
.ud-auto |
user-drag: auto; |
The element behaves as it would if the user-drag property were not specified. |
.ud-none |
user-drag: none; |
The element and its sub-elements are not draggable. When applied to an image, the ghosted image will not appear in a loaded mouse cursor. |
User drag examples
Section titled User drag examples<img class="ud-auto" />
<img class="ud-none" />
.ud-auto
.ud-none
