Persona

API

Generated CoreAI prop summaries, not replacement type declarations. Most native DOM/event and ARIA props are omitted. ? means optional; JSDoc shows defaults, deprecations, and conditional requirements. Defaults assume the standard CoreAI provider.

Persona API

A Persona is a visual representation of a person or status that showcases an Avatar, PresenceBadge, or an Avatar with a PresenceBadge.

interface PersonaProps {
  as?: "div";

  /**
   * Avatar to display.
   *
   * If a PresenceBadge and an Avatar are provided, the Avatar will display the PresenceBadge as its presence.
   */
  avatar?: WithSlotShorthandValue<Omit<ComponentProps<AvatarSlots>, "color"> & { active?: "active" | "inactive" | "unset"; activeAppearance?: "ring" | "shadow" | "ring-shadow"; color?: "brand" | "neutral" | "colorful" | AvatarNamedColor | undefined; idForColor?: string | undefined; name?: string | undefined; shape?: AvatarShape | undefined; size?: AvatarSize | undefined; } & RefAttributes<HTMLSpanElement>> | null | undefined;

  children?: any;

  className?: string;

  /**
   * 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`.
   */
  name?: string;

  /**
   * PresenceBadge to display.
   *
   * If `presenceOnly` is true, the PresenceBadge will be displayed instead of the Avatar.
   */
  presence?: WithSlotShorthandValue<Omit<ComponentProps<Pick<BadgeSlots, "root" | "icon">>, "color"> & Pick<BadgeProps, "size"> & { status?: PresenceBadgeStatus; outOfOffice?: boolean; } & RefAttributes<HTMLDivElement>> | null | undefined;

  /**
   * Whether to display only the presence.
   * @default false
   */
  presenceOnly?: boolean;

  /**
   * 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.
   */
  primaryText?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  /**
   * The fourth line of text in the Persona.
   */
  quaternaryText?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  ref?: Ref<HTMLDivElement>;

  /**
   * The second line of text in the Persona.
   */
  secondaryText?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  /**
   * The size of a Persona and its text.
   * @default medium
   */
  size?: "small" | "medium" | "large" | "extra-large" | "extra-small" | "huge";

  style?: CSSProperties;

  /**
   * The third line of text in the Persona.
   */
  tertiaryText?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  /**
   * The vertical alignment of the text relative to the avatar/presence.
   * @default start
   */
  textAlignment?: "center" | "start";

  /**
   * The position of the text relative to the avatar/presence.
   * @default after
   */
  textPosition?: "below" | "before" | "after";
}