Skip to main content

​
About User Dialog

User Dialog is a non-modal popover that displays user information and account-related actions. It’s typically triggered by a user avatar in the application header and provides quick access to profile settings, sign out, and other user-specific options.

​
Components

  • UserDialogContainer - Manages dialog state
  • UserDialog - Main popover dialog
  • UserDialogUserInfo - User profile section
  • UserDialogUserName - Display name
  • UserDialogUserEmail - Email address
  • UserDialogList - Action list container
  • UserDialogListItem - Individual action
  • UserDialogSeparator - Visual divider
  • useUserDialogState - State management hook

​
Installation

yarn add @twilio-paste/user-dialog

​
Usage

import {
  UserDialogContainer,
  UserDialog,
  UserDialogUserInfo,
  UserDialogUserName,
  UserDialogUserEmail,
  UserDialogList,
  UserDialogListItem,
  UserDialogSeparator
} from '@twilio-paste/user-dialog';

const MyUserDialog = () => (
  <UserDialogContainer name="Jane Doe" icon={UserIcon}>
    <UserDialog aria-label="User menu">
      <UserDialogUserInfo>
        <UserDialogUserName>Jane Doe</UserDialogUserName>
        <UserDialogUserEmail>[email protected]</UserDialogUserEmail>
      </UserDialogUserInfo>
      <UserDialogList>
        <UserDialogListItem href="/profile">
          Profile Settings
        </UserDialogListItem>
        <UserDialogListItem href="/preferences">
          Preferences
        </UserDialogListItem>
        <UserDialogSeparator />
        <UserDialogListItem onClick={handleSignOut}>
          Sign Out
        </UserDialogListItem>
      </UserDialogList>
    </UserDialog>
  </UserDialogContainer>
);

​
Props

​
UserDialogContainer

​
UserDialog

​
UserDialogUserName

​
UserDialogUserEmail

​
UserDialogList

​
UserDialogListItem

​
State Management

For advanced control, use the state hook: 
import { useUserDialogState } from '@twilio-paste/user-dialog';

const userDialogState = useUserDialogState();

// Access state methods
userDialogState.show();
userDialogState.hide();
userDialogState.toggle();

​
Avatar Options

​
With Image

<UserDialogContainer
  name="Jane Doe"
  src="https://example.com/avatar.jpg"
>
  {/* dialog content */}
</UserDialogContainer>

​
With Icon

import { UserIcon } from '@twilio-paste/icons/esm';

<UserDialogContainer
  name="Jane Doe"
  icon={UserIcon}
>
  {/* dialog content */}
</UserDialogContainer>

​
With Initials (default)

<UserDialogContainer name="Jane Doe">
  {/* dialog content - shows "JD" */}
</UserDialogContainer>

​
Common Actions

Typical user dialog actions: 
<UserDialogList>
  <UserDialogListItem href="/profile">Profile</UserDialogListItem>
  <UserDialogListItem href="/settings">Settings</UserDialogListItem>
  <UserDialogListItem href="/billing">Billing</UserDialogListItem>
  <UserDialogSeparator />
  <UserDialogListItem href="/help">Help & Support</UserDialogListItem>
  <UserDialogSeparator />
  <UserDialogListItem onClick={handleSignOut}>Sign Out</UserDialogListItem>
</UserDialogList>

​
Accessibility

  • Dialog requires aria-label for context
  • Uses semantic list markup for actions
  • Keyboard navigation support
  • Focus management on open/close
  • Escape key closes the dialog
  • Click outside closes the dialog

​
Topbar Integration

User Dialog is commonly placed in the Topbar: 
import { Topbar, TopbarActions } from '@twilio-paste/topbar';

<Topbar id="topbar">
  <div>App Name</div>
  <TopbarActions>
    <UserDialogContainer name="Jane Doe">
      <UserDialog aria-label="User menu">
        {/* dialog content */}
      </UserDialog>
    </UserDialogContainer>
  </TopbarActions>
</Topbar>

​
Related components

  • Avatar - User avatar component
  • Topbar - Application header
  • Menu - Menu component

Build docs developers (and LLMs) love

Get started for freeTalk to us