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?