> Avatar

Avatar

Avatar avec image ou texte, de différentes tailles. Composant de type Avatar (tamagui).

TagsuiInformationsFigmaExemples3StylesDisponibles

Sizes

export const Sizes = () => (
  <Box style={styleContainer}>
    <Avatar size="xs" src="https://picsum.photos/100/200" />
    <Avatar size="sm" src="https://picsum.photos/100/200" />
    <Avatar size="md" src="https://picsum.photos/100/200" />
    <Avatar size="lg" src="https://picsum.photos/100/200" />
    <Avatar size="xl" src="https://picsum.photos/100/200" />
  </Box>
);

WithFallbackText

export const WithFallbackText = () => (
  <Box style={styleContainer}>
    <Avatar size="lg" fallbackText="Jean Pierre" />
    <Avatar size="md" fallbackText="Jean Pierre" />
  </Box>
);

Carre

export const Carre = () => (
  <Box style={styleContainer}>
    <Avatar size="xs" src="https://picsum.photos/100/200" carre />
    <Avatar size="sm" src="https://picsum.photos/100/200" carre />
    <Avatar size="md" src="https://picsum.photos/100/200" carre />
    <Avatar size="lg" src="https://picsum.photos/100/200" carre />
    <Avatar size="xl" src="https://picsum.photos/100/200" carre />
  </Box>
);

Alveole UI Kit — v1.8.4