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

import React from 'react';
import BrandSwitcher from './components/BrandSwitcher';
import props from '/props.json';

export default function App() {
  return (
    <div style={{ padding: '2rem', display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh' }}>
      <BrandSwitcher {...props}>
        {props.children || 'Example brandswitcher content'}
      </BrandSwitcher>
    </div>
  );
}

Anatomy

Understanding the structure of the BrandSwitcher component helps ensure proper implementation and customization.

Property Description Type
rootSlot rendered into [data-slot="brand-switcher"].Root
brandSwitcherBrand switcher region of the component.Part
sectionCardSection card region of the component.Part
sectionHeaderSection header region of the component.Part
sectionTitleSection title region of the component.Part
selectedBrandInfoSelected brand info region of the component.Part
selectedBrandDotSelected brand dot region of the component.Part
selectedBrandNameSelected brand name region of the component.Part
selectedBrandMoodSelected brand mood region of the component.Part
swatchGridSwatch grid region of the component.Part
swatchBtnSwatch btn region of the component.Part
swatchDotSwatch dot region of the component.Part
densitySliderDensity slider region of the component.Part
densityLabelDensity label region of the component.Part
rangeInputRange input region of the component.Part
densityTicksDensity ticks region of the component.Part
densityTickDensity tick region of the component.Part
segmentedControlSegmented control region of the component.Part
segmentSegment region of the component.Part
segmentActiveSegment active region of the component.Part
subsectionSubsection region of the component.Part
subsectionLabelSubsection label region of the component.Part
keyboardHintKeyboard hint region of the component.Part
kbdKbd region of the component.Part

Variants & States

import React from 'react';
import BrandSwitcher from './components/BrandSwitcher';
import props from '/props.json';

export default function App() {
  return (
    <div style={{ padding: '2rem', display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh' }}>
      <BrandSwitcher {...props}>
        {props.children || 'Example brandswitcher content'}
      </BrandSwitcher>
    </div>
  );
}

API Reference

Props

NameTypeRequiredDefaultDescription
showAutoCyclebooleanNofalse—
showDensitybooleanNofalse—
showFontsbooleanNofalse—
compactbooleanNofalse—
stickybooleanNofalse—
enableKeyboardbooleanNotrue—
classNamestringNo{containerClasses—

Methods

NameParametersReturnsDescription
getFontFamilyfont: stringvoid—

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

Basic Usage

Simple implementation with default props and common configurations.

import React from 'react';
import BrandSwitcher from './components/BrandSwitcher';
import props from '/props.json';

export default function App() {
  return (
    <div style={{ padding: '2rem', display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh' }}>
      <BrandSwitcher {...props}>
        {props.children || 'Example brandswitcher content'}
      </BrandSwitcher>
    </div>
  );
}

Advanced Usage

Complex patterns including composition, state management, and real-world scenarios.

import React from 'react';

export default function App() {
  return (
    <div style={{ 
      padding: '2rem', 
      display: 'flex',
      flexDirection: 'column',
      gap: '1.5rem'
    }}>
      <h3>BrandSwitcher - Advanced Patterns</h3>
      <p>Advanced usage patterns for BrandSwitcher include:</p>
      <ul>
        <li>Composition with other components</li>
        <li>Custom styling and theming</li>
        <li>Controlled vs uncontrolled patterns</li>
        <li>Form integration</li>
        <li>Accessibility enhancements</li>
      </ul>
      <p style={{ color: '#6b7280', fontStyle: 'italic' }}>
        Full advanced examples coming soon.
      </p>
    </div>
  );
}

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?

Related Components