Flux

Persona ​

The persona combines an avatar with a name and title to represent a user or entity. The avatar can show an image, initials, or an icon.

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.

TIP

In compact mode the name and title are hidden, so the persona button exposes the name as its aria-label to keep it accessible.

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 ​