Skip to contentSkip to navigationSkip to topbar
Paste
FigmaStar

User Dialog

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

Version 2.0.1
Github
Storybook
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.

Accessibility

Accessibility page anchor

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

Examples

Examples page anchor

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/>

)

Usage guide

Usage guide page anchor

Figma

Figma page anchor

The User Dialog component is available in the Paste Components library as a Navigation component(link takes you to an external page).

API

API page anchor

Installation

Installation page anchor
yarn add @twilio-paste/user-dialog - or - yarn add @twilio-paste/core

Usage

Usage page anchor
import {UserDialog} from '@twilio-paste/core/user-dialog';

const UserDialog = () => {
  const userDialogList = useUserDialogListState();
  return (
    <UserDialogContainer name="Nora Krantz">
      <UserDialog aria-label="my_user_menu">
        <UserDialogUserInfo>
          <UserDialogUserName>Name</UserDialogUserName>
          <UserDialogUserEmail>email@email.com</UserDialogUserEmail>
        </UserDialogUserInfo>
        <UserDialogList {...userDialogList} aria-label="User menu actions">
          <UserDialogListItem {...userDialogList} onSelect={() => {}}>One</UserDialogListItem>
          <UserDialogListItem {...userDialogList} href="www.#.com"}>Two</UserDialogListItem>
        </UserDialogList>
      </UserDialog>
    </UserDialogContainer>
  );
};

UserDialogContainer props

UserDialogContainer props page anchor
PropTypeDescriptionDefault
childrenNonNullable<React.ReactNode>
state?NonModalDialogPrimitiveStateReturnUser Dialog state hook
namestringProvides name for the Avatar initials
src?stringProvides an image for the Avatar
icon?React.FC<React.PropsWithChildren<GenericIconProps>>Provides an icon for the Avatar

UserDialog props

UserDialog props page anchor
PropTypeDescriptionDefault
childrenReact.ReactNode
aria-labelstringAccessible label for the User Dialog
element?stringOverrides the default element name to apply unique styles with the Customization Provider'USER_DIALOG'

UserDialogUserInfo props

UserDialogUserInfo props page anchor
PropTypeDescriptionDefault
childrenReact.ReactNode
element?stringOverrides the default element name to apply unique styles with the Customization Provider'USER_DIALOG_USER_INFO'

UserDialogUserName props

UserDialogUserName props page anchor
PropTypeDescriptionDefault
childrenReact.ReactNode
element?stringOverrides the default element name to apply unique styles with the Customization Provider'USER_DIALOG_USER_NAME'

UserDialogUserEmail props

UserDialogUserEmail props page anchor
PropTypeDescriptionDefault
childrenReact.ReactNode
element?stringOverrides the default element name to apply unique styles with the Customization Provider'USER_DIALOG_USER_EMAIL'

UserDialogList props

UserDialogList props page anchor
PropTypeDescriptionDefault
childrenReact.ReactNode
element?stringOverrides the default element name to apply unique styles with the Customization Provider'USER_DIALOG_LIST'
aria-labelstringDescription of the list

UserDialogListItem props

UserDialogListItem props page anchor
PropTypeDescriptionDefault
childrenReact.ReactNode
href?stringProviding an href will make the list item an <a> tag
element?stringOverrides the default element name to apply unique styles with the Customization Provider'USER_DIALOG_LIST_ITEM'