Interaction

Interactive components respond to user actions with visual feedback through state changes.
Extraction UI provides consistent interaction patterns for hover, focus, active, and disabled states.

Overview

All interactive components inherit these states automatically through the variant system:

Hover — Visual feedback when cursor hovers over an element
Active — Pressed or selected state
Focus — Keyboard navigation and accessibility indicator

States

Interact with this button to see the hover, focus, and active states. Some components may have additional states such as loading or disabled. You can find these documented in their respective component pages.

Custom States

You can also set specific variants, shades, or palettes for certain states.

Manual Interactivity

In order to make non-standard components interactive, use the interactive class.

Interactive Box

If you only need specific states, you can use the interactive-hover, interactive-active, and interactive-focus classes to apply only those interactions.

Hover only

Active only