Persona

A composite component that combines an avatar, name, and title to represent a person or profile.

Justice Chimobi

Frontend Engineer, Creator Fidely UI

import { Persona } from '@fidely-ui/react/persona'

export const PersonaBasics = () => {
  return (
    <Persona
      name="Justice Chimobi"
      title="Frontend Engineer, Creator Fidely  UI"
      img={'https://avatars.githubusercontent.com/u/74328318?v=4'}
      imgSize="xl"
    />
  )
}

Usage

import { Persona } from '@fidely-ui/react'

<Persona
  name="Justice Chimobi"
  title="Frontend Engineer"
  img="justice-chimobi.png"
  imgSize="md"
/>

The Persona component is made up of the following parts:

Avatar — Displays the user’s image or initials.

Name — The main text, typically the person’s full name.

Title — A secondary text, usually representing the role or description.

Examples

Horizontal Layout

Use the default layout to display the avatar beside the text.

Leanne Graham

harness real-time e-markets

import { Persona } from '@fidely-ui/react/persona'

export const PersonaHorizontal = () => {
  return (
    <Persona
      name="Leanne Graham"
      title="harness real-time e-markets"
      img={'http://bit.ly/47jPX1D'}
      imgSize="xl"
    />
  )
}

Vertical Layout

Use the orientation="vertical" prop to stack the avatar above the text.

Ervin Howell

synergize scalable supply-chains

import { Persona } from '@fidely-ui/react/persona'

export const PersonaVertical = () => {
  return (
    <Persona
      name="Ervin Howell"
      title="synergize scalable supply-chains"
      img={'http://bit.ly/43kBcJt'}
      imgSize="xl"
      orientation="vertical"
    />
  )
}

Custom Sizes

Adjust the avatar size using the imgSize prop.

Kurtis Weissna

generate enterprise e-tailers

import { Persona, Tabs } from '@fidely-ui/react'

export const PersonaSizes = () => {
  const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const

  return (
    <Tabs.Root defaultValue="md" variant="outline">
      <Tabs.List>
        {sizes.map((size) => (
          <Tabs.Trigger
            key={size}
            value={size}
            _selected={{ color: 'orange.9' }}
          >
            {size}
          </Tabs.Trigger>
        ))}
      </Tabs.List>

      {sizes.map((size) => (
        <Tabs.Content key={size} value={size}>
          <Persona
            name="Kurtis Weissna"
            title="generate enterprise e-tailers"
            img="http://bit.ly/47jPX1D"
            imgSize={size}
          />
        </Tabs.Content>
      ))}
    </Tabs.Root>
  )
}

Props

Prop	Type	Default	Description
`name`	`string`	—	The main text displayed as the person’s name.
`title`	`string`	—	Secondary text that represents the person’s role or description.
`img`	`string`	—	The source URL or path of the person’s avatar image.
`imgSize`	`"sm" \| "md" \| "lg" \| "xl"`	`"md"`	Controls the size of the avatar image.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Defines the layout direction of the Persona component.
`spacing`	`string \| number`	`"0.5rem"`	Sets the space between the avatar and text content.