Persona

A component that represents a person and their status.

Theming

The Persona component is a multipart component. The styling needs to be applied to each part specifically.

To learn more about styling multipart components, visit the Chakra UI Component Style page.

Anatomy

  • container
  • details
  • avatar
  • label
  • secondaryLabel
  • tertiaryLabel

Default theme

import {
  createMultiStyleConfigHelpers,
  defineStyle,
} from '@chakra-ui/styled-system'
import { personaAnatomy } from '@saas-ui/theme/anatomy'
const { definePartsStyle, defineMultiStyleConfig } =
  createMultiStyleConfigHelpers(personaAnatomy.keys)


const baseStyleLabel = defineStyle((props) => {
  return {
    color: 'gray.500',
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    textOverflow: 'ellipsis',
    minW: 0,
    _dark: {
      color: 'whiteAlpha.600',
    },
  }
})


const baseStyle = definePartsStyle((props) => {
  return {
    details: {
      minW: 0,
    },
    secondaryLabel: baseStyleLabel(props),
    tertiaryLabel: baseStyleLabel(props),
  }
})


const sizes = {
  '2xs': definePartsStyle({
    details: { ms: 2 },
    label: {
      fontSize: 'xs',
    },
    secondaryLabel: { display: 'none' },
    tertiaryLabel: { display: 'none' },
  }),
  xs: definePartsStyle({
    details: { ms: 2 },
    label: {
      fontSize: 'md',
    },
    secondaryLabel: { display: 'none' },
    tertiaryLabel: { display: 'none' },
  }),
  sm: definePartsStyle({
    details: { ms: 2 },
    label: { fontSize: 'md' },
    secondaryLabel: { fontSize: 'sm' },
    tertiaryLabel: { display: 'none' },
  }),
  md: definePartsStyle({
    details: { ms: 2 },
    label: {
      fontSize: 'md',
    },
    secondaryLabel: {
      fontSize: 'sm',
    },
    tertiaryLabel: { display: 'none' },
  }),
  lg: definePartsStyle({
    details: { ms: 3 },
    label: {
      fontSize: 'md',
    },
    secondaryLabel: {
      fontSize: 'sm',
    },
    tertiaryLabel: {
      fontSize: 'sm',
    },
  }),
  xl: definePartsStyle({
    details: { ms: 3 },
    label: {
      fontSize: 'xl',
    },
    secondaryLabel: {
      fontSize: 'md',
    },
    tertiaryLabel: { fontSize: 'md' },
  }),
  '2xl': definePartsStyle({
    details: { ms: 4 },
    label: {
      fontSize: '2xl',
    },
    secondaryLabel: {
      fontSize: 'lg',
    },
    tertiaryLabel: { fontSize: 'lg' },
  }),
}


export const personaTheme = defineMultiStyleConfig({
  defaultProps: {
    size: 'md',
  },
  baseStyle,
  sizes,
})

Customize the theme

import { extendTheme } from '@chakra-ui/react'


const theme = extendTheme({
  components: {
    SuiPersona: {
      baseStyle: {
        container: {
          bg: 'gray.100',
        },
      },
    },
  },
})

Was this helpful?