Avatar

Circle Image.

Example

FP

Props

    🕹ī¸ standard props
    src
    string
    The source URL of the avatar image.
    undefined
    alt
    string
    The alternative text for the avatar image.
    ""
    text
    string
    The fallback text if there is no image or the image is loading.
    undefined
    referrerpolicy
    ReferrerPolicy
    The referrer policy for the avatar image.
    "no-referrer"
    imageLoadingStatus
    'error' | 'success'
    The current loading status of the avatar image.
    "success"
    🎨 style props
    --avatar-width
    size
    The width of the avatar.
    40px
    --avatar-height
    size
    The height of the avatar.
    40px
    --avatar-min-width
    size
    The minimum width of the avatar.
    --avatar-max-width
    size
    The maximum width of the avatar.
    --avatar-min-height
    size
    The minimum height of the avatar.
    --avatar-max-height
    size
    The maximum height of the avatar.
    --avatar-border-radius
    size
    The border radius of the avatar.
    9999px
    --avatar-border
    color
    The border color of the avatar.
    --avatar-background-color
    color
    The background color of the avatar when text is shown.
    rgb(var(--global-color-primary-500))
    --avatar-text-color
    color
    The text color for the fallback text in the avatar.
    rgb(var(--global-color-grey-50))
    --avatar-text-size
    size
    The font size of the fallback text in the avatar.
    calc(var(--avatar-height, var(--avatar-default-height)) - calc(var(--avatar-height, var(--avatar-default-height)) / 1.7))
    --avatar-text-weight
    weight
    The font weight of the fallback text in the avatar.
    700

Slots

    children
    Fallback content when there is no image.
    Default content:
    <div class="avatar">{text || ""}</div>

Events

    No data available