get_interaction_states
Get interaction state patterns (hover, focus, active, disabled) for UI components.
Reference
Parameters
- Name
component- Type
- enum · required
- Description
Component type (
button·input·card·link·checkbox·switch·select·dropdown-item·tabs-trigger·list-item)
- Name
variant- Type
- string · optional
- Description
Component variant (e.g., primary, outline, ghost)
- Name
state- Type
- enum · optional
- Description
Specific interaction state (
hover·focus·focus-visible·active·disabled·selected)
- Name
role- Type
- string · optional
- Description
Interaction role (primary, secondary, subtle, danger, neutral)
- Name
inputModality- Type
- enum · optional
- Description
Input device modality (
pointer·keyboard·touch)
- Name
activeStates- Type
- array · optional
- Description
Simultaneous active states to resolve
- Name
includeRules- Type
- boolean · optional
- Description
Include global rules for the state category (default:
false)
Description
Get interaction state patterns (hover, focus, active, disabled) for UI components.
Returns consistent, design-system-compliant state definitions including:
- Tailwind classes for each state
- Visual change descriptions
- AI guidance for implementation
Parameters:
- component (required): Component type - 'button', 'input', 'card', 'link', 'checkbox', 'switch', 'select'
- variant (optional): Component variant - 'primary', 'outline', 'ghost', 'destructive', 'default'
- state (optional): Specific state - 'hover', 'focus', 'focus-visible', 'active', 'disabled'
- includeRules (optional): Include global rules for the state category (default: false)
Examples:
- get_interaction_states({ component: 'button' }) - All states for all button variants
- get_interaction_states({ component: 'button', variant: 'primary', state: 'hover' }) - Specific state
- get_interaction_states({ component: 'input', includeRules: true }) - Input states with rules
Source
Defined in packages/mcp/src/tools.ts.
The request handler lives alongside its registration in packages/mcp/src/tools/.