Badge
The badge is a label for elements in the UI. Use it, for example, to show the status of an order or highlight important information.
TIP
Flux also has Tags, which look similar to badges.
Required icons
Props
color?: FluxColor
The color of the badge.
colored?: boolean
Fills the badge with a tinted background matching its color.
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.
size?: FluxSize
The size of the badge.
Default: medium
type?: "button" | "link" | "route" | "none"
The pressable type of the badge. Defaults to a non-interactive label.
Default: none
tabindex?: string | number
The tabindex of the badge, works exactly the same as html.
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.
<template>
<FluxBadge label="Help wanted"/>
</template>
<script
lang="ts"
setup>
import { FluxBadge } from '@flux-ui/components';
</script>Colors
Badges come in six colors, so you can map them to the meaning that fits your context.
<template>
<FluxBadgeStack>
<FluxBadge label="Neutral"/>
<FluxBadge
color="primary"
label="Primary"/>
<FluxBadge
color="info"
label="Info"/>
<FluxBadge
color="success"
label="Success"/>
<FluxBadge
color="warning"
label="Warning"/>
<FluxBadge
color="danger"
label="Danger"/>
</FluxBadgeStack>
</template>
<script
lang="ts"
setup>
import { FluxBadge, FluxBadgeStack } from '@flux-ui/components';
</script>Colored
The colored variant fills the badge with a tinted background, making it stand out more.
<template>
<FluxBadgeStack>
<FluxBadge
colored
label="Neutral"/>
<FluxBadge
color="primary"
colored
label="Primary"/>
<FluxBadge
color="info"
colored
label="Info"/>
<FluxBadge
color="success"
colored
label="Success"/>
<FluxBadge
color="warning"
colored
label="Warning"/>
<FluxBadge
color="danger"
colored
label="Danger"/>
</FluxBadgeStack>
</template>
<script
lang="ts"
setup>
import { FluxBadge, FluxBadgeStack } from '@flux-ui/components';
</script>Dot
A dot badge is useful for indicating statuses, for instance, the status of a server.
<template>
<FluxBadgeStack>
<FluxBadge
color="success"
dot
label="Operational"/>
<FluxBadge
color="warning"
dot
label="Degraded"/>
<FluxBadge
color="info"
dot
label="Maintenance"/>
<FluxBadge
color="danger"
dot
label="Boot failure"/>
</FluxBadgeStack>
</template>
<script
lang="ts"
setup>
import { FluxBadge, FluxBadgeStack } from '@flux-ui/components';
</script>Icon
Including icons in badges can improve their clarity, for instance, indicating an app's release status.
<template>
<FluxBadge
color="success"
icon="rocket"
label="Ready for Sale"/>
</template>
<script
lang="ts"
setup>
import { FluxBadge } from '@flux-ui/components';
</script>Loading
A loading state badge can signify that a table row is processing, for instance, retrieving data.
<template>
<FluxBadge
is-loading
label="Fetching data..."/>
</template>
<script
lang="ts"
setup>
import { FluxBadge } from '@flux-ui/components';
</script>Sizes
Badges are available in three sizes. The default size is medium.
<template>
<FluxBadgeStack>
<FluxBadge
color="primary"
label="Small"
size="small"/>
<FluxBadge
color="primary"
label="Medium"/>
<FluxBadge
color="primary"
label="Large"
size="large"/>
</FluxBadgeStack>
</template>
<script
lang="ts"
setup>
import { FluxBadge, FluxBadgeStack } from '@flux-ui/components';
</script>Statuses
Combining colors and icons makes states scannable at a glance, for instance, the payment status of an order.
<template>
<FluxBadgeStack>
<FluxBadge
color="success"
icon="circle-check"
label="Paid"/>
<FluxBadge
color="warning"
icon="hourglass-clock"
label="Pending"/>
<FluxBadge
color="info"
icon="rotate"
label="Refunded"/>
<FluxBadge
color="danger"
icon="circle-exclamation"
label="Overdue"/>
</FluxBadgeStack>
</template>
<script
lang="ts"
setup>
import { FluxBadge, FluxBadgeStack } from '@flux-ui/components';
</script>Deletable
Deletable badges work well for active filters that the user can remove again, for instance, in search results.
<template>
<FluxBadgeStack>
<FluxBadge
v-for="filter of filters"
:key="filter"
is-deletable
:label="filter"
@delete="onDelete(filter)"/>
</FluxBadgeStack>
</template>
<script
lang="ts"
setup>
import { FluxBadge, FluxBadgeStack } from '@flux-ui/components';
import { ref } from 'vue';
const filters = ref([
'Brand: Nike',
'Color: Black',
'Size: 42'
]);
function onDelete(filter: string): void {
filters.value = filters.value.filter(active => active !== filter);
}
</script>