Skip to contentSkip to navigationSkip to topbar
Paste
FigmaStar

Product Switcher

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

Version 3.0.2
Github
Storybook

Installation

Installation page anchor
yarn add @twilio-paste/product-switcher - or - yarn add @twilio-paste/product-switcher

Usage

Usage page anchor
import {
  ProductSwitcher,
  ProductSwitcherButton,
  ProductSwitcherItem,
  useProductSwitcherState,
} from '@twilio-paste/core/product-switcher';

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>
    </>
  );
};

Props

Props page anchor

ProductSwitcher

ProductSwitcher page anchor

aria-label RequiredRequired

Defines a string value that labels the current element.

Type
string

baseId RequiredRequired

ID that will serve as a base for all the items IDs.

Type
string

first RequiredRequired

Moves focus to the first item.

Type
() => void

items RequiredRequired

Lists all the composite items with their id, DOM ref, disabled state and groupId if any. This state is automatically updated when registerItem and unregisterItem are called.

Type
Item[]

last RequiredRequired

Moves focus to the last item.

Type
() => void

move RequiredRequired

Moves focus to a given item ID.

Type
(id: string | null) => void

next RequiredRequired

Moves focus to the next item.

Type
(unstable_allTheWay?: boolean | undefined) => void

placement RequiredRequired

Actual placement.

Type
Placement

previous RequiredRequired

Moves focus to the previous item.

Type
(unstable_allTheWay?: boolean | undefined) => void

setCurrentId RequiredRequired

Sets currentId. This is different from composite.move as this only updates the currentId state without moving focus. When the composite widget gets focused by the user, the item referred by the currentId state will get focus.

Type
Dispatch<SetStateAction<string | null | undefined>>

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'PRODUCT_SWITCHER'

ProductSwitcherItem

ProductSwitcherItem page anchor

down RequiredRequired

Moves focus to the item below.

Type
(unstable_allTheWay?: boolean | undefined) => void

first RequiredRequired

Moves focus to the first item.

Type
() => void

items RequiredRequired

Lists all the composite items with their id, DOM ref, disabled state and groupId if any. This state is automatically updated when registerItem and unregisterItem are called.

Type
Item[]

last RequiredRequired

Moves focus to the last item.

Type
() => void

move RequiredRequired

Moves focus to a given item ID.

Type
(id: string | null) => void

name RequiredRequired

MenuItemRadio's name as in menu.values.

Type
string

next RequiredRequired

Moves focus to the next item.

Type
(unstable_allTheWay?: boolean | undefined) => void

previous RequiredRequired

Moves focus to the previous item.

Type
(unstable_allTheWay?: boolean | undefined) => void

productIcon RequiredRequired

Icon to use for the ProductSwitcherItem. Use a Paste Icon.

Type
NonNullable<ReactNode>
Default
'PRODUCT_SWITCHER_ITEM'

productName RequiredRequired

Name of the ProductSwitcherItem.

Type
string

productStrapline RequiredRequired

Subtext for the ProductSwitcherItem.

Type
string

registerItem RequiredRequired

Registers a composite item.

Type
(item: Item) => void

setCurrentId RequiredRequired

Sets currentId. This is different from composite.move as this only updates the currentId state without moving focus. When the composite widget gets focused by the user, the item referred by the currentId state will get focus.

Type
Dispatch<SetStateAction<string | null | undefined>>

unregisterItem RequiredRequired

Unregisters a composite item.

Type
(id: string) => void

unstable_setValue RequiredRequired

Updates checkboxes and radios values within the menu.

Type
(name: string, value?: any) => void

unstable_values RequiredRequired

Stores the values of radios and checkboxes within the menu.

Type
Record<string, any>

up RequiredRequired

Moves focus to the item above.

Type
(unstable_allTheWay?: boolean | undefined) => void

value RequiredRequired

Same as the value attribute.

Type
| string | number | (string & readonly string[]) | (number & readonly string[])

as

Type
any

element

Overrides the default element name to apply unique styles with the Customization Provider.

Type
string
Default
'PRODUCT_SWITCHER_ITEM'

href

Pass href prop to render an anchor element.

Type
string

ProductSwitcherButton

ProductSwitcherButton page anchor

baseId RequiredRequired

ID that will serve as a base for all the items IDs.

Type
string

first RequiredRequired

Moves focus to the first item.

Type
() => void

i18nButtonLabel RequiredRequired

Accessible label for the ProductSwitcherButton used by screen readers.

Type
string

last RequiredRequired

Moves focus to the last item.

Type
() => void

placement RequiredRequired

Actual placement.

Type
Placement

show RequiredRequired

Changes the visible state to true

Type
() => void

toggle RequiredRequired

Toggles the visible state

Type
() => void

as

The HTML tag to replace the default <button> tag.

Type
keyof IntrinsicElements
Default
'button'

element

Overrides the default element name to apply unique styles with the Customization Provider.

Type
string
Default
'PRODUCT_SWITCHER_BUTTON'

fullWidth

Sets the Button width to 100% of the parent container.

Type
boolean

href

A URL to route to. Must use as="a" for this prop to work.

Type
string
Default
null

i18nExternalLinkLabel

Title for showExternal icon

Type
string
Default
'(link takes you to an external page)'

loading

Prevent actions and show a loading spinner

Type
boolean

pressed

Sets the aria-pressed attribute. Must be used with 'secondary' or 'secondary_icon' variants.

Type
boolean

target

Type
string