Badge group
The badge group combines a badge with a message in a single pill. Place a badge in the start or end slot; it inherits the group's color and size automatically. Use it, for example, to announce a new feature or to link to release notes.
TIP
Use a Badge when a single label is enough.
Props
color?: FluxColor
The color of the badge group.
icon-leading?: FluxIconName
The icon that is shown before the label.
icon-trailing?: FluxIconName
The icon that is shown after the label.
label: string
The message that is shown next to the inner badge.
size?: FluxSize
The size of the badge group. Badges in the start and end slots scale along.
Default: medium
type?: "button" | "link" | "route" | "none"
The pressable type of the badge group. Defaults to a non-interactive label.
Default: none
tabindex?: string | number
The tabindex of the badge group, works exactly the same as html.
href?: string
This prop is enabled if the badge group's type is set to link. It's the same as the <a> HTML element.
rel?: string
This prop is enabled if the badge group's type is set to link. It's the same as the <a> HTML element.
target?: string
This prop is enabled if the badge group's type is set to link. It's the same as the <a> HTML element.
to?: FluxTo
This prop is enabled if the badge group's type is set to route. This integrates with Vue Router.
Emits
click: [MouseEvent]
Triggered when the badge group is clicked.
mouseenter: [MouseEvent]
Triggered when the badge group is being hovered.
mouseleave: [MouseEvent]
Triggered when the badge group is not being hovered anymore.
Slots
start
The badge that is shown before the label. Place a FluxBadge here; it inherits the group's color and size.
end
The badge that is shown after the label. Place a FluxBadge here; it inherits the group's color and size.
Examples
Basic
A badge group pairs a short badge with a supporting message.
<template>
<FluxBadgeStack>
<FluxBadgeGroup label="We've just released the new dashboard">
<template #start>
<FluxBadge label="New feature"/>
</template>
</FluxBadgeGroup>
<FluxBadgeGroup
color="success"
label="Version 2.4 is now available">
<template #start>
<FluxBadge label="Update"/>
</template>
</FluxBadgeGroup>
</FluxBadgeStack>
</template>
<script
lang="ts"
setup>
import { FluxBadge, FluxBadgeGroup, FluxBadgeStack } from '@flux-ui/components';
</script>Placement
The badge can be placed before or after the message using the start and end slots.
<template>
<FluxBadgeStack>
<FluxBadgeGroup
color="primary"
label="We've just released the new dashboard">
<template #start>
<FluxBadge label="New feature"/>
</template>
</FluxBadgeGroup>
<FluxBadgeGroup
color="primary"
label="We've just released the new dashboard">
<template #end>
<FluxBadge label="New feature"/>
</template>
</FluxBadgeGroup>
</FluxBadgeStack>
</template>
<script
lang="ts"
setup>
import { FluxBadge, FluxBadgeGroup, FluxBadgeStack } from '@flux-ui/components';
</script>Icon
An icon at the end hints that the badge group is interactive, for instance, linking to release notes.
<template>
<FluxBadgeGroup
color="info"
icon-trailing="arrow-right"
label="Read the release notes"
type="link"
href="#">
<template #start>
<FluxBadge label="What's new?"/>
</template>
</FluxBadgeGroup>
</template>
<script
lang="ts"
setup>
import { FluxBadge, FluxBadgeGroup } from '@flux-ui/components';
</script>Sizes
Badge groups are available in three sizes. The default size is medium.
<template>
<FluxFlex
direction="vertical"
:gap="9">
<FluxBadgeGroup
color="primary"
label="A compact badge group"
size="small">
<template #start>
<FluxBadge label="Small"/>
</template>
</FluxBadgeGroup>
<FluxBadgeGroup
color="primary"
label="The default badge group">
<template #start>
<FluxBadge label="Medium"/>
</template>
</FluxBadgeGroup>
<FluxBadgeGroup
color="primary"
label="A more prominent badge group"
size="large">
<template #start>
<FluxBadge label="Large"/>
</template>
</FluxBadgeGroup>
</FluxFlex>
</template>
<script
lang="ts"
setup>
import { FluxBadge, FluxBadgeGroup, FluxFlex } from '@flux-ui/components';
</script>System status
Badge groups can surface status updates, for instance, on a status page or in an admin dashboard.
<template>
<FluxFlex
direction="vertical"
:gap="9">
<FluxBadgeGroup
color="success"
label="All systems are operational again">
<template #start>
<FluxBadge label="Resolved"/>
</template>
</FluxBadgeGroup>
<FluxBadgeGroup
color="warning"
label="Scheduled downtime on Sunday at 02:00 UTC">
<template #start>
<FluxBadge label="Maintenance"/>
</template>
</FluxBadgeGroup>
<FluxBadgeGroup
color="danger"
label="We're investigating degraded API performance">
<template #start>
<FluxBadge label="Incident"/>
</template>
</FluxBadgeGroup>
</FluxFlex>
</template>
<script
lang="ts"
setup>
import { FluxBadge, FluxBadgeGroup, FluxFlex } from '@flux-ui/components';
</script>Job listings
A clickable badge group with a department badge forms a compact job listing.
<template>
<FluxFlex
direction="vertical"
:gap="9">
<FluxBadgeGroup
icon-trailing="arrow-right"
label="Senior Frontend Developer"
type="link"
href="#">
<template #start>
<FluxBadge label="Engineering"/>
</template>
</FluxBadgeGroup>
<FluxBadgeGroup
icon-trailing="arrow-right"
label="Product Designer"
type="link"
href="#">
<template #start>
<FluxBadge label="Design"/>
</template>
</FluxBadgeGroup>
<FluxBadgeGroup
icon-trailing="arrow-right"
label="Content Strategist"
type="link"
href="#">
<template #start>
<FluxBadge label="Marketing"/>
</template>
</FluxBadgeGroup>
</FluxFlex>
</template>
<script
lang="ts"
setup>
import { FluxBadge, FluxBadgeGroup, FluxFlex } from '@flux-ui/components';
</script>