yarn add @twilio-paste/user-dialog - or - yarn add @twilio-paste/core
import {UserDialog} from '@twilio-paste/core/user-dialog';
const UserDialogExample = () => {
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>
);
};
aria-label RequiredRequired
Accessible label for the User Dialog
- Type
string
element
Overrides the default element name to apply unique styles with the Customization Provider.
- Type
any- Default
USER_DIALOG
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
name RequiredRequired
Provides name for the Avatar initials
- Type
string
icon
Provides an icon for the Avatar
- Type
FC<any>
src
Provides an image for the Avatar
- Type
string
state
useUserDialog state hook return value
- Type
any
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider.
- Type
any- Default
USER_DIALOG_USER_INFO
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider.
- Type
any- Default
USER_DIALOG_USER_NAME
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider.
- Type
any- Default
USER_DIALOG_USER_EMAIL
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
aria-label RequiredRequired
Accessible description of the list
- Type
string
element
Overrides the default element name to apply unique styles with the Customization Provider.
- Type
any- Default
USER_DIALOG_LIST
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider.
- Type
any- Default
USER_DIALOG_LIST_ITEM
href
Providing an href will make the list item an <a> tag
- Type
string
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.