Skip to contentSkip to navigationSkip to topbar
Figma
Star

User Dialog

User dialog is a menu that contains user profile-related actions.

Version 2.1.1
Github
Component preview theme
const UserDialogExample = () => {
const userDialogList = useUserDialogListState()
const [selected, setSelected] = React.useState()
const id1 = useUID();
const id2 = useUID();
const id3 = useUID();
return (
<UserDialogContainer name="User Name" icon={UserIcon} baseId="i-am-user-dialog">
<UserDialog aria-label="user menu">
<UserDialogUserInfo>
<UserDialogUserName>Name</UserDialogUserName>
<UserDialogUserEmail>email@email.com</UserDialogUserEmail>
</UserDialogUserInfo>
<UserDialogList {...userDialogList} aria-label="User menu actions">
<UserDialogListItem
{...userDialogList}
key={id1}
selected={selected === id1}
onSelect={() => setSelected(id1)}
>
<UserIcon decorative />
Item
</UserDialogListItem>
<UserDialogSeparator />
<UserDialogListItem
{...userDialogList}
key={id2}
selected={selected === id2}
onSelect={() => setSelected(id2)}
href="https://www.google.com"
>
<UserIcon decorative />
Item
</UserDialogListItem>
<UserDialogSeparator />
<UserDialogListItem
{...userDialogList}
key={id3}
selected={selected === id3}
onSelect={() => setSelected(id3)}
>
<ThemeIcon decorative />
<Box width="100%" display="flex" justifyContent="space-between">
Theme
<Badge variant="decorative10" as="span" size="small">
Light
</Badge>
</Box>
</UserDialogListItem>
<UserDialogSeparator />
<UserDialogListItem {...userDialogList} key="4" selected={selected === '4'} onSelect={() => setSelected('4')}>
<TranslationIcon decorative />
<Box width="100%" display="flex" justifyContent="space-between">
Language
<Badge variant="decorative10" as="span" size="small">
EN
</Badge>
</Box>
</UserDialogListItem>
</UserDialogList>
</UserDialog>
</UserDialogContainer>
);
}
render(
<UserDialogExample/>
)

Guidelines

Guidelines page anchor

About User Dialog

About User Dialog page anchor

A User Dialog is a composition of Avatar, Button, the Non-Modal Dialog primitive, and the Listbox primitive that opens a dialog of profile-related actions. These actions can include visiting a user settings page, switching the language of a product, or logging out.

When the user is focused on the User Dialog Button, enter and space open the menu.

When the user is focused on a list item, the following keyboard interactions apply:

  • Enter and space select the current menu item
  • Up and down arrows move the user between the menu items
  • Disabled menu items and separators are never focused

Use a User Dialog to display actions that a user can trigger related to their profile. Add separators to group menu items.

User Dialog works similarly to Avatar, in that you may use either initials, an image, or a Paste Icon to represent the user. Pass name/src/icon to UserDialogContainer.

In order to use links as options for the UserDialogList items, provide the href prop to the UserDialogListItem.

Component preview theme
const UserDialogExample = () => {
const userDialogList = useUserDialogListState()
const [selected, setSelected] = React.useState()
const id1 = useUID();
const id2 = useUID();
const id3 = useUID();
return (
<UserDialogContainer name="User Name" icon={UserIcon} baseId="i-am-user-dialog" src="/images/avatars/avatar3.png" >
<UserDialog aria-label="user menu">
<UserDialogUserInfo>
<UserDialogUserName>Name</UserDialogUserName>
<UserDialogUserEmail>email@email.com</UserDialogUserEmail>
</UserDialogUserInfo>
<UserDialogList {...userDialogList} aria-label="User menu actions">
<UserDialogListItem
{...userDialogList}
key={id1}
selected={selected === id1}
onSelect={() => setSelected(id1)}
>
<UserIcon decorative />
Item
</UserDialogListItem>
<UserDialogSeparator />
<UserDialogListItem
{...userDialogList}
key={id2}
selected={selected === id2}
onSelect={() => setSelected(id2)}
href="https://www.google.com"
>
<UserIcon decorative />
Item
</UserDialogListItem>
<UserDialogSeparator />
<UserDialogListItem
{...userDialogList}
key={id3}
selected={selected === id3}
onSelect={() => setSelected(id3)}
>
<ThemeIcon decorative />
<Box width="100%" display="flex" justifyContent="space-between">
Theme
<Badge variant="decorative10" as="span" size="small">
Light
</Badge>
</Box>
</UserDialogListItem>
<UserDialogSeparator />
<UserDialogListItem {...userDialogList} key="4" selected={selected === '4'} onSelect={() => setSelected('4')}>
<TranslationIcon decorative />
<Box width="100%" display="flex" justifyContent="space-between">
Language
<Badge variant="decorative10" as="span" size="small">
EN
</Badge>
</Box>
</UserDialogListItem>
</UserDialogList>
</UserDialog>
</UserDialogContainer>
);
}
render(
<UserDialogExample/>
)