Flux

Appearance

Tag ​

Tags are used as labels for a more specific element in the UI. This, for example, may be used to display the status of an order.

Tag
Tag
Tag
Tag
Tag

Required icons

xmark

Props

color?: FluxColor
The color of the tag.
Default: gray

dot?: boolean
If the tag should have a colored dot.

icon?: FluxIconName
The icon of the tag.

is-clickable?: boolean
If the tag is clickable.

is-deletable?: boolean
If the tag is deletable. This only works when the is-deletable prop is set to true.

is-loading?: boolean
If the tag should have a loading state.

label: string
The label of the tag.

type?: FluxPressableType
The type of the tag.

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

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

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

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

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

Emits

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

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

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

delete: []
Triggered when the tag is deleted.

Examples ​

Basic

A basic tag.

Pending
Potential customer

<template>
    <FluxTagStack>
        <FluxTag
            label="Pending"/>

        <FluxTag
            label="Potential customer"/>
    </FluxTagStack>
</template>

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

Dot

A tag with a colored dot.

Online
Boot failure

<template>
    <FluxTagStack>
        <FluxTag
            dot
            color="success"
            label="Online"/>

        <FluxTag
            dot
            color="danger"
            label="Boot failure"/>
    </FluxTagStack>
</template>

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

Icon

A tag with an icon.

Complete
Missing payment details

<template>
    <FluxTagStack>
        <FluxTag
            icon="check-circle"
            color="success"
            label="Complete"/>

        <FluxTag
            icon="exclamation-circle"
            color="danger"
            label="Missing payment details"/>
    </FluxTagStack>
</template>

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

Loading

A tag with a loading state.

Pending
Saving

<template>
    <FluxTagStack>
        <FluxTag
            is-loading
            label="Pending"/>

        <FluxTag
            is-loading
            label="Saving"/>
    </FluxTagStack>
</template>

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

Used components ​