UI Elements Reference

This page shows the approved interactive elements for book_system. All components below are composed using the existing global CSS primitives. No new visual patterns should be introduced without first updatingglobals.css and adding them to this reference.

Primary Buttons (Blue)

Use for main actions such as save, confirm, or proceed. These rely on the primary button color variables.

<button class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
  Primary Action
</button>

Secondary Buttons (Grey)

Use for secondary actions such as cancel or dismiss. These follow the standard grey background and hover rules.

<button class="px-6 py-3 bg-gray-200 dark:bg-gray-700 text-primary dark:text-white rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">
  Secondary Action
</button>

Tab Buttons (Reader / Reviews)

Use for tab-style navigation. Active tab uses the primary blue; inactive tabs use the secondary grey style.

<button class="px-4 py-2 text-sm rounded-lg bg-blue-600 text-white">
  Active Tab
</button>

<button class="px-4 py-2 text-sm rounded-lg bg-gray-200 dark:bg-gray-700 text-primary dark:text-white hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">
  Inactive Tab
</button>

Icon / Text Controls

These are inline controls such as close buttons or settings icons. They must use existing text and hover colors.

<button class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 text-2xl" aria-label="Close">
  ×
</button>

<button class="px-3 py-1 text-sm rounded-lg bg-gray-200 dark:bg-gray-700 text-primary dark:text-white hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">
  ⚙️ Settings
</button>

Form Inputs

Standard input and select elements used across the site. New forms should reuse these base styles.

<input
  type="text"
  class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-900 text-primary dark:text-white"
/>

<select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-900 text-primary dark:text-white">
  <option>Option A</option>
  <option>Option B</option>
</select>

Hoverable Card / List Row

Used for blog posts, reviews, and other items that appear inside a card with a hoverable row. The outer card provides the border and shadow; the inner row uses hover-standard for a consistent hover background.

<article class="bg-white dark:bg-gray-800 rounded-lg shadow-lg border-2 border-blue-200 dark:border-gray-700">
  <div class="p-4 cursor-pointer hover-standard transition-colors">
    <div class="flex items-center justify-between mb-1">
      <div class="text-sm font-semibold text-primary dark:text-white">Book Review: Sample Title</div>
      <span class="text-xs text-blue-600 dark:text-blue-400 font-medium">Read more →</span>
    </div>
    <div class="text-xs text-gray-500 dark:text-gray-400">
      <span class="font-mono text-blue-600 dark:text-blue-400">v2.0604</span> • November 14, 2025 • By Alex Router • 8.6
    </div>
  </div>
</article>

Navigation Menu Trigger

This button opens the master navigation dropdown used across the site. The dropdown (collapsed by default) contains grouped links, a search box for quickly locating any function, and a frequently visited section that can be updated over time.

<button
  class="w-full flex items-center justify-center text-white font-semibold py-2 px-3 rounded-lg transition-colors relative"
  style="background-color: var(--color-primary-button-hover);"
>
  Navigation Menu
</button>

Utility Classes & Text Styles

These small patterns are used across the site to keep interactions and typography consistent with the global CSS standard.

<button class="px-4 py-2 text-sm rounded bg-gray-200 dark:bg-gray-700 text-primary dark:text-white hover-standard">
  Hover Standard Example
</button>

<span class="text-version font-mono">v2.1074</span>