Disabled State
States & VariantsThe visual appearance of an element when it cannot be interacted with, typically shown with reduced opacity and without hover effects.
Visual Examples
Example 1
Example 2
Example 3
Visual examples for Disabled State coming soon.
How It Works in Apps/Websites
Disabled states indicate that an element is temporarily unavailable for interaction. Visual cues include: reduced opacity (typically 50%), grayed-out colors, removed hover effects, and changed cursor (not-allowed). Elements become disabled when prerequisites aren't met (empty required field) or during loading.
How AI Interprets This Term
When you say 'disabled state', AI expects: element with reduced opacity (0.5-0.6), grayed-out or muted colors, cursor: not-allowed, no hover effect changes. Should be clearly different from enabled state but still readable.
Prompt Examples
Copy-paste these prompts to use in your AI tools.
Show a button in disabled state
Design disabled states for form elements: buttons show 50% opacity, gray background, cursor not-allowed. Inputs have lighter gray background, text at 60% opacity. Include tooltip on hover explaining 'Complete required fields to continue'.
Show a form with: enabled button, disabled button (required field empty), and loading button (submission in progress)
Compare With
Related or contrasting terms to help you understand the differences.
Variants & States
Variants
States
Usage Guidelines
When to Use
- •Form fields with unmet dependencies
- •Actions that aren't available
- •During form submission
- •Features not available in current plan
When NOT to Use
- •Hiding options entirely
- •As default state without explanation
- •When action can proceed