Flux

Avatar ​

The avatar displays an image, initials, or an icon to represent a user or entity. It renders the appropriate content based on the props you provide.

TIP

To display a person's name and title along with their avatar, consider using the Persona component.

TIP

The status-icon prop works together with status: the icon replaces the status dot and takes the status color, so status must be set for the icon to appear.

Accessibility

When a src fails to load, the avatar automatically falls back to its initials or icon, so a broken image is never shown. The role="img" attribute is only applied when type is none; for interactive avatars (button, link, route) the underlying element keeps its native role.

Props

alt?: string
A brief description of the image that is shown.

fallback?: "colorized" | "neutral"
How the fallback to initials should look.
Default: colorized

fallback-colors?: string[]
The fallback colors available. Only specify if you want to override the default colorful set.

is-loading?: boolean
Shows a loading spinner over the avatar.

fallback-icon?: FluxIconName
The icon that is used within the fallback.

fallback-initials?: string
The initials that are used for the fallback.

size?: number
The size in pixels of the avatar.

src?: string
The url to the image source that is used in the avatar.

status?: FluxColor
The status dot that is shown within the avatar. E.g. an online status.

status-icon?: FluxIconName
An icon shown instead of the status dot, colored by the status. Requires status to be set.

tabindex?: string | number
The tabindex of the button, works exactly the same as html.

type?: "button" | "link" | "route" | "none"
The pressable type of the avatar. Defaults to a non-interactive image.
Default: none

href?: string
This prop is enabled if the button's type is set to link. It's the same as the <a> HTML element.

rel?: string
This prop is enabled if the button's type is set to link. It's the same as the <a> HTML element.

target?: string
This prop is enabled if the button's type is set to link. It's the same as the <a> HTML element.

to?: FluxTo
This prop is enabled if the button's type is set to route. This integrates with Vue Router.

Emits

click: [MouseEvent]
Triggered when the avatar is clicked.

mouseenter: [MouseEvent]
Triggered when the button is being hovered.

mouseleave: [MouseEvent]
Triggered when the button is not being hovered anymore.

Examples ​

Image with status

Avatars can include statuses to indicate conditions such as online status.

<template>
    <FluxAvatar
        alt="Bas"
        :size="60"
        src="https://avatars.githubusercontent.com/u/978257?v=4"
        status="success"/>
</template>

<script
    lang="ts"
    setup>
    import { FluxAvatar } from '@flux-ui/components';
</script>

Status icon

Set a status-icon to replace the status dot with an icon, colored by the status, to convey richer presence states.

<template>
    <FluxFlex
        align="center"
        :gap="18"
        justify="center"
        wrap="wrap">
        <FluxAvatar
            alt="Bas"
            :size="48"
            src="https://avatars.githubusercontent.com/u/978257?v=4"
            status="success"
            status-icon="circle-check"/>

        <FluxAvatar
            alt="Julian"
            fallback-initials="JS"
            :size="48"
            status="warning"
            status-icon="moon"/>

        <FluxAvatar
            alt="Lotte"
            fallback-initials="LV"
            :size="48"
            status="danger"
            status-icon="circle-minus"/>

        <FluxAvatar
            alt="Sara"
            fallback-initials="SD"
            :size="48"
            status="info"
            status-icon="phone"/>
    </FluxFlex>
</template>

<script
    lang="ts"
    setup>
    import { FluxAvatar, FluxFlex } from '@flux-ui/components';
</script>

Initials

In the absence of an image, avatars can default to using initials.

<template>
    <FluxAvatar
        alt="Bas"
        fallback="colorized"
        fallback-initials="BM"
        :size="60"/>
</template>

<script
    lang="ts"
    setup>
    import { FluxAvatar } from '@flux-ui/components';
</script>

Icon

When no image is available, you can use an icon as a fallback instead of initials.

<template>
    <FluxAvatar
        alt="Bas"
        fallback="neutral"
        fallback-icon="rocket"
        :size="60"/>
</template>

<script
    lang="ts"
    setup>
    import { FluxAvatar } from '@flux-ui/components';
</script>

Used components ​