Skip to contentSkip to navigationSkip to topbar
Figma
Star

Account Switcher

An Account Switcher is a stylized Menu Badge with a list of actions related to a user's accounts.

Version 3.0.1
Github
Component preview theme
const AccountSwitcherMenu = () => {
const accountSwitcher = useAccountSwitcherState();
const [selectedAccount, setSelectedAccount] = React.useState('Owl Telehealth');
return (
<>
<AccountSwitcherBadge {...accountSwitcher} i18nButtonLabel="Switch accounts">
Owl Telehealth
</AccountSwitcherBadge>
<AccountSwitcher {...accountSwitcher} aria-label="Avaiable accounts">
<AccountSwitcherGroup label="Recent accounts">
<AccountSwitcherItemRadio
name="recent_accounts"
value="Owl Telehealth"
checked={selectedAccount === 'Owl Telehealth'}
onChange={() => setSelectedAccount('Owl Telehealth')}
{...accountSwitcher}
>
Owl Telehealth
</AccountSwitcherItemRadio>
<AccountSwitcherItemRadio
name="recent_accounts"
value="Owl Health Demo"
checked={selectedAccount === 'Owl Health Demo'}
onChange={() => setSelectedAccount('Owl Health Demo')}
{...accountSwitcher}
>
Owl Health Demo
</AccountSwitcherItemRadio>
<AccountSwitcherItemRadio
name="recent_accounts"
value="Owl Subway"
checked={selectedAccount === 'Owl Subway'}
onChange={() => setSelectedAccount('Owl Subway')}
{...accountSwitcher}
>
Owl Subway
</AccountSwitcherItemRadio>
</AccountSwitcherGroup>
<AccountSwitcherSeparator />
<AccountSwitcherItem {...accountSwitcher} href="#">
Account settings
</AccountSwitcherItem>
<AccountSwitcherSeparator />
<AccountSwitcherItem {...accountSwitcher} href="#">
View all accounts
</AccountSwitcherItem>
<AccountSwitcherItem {...accountSwitcher} href="#">
View all subaccounts
</AccountSwitcherItem>
<AccountSwitcherSeparator />
<AccountSwitcherItem {...accountSwitcher} href="#">
Admin Center
</AccountSwitcherItem>
</AccountSwitcher>
</>
);
};
render(
<AccountSwitcherMenu />
)

Guidelines

Guidelines page anchor

Account Switcher can be used anywhere a user needs to switch between accounts or sub-accounts, and can usually be found in the Topbar. Other names for accounts in Twilio products include "workspaces" and "projects".

Account Switcher is a stylized Menu Badge, with groups of account options displayed in the menu item list. The Menu Badge itself should display the current account the user is viewing and update if a new account is selected.

Examples of account-related options include:

  • Navigating to recently visited accounts
  • Creating an account
  • Viewing all of a user’s accounts

Account Switcher is an implementation of the Menu component and shares a lot of its sub-components and hooks. That means it shares a lot of the API.

Accessibility

Accessibility page anchor

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

Component preview theme
const AccountSwitcherMenu = () => {
const accountSwitcher = useAccountSwitcherState();
const [selectedAccount, setSelectedAccount] = React.useState('Owl Telehealth');
return (
<>
<AccountSwitcherBadge {...accountSwitcher} i18nButtonLabel="Switch accounts">
Owl Telehealth
</AccountSwitcherBadge>
<AccountSwitcher {...accountSwitcher} aria-label="Avaiable accounts">
<AccountSwitcherGroup label="Recent accounts">
<AccountSwitcherItemRadio
name="recent_accounts"
value="Owl Telehealth"
checked={selectedAccount === 'Owl Telehealth'}
onChange={() => setSelectedAccount('Owl Telehealth')}
{...accountSwitcher}
>
Owl Telehealth
</AccountSwitcherItemRadio>
<AccountSwitcherItemRadio
name="recent_accounts"
value="Owl Health Demo"
checked={selectedAccount === 'Owl Health Demo'}
onChange={() => setSelectedAccount('Owl Health Demo')}
{...accountSwitcher}
>
Owl Health Demo
</AccountSwitcherItemRadio>
<AccountSwitcherItemRadio
name="recent_accounts"
value="Owl Subway"
checked={selectedAccount === 'Owl Subway'}
onChange={() => setSelectedAccount('Owl Subway')}
{...accountSwitcher}
>
Owl Subway
</AccountSwitcherItemRadio>
</AccountSwitcherGroup>
<AccountSwitcherSeparator />
<AccountSwitcherItem {...accountSwitcher} href="#">
Account settings
</AccountSwitcherItem>
<AccountSwitcherSeparator />
<AccountSwitcherItem {...accountSwitcher} href="#">
View all accounts
</AccountSwitcherItem>
<AccountSwitcherItem {...accountSwitcher} href="#">
View all subaccounts
</AccountSwitcherItem>
<AccountSwitcherSeparator />
<AccountSwitcherItem {...accountSwitcher} href="#">
Admin Center
</AccountSwitcherItem>
</AccountSwitcher>
</>
);
};
render(
<AccountSwitcherMenu />
)

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

  • AccountSwitcherBadge
  • AccountSwitcher
  • AccountSwitcherGroup
  • AccountSwitcherItem
  • AccountSwitcherItemRadio
  • AccountSwitcherSeparator
  • useAccountSwitcherState

Used to display the name of the current account selected or being viewed, and contains the menu trigger. The text inside the badge should update when a new account is selected.

Container for Account Switcher menu items.

Used to group similar items together in the Account Switcher menu. An example of this might be a list of recent accounts.

A menu item that can either perform an action or navigate to a new URL.

Account Switcher ItemRadio

Account Switcher ItemRadio page anchor

A menu item that can perform a single selection of an item within a named group. Similar to a radio button group, only one item can be selected at a time. Each item in the group should have a name and value and must be contained in a Group.

Account Switcher Separator

Account Switcher Separator page anchor

Simple horizontal rule used to separate groups or individual items.

useAccountSwitcherState hook

useAccountSwitcherState hook page anchor

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