Open UI

Avatar

Imports

  • Avatar: The main component to display a list of accordion items.
  • AvatarImage: The image component to display the image of the avatar.
  • AvatarFallback: The fallback component to display the fallback of the avatar.

Usage

CN 
import * as React from 'react'
import { Avatar, AvatarImage, AvatarFallback } from '@openlite/ui'
 
function App() {
  return (
    <Avatar>
      <AvatarImage src="/example-gerzon.jpeg" alt="Avatar" className="h-full w-full rounded-md object-cover" />
      <AvatarFallback>GE</AvatarFallback>
    </Avatar>
  )
}

Examples

Size

CNCNCN
import * as React from 'react'
import { Avatar, AvatarImage, AvatarFallback } from '@openlite/ui'
 
function App() {
  return (
    <>
      <Avatar size="lg">
        <AvatarImage src="/example-gerzon.jpeg" alt="Avatar" className="h-full w-full rounded-md object-cover" />
        <AvatarFallback>GE</AvatarFallback>
      </Avatar>
      <Avatar size="md">
        <AvatarImage src="/example-gerzon.jpeg" alt="Avatar" className="h-full w-full rounded-md object-cover" />
        <AvatarFallback>GE</AvatarFallback>
      </Avatar>
      <Avatar size="sm">
        <AvatarImage src="/example-gerzon.jpeg" alt="Avatar" className="h-full w-full rounded-md object-cover" />
        <AvatarFallback>GE</AvatarFallback>
      </Avatar>
    </>
  )
}

API

Avatar Props

PropsTypeDescription
size'xs' | 'sm' | 'md' | 'lg' | 'xl'The size of the avatar.

Previous

Aspect Ratio

Next

Badge

On this page

ImportsUsageExamplesSizeAPIAvatar Props