Flux

Appearance

Badge ​

The Badge component serves as a label for specific elements in the UI. It can be used, for example, to display the status of an order or highlight important information.

Help wanted
Attention
Completed
Running

TIP

Flux also has Tags, which look similar to badges.

Required icons

xmark

Props

color?: FluxColor
The color of the badge.

dot?: boolean
Shows a dot instead of an icon at the start of the badge.

icon?: FluxIconName
The icon that is used in the badge.

is-deletable?: boolean
Indicates that the badge is deletable.

is-loading?: boolean
Shows a loading state within the badge instead of the icon or dot.

label: string
The label that is shown in the badge.

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.

delete: []
Triggered when the delete button is clicked.

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

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

Examples ​

Basic

A simple badge can deliver additional insights about an entity.

Help wanted

<template>
    <FluxBadge label="Help wanted"/>
</template>

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

Dot

A dot badge is useful for indicating statuses, for instance, the status of a server.

Boot failure

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

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

Icon

Including icons in badges can improve their clarity, for instance, indicating an app's release status.

Ready for Sale

<template>
    <FluxBadge
        color="success"
        icon="rocket"
        label="Ready for Sale"/>
</template>

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

Loading

A loading state badge can signify that a table row is processing, for instance, retrieving data.

Fetching data...

<template>
    <FluxBadge
        is-loading
        label="Fetching data..."/>
</template>

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

Used components ​