Design System Component Specification

Create detailed specifications for a [COMPONENT NAME] component in our design system.

Design System Context:
- Design language: [MATERIAL/CUSTOM/OTHER]
- Target platforms: [WEB/IOS/ANDROID]
- Accessibility standard: [WCAG 2.1 AA/AAA]

Document the following:

**1. Component Overview**
- Purpose and use cases
- When to use vs. alternatives
- Anatomy diagram description

**2. Variants**
- Size variations (with dimensions)
- Style variations (filled, outlined, ghost, etc.)
- State variations (default, hover, active, focus, disabled, loading)
- Contextual variations (primary, secondary, danger, etc.)

**3. Properties/Props**
| Property | Type | Default | Description |
|----------|------|---------|-------------|

**4. Behavior Specifications**
- Interaction states and transitions
- Animation timing and easing
- Keyboard navigation
- Touch/gesture support

**5. Accessibility Requirements**
- ARIA attributes
- Focus management
- Screen reader announcements
- Color contrast requirements

**6. Content Guidelines**
- Character limits
- Truncation behavior
- Localization considerations

**7. Code Examples**
- Basic usage
- Common configurations
- Edge cases

**8. Do's and Don'ts**
- Visual examples of correct usage
- Common mistakes to avoid

Create detailed specifications for a [COMPONENT NAME] component in our design system.

Design System Context:
- Design language: [MATERIAL/CUSTOM/OTHER]
- Target platforms: [WEB/IOS/ANDROID]
- Accessibility standard: [WCAG 2.1 AA/AAA]

Document the following:

**1. Component Overview**
- Purpose and use cases
- When to use vs. alternatives
- Anatomy diagram description

**2. Variants**
- Size variations (with dimensions)
- Style variations (filled, outlined, ghost, etc.)
- State variations (default, hover, active, focus, disabled, loading)
- Contextual variations (primary, secondary, danger, etc.)

**3. Properties/Props**
| Property | Type | Default | Description |
|----------|------|---------|-------------|

**4. Behavior Specifications**
- Interaction states and transitions
- Animation timing and easing
- Keyboard navigation
- Touch/gesture support

**5. Accessibility Requirements**
- ARIA attributes
- Focus management
- Screen reader announcements
- Color contrast requirements

**6. Content Guidelines**
- Character limits
- Truncation behavior
- Localization considerations

**7. Code Examples**
- Basic usage
- Common configurations
- Edge cases

**8. Do's and Don'ts**
- Visual examples of correct usage
- Common mistakes to avoid