Account API
API reference docs for the React Account component. Learn about the props, CSS, and other APIs of this exported module.
Demos
Import
import { Account } from '@toolpad/core/Account';
// or
import { Account } from '@toolpad/core';Learn about the difference by reading this guide on minimizing bundle size.
Props of the native component are also available.
| Name | Type | Description |
|---|---|---|
| localeText | { iconButtonAriaLabel?: string, signInLabel?: string, signOutLabel?: string } | The labels for the account component. |
| slotProps | { popover?: object, popoverContent?: object, preview?: { handleClick?: func, open?: bool, slotProps?: { avatar?: object, avatarIconButton?: object, moreIconButton?: object }, slots?: { avatar?: elementType, avatarIconButton?: elementType, moreIconButton?: elementType }, sx?: Array<func | object | bool> | func | object, variant?: 'condensed' | 'expanded' }, signInButton?: object, signOutButton?: object } | The props used for each slot inside. |
| slots | { popover?: elementType, popoverContent?: elementType, preview?: elementType, signInButton?: elementType, signOutButton?: elementType } | The components used for each slot inside. See Slots API below for more details. |
The component cannot hold a ref.
| Slot name | Class name | Default component | Description |
|---|---|---|---|
| preview | AccountPreview | The component used for the account preview | |
| popover | Popover | The component used for the account popover menu | |
| popoverContent | Stack | The component used for the content of account popover | |
| signInButton | Button | The component used for the sign in button. | |
| signOutButton | Button | The component used for the sign out button. |
Source code
If you did not find the information in this page, consider having a look at the implementation of the component for more detail.