Design System Documentation

Create documentation for [component/pattern name] in our design system. Include:

1. Component Overview
   - Component name and purpose
   - When to use this component
   - When NOT to use (alternatives)
   - Key use cases
   - Component category

2. Visual Examples
   - Default state
   - All variants (primary, secondary, etc.)
   - All sizes (small, medium, large)
   - All states (default, hover, active, focus, disabled, loading, error, success)
   - Light and dark mode versions
   - Before/after examples

3. Anatomy
   - Label each part of the component
   - Explain what each part does
   - Required vs. optional elements
   - Sizing and spacing specifications
   - Example: "Button: Icon (optional) + Label (required) + Loading indicator (optional)"

4. Usage Guidelines
   **Do's:**
   - Best practices for using this component
   - Recommended use cases
   - Accessibility considerations
   - UX patterns that work well
   
   **Don'ts:**
   - Common mistakes to avoid
   - When not to use this component
   - Anti-patterns
   - Accessibility pitfalls

5. Content Guidelines
   - Character limits and recommendations
   - Tone and voice guidance
   - Capitalization rules
   - Punctuation guidelines
   - Placeholder text examples
   - Error message examples (if applicable)

6. Accessibility
   - ARIA labels and roles
   - Keyboard navigation instructions
   - Screen reader considerations
   - Focus management
   - Color contrast requirements
   - WCAG compliance level (A, AA, AAA)

7. Variants and Options
   For each variant, document:
   - When to use it
   - Visual example
   - Code example
   - Unique properties
   
   Example variants:
   - Button: primary, secondary, tertiary, ghost, danger
   - Input: text, password, email, number, search
   - Size: small, medium, large
   - State: default, hover, active, disabled, loading, error

8. Behavior and Interactions
   - What happens on click/tap?
   - What happens on hover?
   - What happens on focus?
   - Animation and transitions
   - Loading states
   - Error states and validation
   - Success states

9. Code Examples
   **Design:**
   - Figma component link or embed
   - Design token values used
   - Spacing and sizing values
   
   **Development:**
   - Basic usage code snippet
   - All props/parameters explained
   - Common configurations
   - Advanced examples
   - Integration with other components

10. Responsive Behavior
    - How component adapts to mobile
    - Breakpoint behavior
    - Touch vs. mouse interactions
    - Mobile-specific considerations

11. Related Components
    - Components that work well together
    - Alternative components
    - Components this depends on
    - Components that depend on this

12. Best Practices
    - Performance considerations
    - When to use vs. build custom
    - Common patterns
    - Design system principles this component embodies

13. Change Log
    - Version history
    - Recent updates
    - Deprecation notices
    - Migration guides

Format as a comprehensive, scannable documentation page with clear sections, visual examples, and code snippets.