Flux

Appearance

Comment ​

This component represents a user comment with support for customizable details such as the author's name, avatar, and optional time information. It includes a structured layout with an avatar, header, and message body, allowing additional content to be provided via a slot. Styles can adjust its appearance, such as flipping or differentiating received comments.

Angulus umerus centum admoneo id vitium decet succurro una. Somniculosus surgo tyrannus callide cetera timidus deprecator.
Bas Milius
Cupressus abduco stips balbus vulpes cena benevolentia facere depopulo strues. Temptatio abscido coma suppono ante caries virgo vesco. Caput antiquus vesco.

Required icons

user

Props

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

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

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

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

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

is-received?: boolean
Use a received appearance.

is-typing?: boolean
Show a typing indicator instead of the slot content.

posted-by?: string
The name of the comment's author. Shown when `is-received` is true.

posted-on?: DateTime
The moment the comment was posted. Used to render a relative timestamp.

Slots

default
The contents of the comment.

Examples ​

Incoming

An incoming comment that is used within a message thread.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio ducimus earum sed tenetur. Amet at dicta explicabo facere, fuga id itaque nisi quam quisquam tempore. Alias asperiores ea odio perspiciatis?
System

<template>
    <FluxComment
        avatar-fallback="neutral"
        avatar-fallback-icon="gear"
        posted-by="System"
        :posted-on="postedOn"
        is-received>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio ducimus earum sed tenetur. Amet at dicta explicabo facere, fuga id itaque nisi quam quisquam tempore. Alias asperiores ea odio perspiciatis?
    </FluxComment>
</template>

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

    const postedOn = DateTime.now().minus({seconds: 45});
</script>

Outgoing

An outgoing comment that is used within a message thread.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio ducimus earum sed tenetur. Amet at dicta explicabo facere, fuga id itaque nisi quam quisquam tempore. Alias asperiores ea odio perspiciatis? 

<template>
    <FluxComment
        avatar-fallback-icon="user"
        posted-by="You"
        :posted-on="postedOn">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio ducimus earum sed tenetur. Amet at dicta explicabo facere, fuga id itaque nisi quam quisquam tempore. Alias asperiores ea odio perspiciatis?
    </FluxComment>
</template>

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

    const postedOn = DateTime.now();
</script>

Typing

An indication that someone is typing a message.

Bas Milius

<template>
    <FluxComment
        avatar-fallback-icon="user"
        is-received
        is-typing
        posted-by="Bas Milius"/>
</template>

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

Used components ​