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.