BrandSwitcher
Navigation control for switching between Qualtrics brands or product lines.
Overview
Purpose
The BrandSwitcher component navigation control for switching between qualtrics brands or product lines.within our design system. It follows our primitive layer principles, ensuring consistency and reusability across applications.
When to Use
- Use when you need helping users navigate
- Appropriate for navigation contexts
- Follows primitive component patterns
When Not to Use
- Avoid when simpler alternatives exist
- Don't use for form controls
- Consider alternatives for edge cases
Live Example
Anatomy
Understanding the structure of the BrandSwitcher component helps ensure proper implementation and customization.
| Property | Description | Type |
|---|---|---|
| root | Slot rendered into [data-slot="brand-switcher"]. | Root |
| brandSwitcher | Brand switcher region of the component. | Part |
| sectionCard | Section card region of the component. | Part |
| sectionHeader | Section header region of the component. | Part |
| sectionTitle | Section title region of the component. | Part |
| selectedBrandInfo | Selected brand info region of the component. | Part |
| selectedBrandDot | Selected brand dot region of the component. | Part |
| selectedBrandName | Selected brand name region of the component. | Part |
| selectedBrandMood | Selected brand mood region of the component. | Part |
| swatchGrid | Swatch grid region of the component. | Part |
| swatchBtn | Swatch btn region of the component. | Part |
| swatchDot | Swatch dot region of the component. | Part |
| densitySlider | Density slider region of the component. | Part |
| densityLabel | Density label region of the component. | Part |
| rangeInput | Range input region of the component. | Part |
| densityTicks | Density ticks region of the component. | Part |
| densityTick | Density tick region of the component. | Part |
| segmentedControl | Segmented control region of the component. | Part |
| segment | Segment region of the component. | Part |
| segmentActive | Segment active region of the component. | Part |
| subsection | Subsection region of the component. | Part |
| subsectionLabel | Subsection label region of the component. | Part |
| keyboardHint | Keyboard hint region of the component. | Part |
| kbd | Kbd region of the component. | Part |
Variants & States
API Reference
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
showAutoCycle | boolean | No | false | — |
showDensity | boolean | No | false | — |
showFonts | boolean | No | false | — |
compact | boolean | No | false | — |
sticky | boolean | No | false | — |
enableKeyboard | boolean | No | true | — |
className | string | No | {containerClasses | — |
Methods
| Name | Parameters | Returns | Description |
|---|---|---|---|
getFontFamily | font: string | void | — |
Accessibility
Standards Compliance
This component follows WCAG 2.1 AA guidelines and includes proper ARIA attributes, keyboard navigation, and screen reader support.
Accessibility Checklist
- ○ Keyboard navigation support
- ○ Screen reader compatibility
- ○ Color contrast compliance
- ○ Focus management
- ○ ARIA attributes
- ○ Reduced motion support
Usage Guidelines
Do
- Use consistent spacing and sizing
- Follow established patterns
- Provide clear labels and descriptions
- Test with assistive technologies
Don't
- Override core functionality
- Use without proper context
- Ignore accessibility requirements
- Modify without design system approval
Examples
Advanced Usage
Complex patterns including composition, state management, and real-world scenarios.
Development Tools
Use these tools to analyze the component's performance, design tokens, and accessibility during development.
Contribute
Help us improve the BrandSwitcher component documentation. Found an issue or have suggestions?