🔴 Live Demo
Interactive Text Size Controls
Use the text size switcher in the navbar (top right) to adjust the text size for better readability. Watch how the text size changes affect this demo content:
Sample Content
This is sample text to demonstrate the text size switcher functionality. Use the text size controls in the navbar to increase or decrease the text size. This helps users with visual impairments or those who prefer different reading sizes.
Accessibility Features: The text size changes apply to the entire document and persist across page navigation for a consistent user experience.
- Small text size for compact viewing
- Medium text size (default) for normal reading
- Large text size for improved readability
- Extra large text size for accessibility needs
📏 Available Text Sizes
Size Options
- Small: 14px base font size
- Medium: 16px base font size (default)
- Large: 18px base font size
- Extra Large: 20px base font size
Persistence
- Setting saved to localStorage
- Maintained across page reloads
- Consistent across the entire site
- Immediate visual feedback
✨ Key Features
♿ Accessibility
- WCAG 2.1 compliant
- Keyboard navigation support
- Screen reader friendly
- High contrast compatibility
🎨 Visual Design
- Clean button interface
- Visual size indicators
- Theme-aware styling
- Responsive design
⚡ Performance
- Lightweight component
- CSS-based sizing
- No external dependencies
- Fast state changes
💻 Usage Examples
Basic Integration
// In your header or navbar
import TextSizeSwitcher from '@site/src/components/TextSizeSwitcher';
export default function Header() {
return (
<header>
<nav>
<div className='navbar__item'>
<TextSizeSwitcher />
</div>
</nav>
</header>
);
}🔗 Related Resources
Learn more about accessibility features and text size controls