AAtomic CSS

cursor

Sets the cursor shape when hovering over an element. An important UX element that visually communicates interactivity to users.

Class List

ClassCSSDescription
cpcursor: pointerPointer. Used for clickable elements
cdcursor: defaultDefault arrow. For non-interactive elements or reset
cmcursor: moveCrosshair. Used for draggable elements
ctcursor: textI-beam. Used for text selection/input areas
cwcursor: waitLoading/wait. Indicates processing state

Visual Comparison

Hover over each box to see the cursor change.

cp

cursor: pointer

Clickable

cd

cursor: default

Default arrow

cm

cursor: move

Draggable

ct

cursor: text

text selection

cw

cursor: wait

Loading

Class Details

cpcursor: pointer

Displays a pointer cursor. Indicates a clickable element. Must be added to clickable elements other than <a> tags (div, span, custom buttons, etc.).

<!-- Clickable card -->
<div class="cp hover-bg27272A bg18181B br8px p2rem tall200msease" @click="openDetail">
  <h3>Product name</h3>
  <p>Description Text</p>
</div>

<!-- Custom button (div based) -->
<div class="cp bg6366F1 hover-bg4F46E5 cFFFFFF py12px px2rem br8px tac bn fs16px fw600 tall200msease">
  Buy now
</div>

<!-- Click table row -->
<tr class="cp hover-bg18181B" @click="goToDetail">
  <td>Data 1</td>
  <td>Data 2</td>
</tr>

Common Combinations

cp hover-bg27272AAdd hover effect to clickable cards/rows
cp hover-bg27272A tall200mseaseClickable element with smooth hover transition
cp bg6366F1 hover-bg4F46E5 cFFFFFFCustom button style
cp usnClickable but prevents text selection

cdcursor: default

Forces the default arrow cursor. Usually not necessary, but used to reset inherited cpor apply to disabled elements.

<!-- Reset parent cp -->
<div class="cp hover-bg27272A p2rem br8px">
  <h3>Clickable card</h3>
  <p class="cd c71717A">This text has default cursor</p>
</div>

<!-- Disabled state indicator -->
<button class="cd o50 pen bg27272A cA1A1AA py12px px2rem br8px bn">
  Disabled button
</button>

cmcursor: move

Displays a crosshair cursor. Used on draggable elements to visually indicate they can be moved.

<!-- Draggable item -->
<div class="cm bg18181B b1pxsolid27272A br8px p16px df aic gap12px" draggable="true">
  <span class="cA1A1AA">⠿</span>
  <span class="cFAFAFA">Drag to reorder</span>
</div>

<!-- Sortable list -->
<ul class="lsn df fdc gap8px">
  <li class="cm bg18181B p12px br4px b1pxsolid27272A cFAFAFA">Item 1</li>
  <li class="cm bg18181B p12px br4px b1pxsolid27272A cFAFAFA">Item 2</li>
  <li class="cm bg18181B p12px br4px b1pxsolid27272A cFAFAFA">Item 3</li>
</ul>

ctcursor: text

Displays an I-beam (text selection) cursor. Used for areas where text input or selection is available. <input> and <textarea> have this cursor applied by default.

<!-- Text selectable area -->
<div class="ct bg18181B p2rem br8px b1pxsolid27272A">
  <code class="cFAFAFA fs14px">npm install atomic-css</code>
</div>

<!-- Editable div -->
<div class="ct bg18181B p16px br8px b1pxsolid27272A cFAFAFA" contenteditable="true">
  This area can be directly edited
</div>

cwcursor: wait

Displays a loading/wait cursor. Indicates processing state. Used while loading after a button click or while fetching data.

<!-- Loading button -->
<button class="cw pen bg27272A cA1A1AA py12px px2rem br8px bn o70">
  Processing...
</button>

<!-- Loading state toggle (Vue) -->
<button :class="loading ? 'cw pen o70' : 'cp'" class="bg6366F1 cFFFFFF py12px px2rem br8px bn">
  {{ loading ? 'Saving...' : 'Save' }}
</button>

Caution

cwsignals to users that they need to wait. Make sure to remove it when loading completes. To also indicate a disabled state, combine with pen(pointer-events: none).

Common Patterns

Practical patterns for clickable cards, draggable elements, loading states, etc.

<!-- ✅ Clickable card (hover + pointer) -->
<div class="cp hover-bg27272A bg18181B br8px p2rem tall200msease b1pxsolid27272A" @click="navigate">
  <h3 class="cFAFAFA fw600 mb8px">Card Title</h3>
  <p class="c71717A fs14px">Card description</p>
</div>

<!-- ✅ Drag list -->
<div class="df fdc gap8px">
  <div class="cm bg18181B b1pxsolid27272A br4px p12px df aic gap8px" draggable="true">
    <span class="cA1A1AA">⠿</span>
    <span class="cFAFAFA fs14px">Drag item</span>
  </div>
</div>

<!-- ✅ Loading state (cursor + click blocked) -->
<button class="cw pen o70 bg6366F1 cFFFFFF py12px px2rem br8px bn">
  Loading...
</button>

<!-- ❌ Using cp when not clickable — prohibited -->
<p class="cp">Nothing happens when you click this text</p>

Tips & Notes

cp is required for clickable non-link elements

<a> tags have pointer cursor by default, but when binding click events to div, span, etc., you must add cp.

Do not use cp on non-interactive elements

Adding cpto elements that do nothing when clicked confuses users. Cursor should match actual behavior.

Use cw + pen combination for loading states

To prevent clicks during loading, use the cw pen combination. pen(pointer-events: none)blocks click events.

pointer-eventsuser-selecttouch-action