Persona Preview

A persona is a representation of a person with additional contextual information.

Personas usually include an avatar, a presence badge, and up to four lines of text content that provide additional data about that person.

Loading...
Open in CodeSandbox
Persona storybook
React guidance

Properties

as

“div”
Default:
none

avatar

Avatar to display.

If a PresenceBadge and an Avatar are provided, the Avatar will display the PresenceBadge as its presence.

WithSlotShorthandValue<WithSlotRenderFunction<Omit<ComponentProps<AvatarSlots, "root">, "color"> & { active?: "active" | "inactive" | "unset"; activeAppearance?: "ring" | ... 2 more ...; ... 4 more ...; size?: AvatarSize | undefined; } & RefAttributes<...>>> | null | undefined
Default:
none

name

The name of the person or entity represented by the Persona.

When primaryText is not provided, this will be used as the default value for primaryText .

string
Default:
none

presence

PresenceBadge to display.

If presenceOnly is true, the PresenceBadge will be displayed instead of the Avatar.

WithSlotShorthandValue<WithSlotRenderFunction<Omit<ComponentProps<Pick<BadgeSlots, "root" | "icon">, "root">, "color"> & Pick<BadgeProps, "size"> & { ...; } & RefAttributes<...>>> | null
Default:
none

presenceOnly

Whether to display only the presence.

boolean
Default:
false

primaryText

The first line of text in the Persona, larger than the rest of the lines.

primaryText defaults to the name prop. We recomend to only use name , use primaryText when the text is different than the name prop.

WithSlotShorthandValue<{ as?: "span"; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }> | null
Default:
none

quaternaryText

The fourth line of text in the Persona.

WithSlotShorthandValue<{ as?: "span"; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }> | null
Default:
none

secondaryText

The second line of text in the Persona.

WithSlotShorthandValue<{ as?: "span"; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }> | null
Default:
none

size

The size of a Persona and its text.

“small” “extra-small” “medium” “large” “extra-large” “huge”
Default:
“medium”

tertiaryText

The third line of text in the Persona.

WithSlotShorthandValue<{ as?: "span"; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }> | null
Default:
none

textAlignment

The vertical alignment of the text relative to the avatar/presence.

“center” “start”
Default:
“start”

textPosition

The position of the text relative to the avatar/presence.

“before” “after” “below”
Default:
“after”