Persona
A component that represents a person and their status.
Props#
Persona and all sub components accept Box props.
Persona#
| Prop | Type | Default | Description |
|---|---|---|---|
| badgeSize | ResponsiveValue<number | "px" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | ... 62 more ... | "container.2xl"> | The badge size. Defaults to 1em. Use em value to keep the size relative to the avatar. | |
| colorScheme | "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram" | "primary" | "secondary" | "indigo" | The visual color appearance of the component | |
| crossOrigin | "" | "anonymous" | "use-credentials" | ||
| getInitials | (name: string) => string | Function to get the initials to display | |
| hideDetails | boolean | Hide the persona details next to the avatar. | |
| icon | ReactElement<any, string | JSXElementConstructor<any>> | The default avatar used as fallback when name, and src
is not specified. | |
| iconLabel | string | ||
| ignoreFallback | boolean | false | If true, opt out of the avatar's fallback logic and
renders the img at all times. |
| isOutOfOffice | boolean | Indicates that a person is out of office. Changes the presence badge style. | |
| label | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | Primary label of the persona, defaults to the name | |
| loading | "eager" | "lazy" | Defines loading strategy | |
| name | string | The name of the person in the avatar.
- if src has loaded, the name will be used as the alt attribute of the img
- If src is not loaded, the name will be used to create the initials | |
| onError | () => void | Function called when image failed to load | |
| presence | string | The presence status of the person
If set will add an AvatarBadge with color configured in Presence
Default presence options:
- online
- offline
- busy
- dnd
- away | |
| presenceIcon | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | The icon shown in the AvatarBadge | |
| presenceLabel | string | The textual presence status of the person. Online, Offline, Busy, Do-not-disturb or Away | |
| referrerPolicy | HTMLAttributeReferrerPolicy | Defining which referrer is sent when fetching the resource. | |
| secondaryLabel | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | Secondary label, usually the role of the person Only visible from md size and up. | |
| showBorder | boolean | false | If true, the Avatar will show a border around it.
Best for a group of avatars |
| size | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | md | The size of the Persona |
| src | string | The image url of the Avatar | |
| srcSet | string | List of sources to use for different screen resolutions | |
| tertiaryLabel | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | Tertiary label, usually the status of the person. Only visible from lg size and up. | |
| variant | string | The variant of the Persona |
Was this helpful?