Flux

Appearance

Avatar ​

The Avatar component is a versatile UI element designed to display an image, initials, or an icon. It accepts various props to dynamically render the appropriate content based on the provided input. This component is perfect for representing users or any entities that require a visual identifier.

TIP

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

Props

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

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

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

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.

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

type?: "button" | "link" | "route" | "none"
The type of button.
Default: button

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/flux';
</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/flux';
</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/flux';
</script>

Used components ​