Documentation Index
Fetch the complete documentation index at: https://mintlify.com/Twilio-labs/paste/llms.txt
Use this file to discover all available pages before exploring further.
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
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>jane.doe@example.com</UserDialogUserEmail>
</UserDialogUserInfo>
<UserDialogList>
<UserDialogListItem href="/profile">
Profile Settings
</UserDialogListItem>
<UserDialogListItem href="/preferences">
Preferences
</UserDialogListItem>
<UserDialogSeparator />
<UserDialogListItem onClick={handleSignOut}>
Sign Out
</UserDialogListItem>
</UserDialogList>
</UserDialog>
</UserDialogContainer>
);
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
