Interactivity

Interactivity utilities control how users interact with elements.

They define whether an element can receive pointer events, what cursor appears on hover, how text selection behaves, and how selected text is styled across the interface.

FrontAlign keeps these utilities small, predictable, and useful for real UI states such as disabled buttons, draggable cards, copyable code, overlays, loading states, and application controls.

What Interactivity Covers

Pointer events
Cursor feedback
User selection
Global selection styling

Quick Example

<button class="cursor-pointer select-none">
  Click Me
</button>

<div class="pointer-none">
  Decorative overlay
</div>

Pointer Events

Pointer utilities control whether an element can receive mouse, touch, and pointer interactions.

Class	CSS Output	Description
`pointer-none`	`pointer-events: none`	Disable pointer interaction.
`pointer-auto`	`pointer-events: auto`	Restore normal pointer interaction.

Disable Interaction

<div class="pointer-none opacity-50">
  Disabled Content
</div>

Pass-through Overlay

<div class="pointer-none">
  Decorative Overlay
</div>

This pattern is useful when an overlay should be visible but should not block clicks behind it.

Restore Interaction Inside Disabled Parent

<div class="pointer-none">
  <button class="pointer-auto cursor-pointer">
    Still Clickable
  </button>
</div>

Use pointer-auto when a child element needs to receive interactions again.

Cursor Utilities

Cursor utilities communicate interaction behavior before the user clicks or drags.

Class	Cursor	Common Use
`cursor-pointer`	`pointer`	Buttons, links, clickable cards.
`cursor-not-allowed`	`not-allowed`	Disabled or unavailable actions.
`cursor-grab`	`grab`	Draggable elements at rest.
`cursor-grabbing`	`grabbing`	Active dragging state.
`cursor-text`	`text`	Selectable or editable text areas.
`cursor-wait`	`wait`	Loading or processing states.

Cursor Examples

Clickable Card

<div class="cursor-pointer border rounded-4 shadow hover:shadow-large">
  Open Project
</div>

Disabled Button

<button class="cursor-not-allowed opacity-50">
  Unavailable
</button>

Draggable Item

<div class="cursor-grab border rounded-3">
  Drag Item
</div>

Active Drag State

<div class="cursor-grabbing shadow-large">
  Dragging
</div>

Text Cursor

<p class="cursor-text">
  Select or edit this text.
</p>

Loading State

<button class="cursor-wait opacity-75">
  Processing...
</button>

User Select

User selection utilities control whether users can select text inside an element.

Class	CSS Output	Description
`select-none`	`user-select: none`	Prevent text selection.
`select-text`	`user-select: text`	Allow text selection.
`select-all`	`user-select: all`	Select all content at once.
`select-auto`	`user-select: auto`	Use browser default behavior.

Selection Examples

Prevent Accidental Selection

<button class="select-none cursor-pointer">
  Save Changes
</button>

Use this for buttons, tabs, nav items, draggable handles, and UI chrome.

Selectable Text

<p class="select-text">
  This paragraph can be selected by the user.
</p>

Select All

<code class="select-all">
  npm install frontalign
</code>

select-all is useful for copyable commands, API keys, tokens, short snippets, and CLI examples.

Restore Browser Default

<div class="select-auto">
  Default selection behavior
</div>

Global Selection Styling

FrontAlign also styles selected text globally.

::selection {
  background-color: var(--selection);
  color: var(--selection-text);
  text-shadow: none;
}

This keeps selected text aligned with your design system and theme tokens.

Real World Examples

Copyable Install Command

<div class="border rounded-3">
  <code class="select-all">
    npm install frontalign
  </code>
</div>

Disabled Product Card

<div class="pointer-none opacity-50 cursor-not-allowed border rounded-4">
  Coming Soon
</div>

Drag Handle

<button class="cursor-grab select-none">
  Drag
</button>

Loading Button

<button class="cursor-wait opacity-75 select-none">
  Saving...
</button>

Interactive Link Card

<a
  href="#"
  class="cursor-pointer select-none hover:shadow-large"
>
  View Documentation
</a>

Decorative Layer

<div class="pointer-none opacity-25">
  Background Decoration
</div>

Combining Utilities

Cursor + Select

<button class="cursor-pointer select-none">
  Open Menu
</button>

Pointer + Opacity

<div class="pointer-none opacity-50">
  Disabled Panel
</div>

Cursor + Hover

<div class="cursor-pointer hover:shadow-large hover:scale-105 transition-all">
  Interactive Surface
</div>

Select All + Code

<pre>
  <code class="select-all">
    npx frontalign build
  </code>
</pre>

Choosing the Right Utility

Use Case	Recommended Utility
Clickable element	`cursor-pointer`
Disabled interaction	`pointer-none` + `cursor-not-allowed`
Draggable item	`cursor-grab`
Active dragging	`cursor-grabbing`
Copyable command	`select-all`
Prevent accidental selection	`select-none`
Loading state	`cursor-wait`
Decorative overlay	`pointer-none`

Accessibility Notes

Cursor and pointer utilities are visual and behavioral helpers. They should not be the only way to communicate state.

For disabled controls, also use the appropriate HTML attributes when possible.

<button disabled class="cursor-not-allowed opacity-50">
  Disabled
</button>

For interactive elements, use semantic HTML such as buttons and links when possible.

<button class="cursor-pointer select-none">
  Open
</button>

Best Practices

Use cursor-pointer only for genuinely interactive elements.
Use cursor-not-allowed with disabled or unavailable actions.
Use pointer-none for decorative overlays and disabled regions.
Use select-none for buttons, tabs, handles, and UI controls.
Use select-all for short copyable values such as commands and tokens.
Avoid disabling text selection for long-form content.
Combine interactivity utilities with opacity, hover, transition, and shadow utilities for polished UI states.