Flux

Appearance

Persona ​

The Persona component is a versatile Vue component that combines an avatar, name, and title to provide a complete representation of a user or other entity. With the ability to display an image, initials, or an icon, the avatar portion of the component is fully customizable and can be adapted to suit your specific needs. The name and title fields are also customizable and can be used to display any relevant information about the entity being represented.

Required icons

user

Props

avatar-alt?: string
Alt tag for the image.

avatar-fallback?: "colorized" | "neutral"
Which fallback type to use. The colorized fallback displays a random color based on the content.
Default: colorized

avatar-fallback-icon?: FluxIconName
The fallback icon to use when no url or initials are provided.
Default: user

avatar-fallback-initials?: string
The initials to use as fallback when no url or icon is provided.

avatar-size?: number
The size of the avatar.

avatar-src?: string
The URL of the image to use as the avatar.

is-compact?: boolean
If the compact version of the component should be used.

name: string
The name of the entity being represented.

title?: string
The title of the entity being represented.

Emits

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

Examples ​

Basic

A basic persona.

<template>
    <FluxPane style="max-width: max-content">
        <FluxPaneBody>
            <FluxPersona
                name="Bas Milius"
                title="Flux engineer"
                :avatar-size="42"
                avatar-src="https://avatars.githubusercontent.com/u/978257?v=4"/>
        </FluxPaneBody>
    </FluxPane>
</template>

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

Compact

A compact persona.

<template>
    <FluxPane style="max-width: max-content">
        <FluxPaneBody>
            <FluxPersona
                is-compact
                name="Bas Milius"
                title="Flux engineer"
                :avatar-size="42"
                avatar-src="https://avatars.githubusercontent.com/u/978257?v=4"/>
        </FluxPaneBody>
    </FluxPane>
</template>

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

Flyout

A persona with a flyout.

<template>
    <FluxPane style="max-width: max-content">
        <FluxPaneBody>
            <FluxFlyout
                direction="horizontal">
                <template #opener="{ open }">
                    <FluxPersona
                        name="Bas Milius"
                        title="Flux engineer"
                        :avatar-size="42"
                        avatar-src="https://avatars.githubusercontent.com/u/978257?v=4"
                        @click="open"/>
                </template>

                <FluxPaneHeader title="Bas Milius" sub-title="Flux engineer">
                    <template #before>
                        <FluxAvatar
                            :size="42"
                            src="https://avatars.githubusercontent.com/u/978257?v=4"/>
                    </template>
                </FluxPaneHeader>

                <FluxPaneBody style="max-width: 350px">
                    <p>a 29-year-old self-taught developer from The Netherlands</p>
                </FluxPaneBody>

                <FluxPaneFooter>
                    <FluxSecondaryButton
                        icon-leading="message"
                        label="Send message"/>

                    <FluxSpacer/>

                    <FluxSecondaryButton
                        icon-leading="globe"
                        label="Website"/>
                </FluxPaneFooter>
            </FluxFlyout>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxAvatar, FluxFlyout, FluxPane, FluxPaneBody, FluxPaneFooter, FluxPaneHeader, FluxPersona, FluxSecondaryButton, FluxSeparator, FluxSpacer } from '@flux-ui/components';
</script>

Used components ​