Product Switcher

Version 3.0.2Github Storybook

A Product Switcher is an opinionated Menu that presents a list of Twilio products that a user has access to and can switch between.

const ProductSwitcherMenu = () => {
  const productSwitcher = useProductSwitcherState();
  const [product, setProduct] = React.useState('twilio');
  return (
    <>
      <ProductSwitcherButton {...productSwitcher} i18nButtonLabel="Switch products" />
      <ProductSwitcher {...productSwitcher} aria-label="Available products">
        <ProductSwitcherItem
          {...productSwitcher}
          name="product"
          value="twilio"
          checked={product === 'twilio'}
          onChange={(e) => {
            setProduct('twilio');
          }}
          productName="Twilio"
          productStrapline="SMS, Voice & Video"
          productIcon={<LogoTwilioIcon decorative />}
        />
        <ProductSwitcherItem
          {...productSwitcher}
          name="product"
          value="segment"
          checked={product === 'segment'}
          onChange={(e) => {
            setProduct('segment');
          }}
          productName="Segment"
          productStrapline="Customer data platform"
          productIcon={<ProductSegmentIcon decorative />}
        />
        <ProductSwitcherItem
          {...productSwitcher}
          name="product"
          value="flex"
          checked={product === 'flex'}
          onChange={(e) => {
            setProduct('flex');
          }}
          productName="Flex"
          productStrapline="Cloud-based contact center"
          productIcon={<ProductFlexIcon decorative />}
        />
        <ProductSwitcherItem
          {...productSwitcher}
          name="product"
          value="sendgrid"
          checked={product === 'sendgrid'}
          onChange={(e) => {
            setProduct('sendgrid');
          }}
          productName="SendGrid"
          productStrapline="Email delivery and API"
          productIcon={<ProductEmailAPIIcon decorative />}
        />
        <ProductSwitcherItem
          {...productSwitcher}
          name="product"
          value="admin"
          checked={product === 'admin'}
          onChange={(e) => {
            setProduct('admin');
          }}
          productName="Console Admin"
          productStrapline="Admin center"
          productIcon={<LogoTwilioIcon decorative />}
        />
      </ProductSwitcher>
    </>
  );
};

render(
  <ProductSwitcherMenu />
)

Guidelines

About Product Switcher

Product Switcher is an implementation of Menu that shows the Twilio products a user has access to and can switch between.

It's a mechanism to jump between top-level Twilio product applications such as Twilio Console, Segment, SendGrid, and Flex. It is ideally placed in the application Topbar.

Accessibility

The Product Switcher implements a Menu and supports all the same keyboard navigation that the Menu component does.

Composition Notes

The Product Switcher is made up of the following sub-components:

ProductSwitcherButton
ProductSwitcher
ProductSwitcherItem
useProductSwitcherState

Product Switcher Button

Product Switcher Button is a composed icon-only Menu Button.

Product Switcher

Container for Product Switcher menu items.

Product Switcher Item

A radio menu item that can either perform an action or navigate to a new url. It can show the currently selected product the user is in. Only one product can be selected at a time via the checked property. Ensure that the Items all belong to the same group by sharing a name.

useProductSwitcherState hook

React Hook used to initialise the Product Switcher with various options. It returns state and actions that can be taken on the Product Switcher.