UserInfo

ReactProps

Github Storybook Markdown Copy for LLM

A compact signed-in user summary with avatar, name, and email for panel footers and similar surfaces.

Import

import { UserInfo } from "@cfa/react-core";

Live Editor

Use UserInfo in panel footers, side navigation shells, and other compact surfaces that need a consistent signed-in user block.

Guidelines

When to use

• UserInfo is a name paired with an Avatar.

Do

• Always pair Avatar with at least a name. Initials or image alone force people to guess identity.
• Limit UserInfo to a name plus one or two supporting details, such as a role, email, or timestamp.
• Keep name, role, and image from the same account record so identity stays consistent everywhere UserInfo appears.
• Use a horizontal layout in headers, rows, and inline attribution. Use a vertical layout in profile displays.
• Keep Avatar size consistent within a list or table column. Truncate long names in dense layouts.
• When UserInfo opens a Menu, such as an account header, treat it as the Menu trigger.
• When the name is visible, treat the Avatar image as decorative and use empty alt.
• When UserInfo is a Menu trigger, expose expanded state and return focus to UserInfo when the Menu closes.

Avoid

• Using UserInfo for a standalone portrait. Use Avatar.
• Using UserInfo for non-identity two-line labels.
• Putting extra data on UserInfo. Extra data belongs on a profile Panel.

Examples

In SideNavigation

Compose UserInfo through the footer prop on SideNavigation. Place other footer content or navigation items separately when needed.

<SideNavigation
  aria-label="Application navigation"
  header={/* panel title */}
  items={items}
  footer={
    <UserInfo
      name="Truett Cathy"
      email="[email protected]"
      initials="TC"
    />
  }
>
  {children}
</SideNavigation>