Skip to main content

Interactivity

Atomic interactivity classes allow you to quickly change an element’s interactivity.

The pointer-events CSS property enables or disables all mouse events on an element.

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.

<div class="pe-auto"></div>
<div class="pe-none"></div>

The 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.

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.

<div class="focus"></div>
<div class="focus-inset"></div>
<div class="focus-bordered"></div>
<div class="focus-inset-bordered"></div>
.focus
.focus-inset
.focus-bordered
.focus-inset-bordered
<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>
.f:focus
.f:focus-inset
.f:focus-bordered
.f:focus-inset-bordered

The user-select CSS property controls whether the user can select text.

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 .c-default

<div class="us-auto"></div>
<div class="us-none"></div>
.us-auto
.us-none

The user-drag CSS property controls whether the user can drag an image.

Note: These classes only work in Safari and Chrome.
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.

<img class="ud-auto" />
<img class="ud-none" />
Stack Overflow logo with class ud-auto
.ud-auto
Stack Overflow logo with class ud-none
.ud-none
Deploys by Netlify