Badge
A short text to represent a status or a category.
Demo
New
Related Components
This requires the following components to be installed:
Related Composables
This requires the following composables to be installed:
Related Theme
This requires the following theme to be installed:
Component
vue
<script lang="ts">
import type { AvatarProps } from '@/ui/components/Avatar.vue'
import type { UseComponentIconsProps } from '@/ui/composables/useComponentIcons'
import type { VariantProps } from 'tailwind-variants'
import Avatar from '@/ui/components/Avatar.vue'
import Icon from '@/ui/components/Icon.vue'
import { useComponentIcons } from '@/ui/composables/useComponentIcons'
import theme from '@/ui/theme/badge'
import { Primitive } from 'reka-ui'
import { tv } from 'tailwind-variants'
import { computed } from 'vue'
const badge = tv(theme)
type BadgeVariants = VariantProps<typeof badge>
export interface BadgeProps extends Omit<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
as?: any
label?: string | number
color?: BadgeVariants['color']
variant?: BadgeVariants['variant']
size?: BadgeVariants['size']
class?: any
ui?: Partial<typeof badge.slots>
}
export interface BadgeSlots {
leading: (props?: object) => any
default: (props?: object) => any
trailing: (props?: object) => any
}
export interface BadgeEmits {}
</script>
<script setup lang="ts">
const props = withDefaults(defineProps<BadgeProps>(), {
as: 'span',
})
defineEmits<BadgeEmits>()
defineSlots<BadgeSlots>()
const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
const ui = computed(() => badge({
color: props.color,
variant: props.variant,
size: props.size,
}))
</script>
<template>
<Primitive :as="as" :class="ui.base({ class: [props.class, props.ui?.base] })">
<slot name="leading">
<Icon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
<Avatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
</slot>
<slot>
<span v-if="label" :class="ui.label({ class: props.ui?.label })">
{{ label }}
</span>
</slot>
<slot name="trailing">
<Icon v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
</slot>
</Primitive>
</template>vue
<script lang="ts">
import type { AvatarProps } from '@/UI/Components/Avatar.vue'
import type { UseComponentIconsProps } from '@/UI/Composables/useComponentIcons'
import type { VariantProps } from 'tailwind-variants'
import Avatar from '@/UI/Components/Avatar.vue'
import Icon from '@/UI/Components/Icon.vue'
import { useComponentIcons } from '@/UI/Composables/useComponentIcons'
import theme from '@/UI/Theme/badge'
import { Primitive } from 'reka-ui'
import { tv } from 'tailwind-variants'
import { computed } from 'vue'
const badge = tv(theme)
type BadgeVariants = VariantProps<typeof badge>
export interface BadgeProps extends Omit<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
as?: any
label?: string | number
color?: BadgeVariants['color']
variant?: BadgeVariants['variant']
size?: BadgeVariants['size']
class?: any
ui?: Partial<typeof badge.slots>
}
export interface BadgeSlots {
leading: (props?: object) => any
default: (props?: object) => any
trailing: (props?: object) => any
}
export interface BadgeEmits {}
</script>
<script setup lang="ts">
const props = withDefaults(defineProps<BadgeProps>(), {
as: 'span',
})
defineEmits<BadgeEmits>()
defineSlots<BadgeSlots>()
const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
const ui = computed(() => badge({
color: props.color,
variant: props.variant,
size: props.size,
}))
</script>
<template>
<Primitive :as="as" :class="ui.base({ class: [props.class, props.ui?.base] })">
<slot name="leading">
<Icon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
<Avatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
</slot>
<slot>
<span v-if="label" :class="ui.label({ class: props.ui?.label })">
{{ label }}
</span>
</slot>
<slot name="trailing">
<Icon v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
</slot>
</Primitive>
</template>Theme
ts
export default {
slots: {
base: '',
label: '',
leadingIcon: '',
leadingAvatar: '',
leadingAvatarSize: '',
trailingIcon: '',
},
variants: {
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: '',
},
variant: {
solid: '',
outline: '',
soft: '',
subtle: '',
},
size: {
xs: {
base: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
},
sm: {
base: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
},
md: {
base: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
},
lg: {
base: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
},
xl: {
base: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: '',
},
},
},
compoundVariants: [],
defaultVariants: {
color: 'primary',
variant: 'solid',
size: 'md',
} as const,
}View Nuxt UI theme
ts
export default {
slots: {
base: 'font-medium inline-flex items-center',
label: 'truncate',
leadingIcon: 'shrink-0',
leadingAvatar: 'shrink-0',
leadingAvatarSize: '',
trailingIcon: 'shrink-0',
},
variants: {
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: '',
},
variant: {
solid: '',
outline: '',
soft: '',
subtle: '',
},
size: {
xs: {
base: 'text-[8px]/3 px-1 py-0.5 gap-1 rounded-sm',
leadingIcon: 'size-3',
leadingAvatarSize: '3xs',
trailingIcon: 'size-3',
},
sm: {
base: 'text-[10px]/3 px-1.5 py-1 gap-1 rounded-sm',
leadingIcon: 'size-3',
leadingAvatarSize: '3xs',
trailingIcon: 'size-3',
},
md: {
base: 'text-xs px-2 py-1 gap-1 rounded-md',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
trailingIcon: 'size-4',
},
lg: {
base: 'text-sm px-2 py-1 gap-1.5 rounded-md',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
trailingIcon: 'size-5',
},
xl: {
base: 'text-base px-2.5 py-1 gap-1.5 rounded-md',
leadingIcon: 'size-6',
leadingAvatarSize: '2xs',
trailingIcon: 'size-6',
},
},
},
compoundVariants: [
{
color: 'primary',
variant: 'solid',
class: 'bg-primary text-inverted',
} as const,
{
color: 'primary',
variant: 'outline',
class: 'text-primary ring ring-inset ring-primary/50',
} as const,
{
color: 'primary',
variant: 'soft',
class: 'bg-primary/10 text-primary',
} as const,
{
color: 'primary',
variant: 'subtle',
class: 'bg-primary/10 text-primary ring ring-inset ring-primary/25',
} as const,
{
color: 'secondary',
variant: 'solid',
class: 'bg-secondary text-inverted',
} as const,
{
color: 'secondary',
variant: 'outline',
class: 'text-secondary ring ring-inset ring-secondary/50',
} as const,
{
color: 'secondary',
variant: 'soft',
class: 'bg-secondary/10 text-secondary',
} as const,
{
color: 'secondary',
variant: 'subtle',
class: 'bg-secondary/10 text-secondary ring ring-inset ring-secondary/25',
} as const,
{
color: 'success',
variant: 'solid',
class: 'bg-success text-inverted',
} as const,
{
color: 'success',
variant: 'outline',
class: 'text-success ring ring-inset ring-success/50',
} as const,
{
color: 'success',
variant: 'soft',
class: 'bg-success/10 text-success',
} as const,
{
color: 'success',
variant: 'subtle',
class: 'bg-success/10 text-success ring ring-inset ring-success/25',
} as const,
{
color: 'info',
variant: 'solid',
class: 'bg-info text-inverted',
} as const,
{
color: 'info',
variant: 'outline',
class: 'text-info ring ring-inset ring-info/50',
} as const,
{
color: 'info',
variant: 'soft',
class: 'bg-info/10 text-info',
} as const,
{
color: 'info',
variant: 'subtle',
class: 'bg-info/10 text-info ring ring-inset ring-info/25',
} as const,
{
color: 'warning',
variant: 'solid',
class: 'bg-warning text-inverted',
} as const,
{
color: 'warning',
variant: 'outline',
class: 'text-warning ring ring-inset ring-warning/50',
} as const,
{
color: 'warning',
variant: 'soft',
class: 'bg-warning/10 text-warning',
} as const,
{
color: 'warning',
variant: 'subtle',
class: 'bg-warning/10 text-warning ring ring-inset ring-warning/25',
} as const,
{
color: 'error',
variant: 'solid',
class: 'bg-error text-inverted',
} as const,
{
color: 'error',
variant: 'outline',
class: 'text-error ring ring-inset ring-error/50',
} as const,
{
color: 'error',
variant: 'soft',
class: 'bg-error/10 text-error',
} as const,
{
color: 'error',
variant: 'subtle',
class: 'bg-error/10 text-error ring ring-inset ring-error/25',
} as const,
{
color: 'neutral',
variant: 'solid',
class: 'text-inverted bg-inverted',
} as const,
{
color: 'neutral',
variant: 'outline',
class: 'ring ring-inset ring-accented text-default bg-default',
} as const,
{
color: 'neutral',
variant: 'soft',
class: 'text-default bg-elevated',
} as const,
{
color: 'neutral',
variant: 'subtle',
class: 'ring ring-inset ring-accented text-default bg-elevated',
} as const,
],
defaultVariants: {
color: 'primary',
variant: 'solid',
size: 'md',
} as const,
}Test
To test this component, you can use the following test file:
ts
import type { RenderOptions } from '@testing-library/vue'
import Badge from '@/ui/components/Badge.vue'
import theme from '@/ui/theme/badge'
import { render, screen } from '@testing-library/vue'
import { describe, expect, it } from 'vitest'
describe('badge', () => {
const sizes = Object.keys(theme.variants.size) as any
const variants = Object.keys(theme.variants.variant) as any
it.each<[string, RenderOptions<typeof Badge>]>([
// Props
['with label', { props: { label: 'Badge' } }],
...sizes.map((size: string) => [`with size ${size}`, { props: { label: 'Badge', size } }]),
...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { label: 'Badge', variant } }]),
...variants.map((variant: string) => [`with neutral variant ${variant}`, { props: { label: 'Badge', variant, color: 'neutral' } }]),
['with icon', { props: { icon: 'i-lucide-rocket' } }],
['with leading and icon', { props: { leading: true, icon: 'i-lucide-arrow-left' } }],
['with leadingIcon', { props: { leadingIcon: 'i-lucide-arrow-left' } }],
['with trailing and icon', { props: { trailing: true, icon: 'i-lucide-arrow-right' } }],
['with trailingIcon', { props: { trailingIcon: 'i-lucide-arrow-right' } }],
['with avatar', { props: { avatar: { src: 'https://github.com/vue.png' } } }],
['with avatar and leadingIcon', { props: { avatar: { src: 'https://github.com/vue.png' }, leadingIcon: 'i-lucide-arrow-left' } }],
['with avatar and trailingIcon', { props: { avatar: { src: 'https://github.com/vue.png' }, trailingIcon: 'i-lucide-arrow-right' } }],
['with as', { props: { label: 'Badge', as: 'div' } }],
['with class', { props: { label: 'Badge', class: 'rounded-full font-bold' } }],
['with ui', { props: { label: 'Badge', ui: { label: 'font-bold' } } }],
// Slots
['with default slot', { slots: { default: () => 'Default slot' } }],
['with leading slot', { slots: { leading: () => 'Leading slot' } }],
['with trailing slot', { slots: { trailing: () => 'Trailing slot' } }],
])('renders %s correctly', (name, options) => {
render(Badge, {
attrs: {
'data-testid': 'badge',
},
...options,
})
expect(screen.getByTestId('badge')).toMatchSnapshot()
})
})ts
import type { RenderOptions } from '@testing-library/vue'
import Badge from '@/UI/Components/Badge.vue'
import theme from '@/UI/Theme/badge'
import { render, screen } from '@testing-library/vue'
import { describe, expect, it } from 'vitest'
describe('badge', () => {
const sizes = Object.keys(theme.variants.size) as any
const variants = Object.keys(theme.variants.variant) as any
it.each<[string, RenderOptions<typeof Badge>]>([
// Props
['with label', { props: { label: 'Badge' } }],
...sizes.map((size: string) => [`with size ${size}`, { props: { label: 'Badge', size } }]),
...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { label: 'Badge', variant } }]),
...variants.map((variant: string) => [`with neutral variant ${variant}`, { props: { label: 'Badge', variant, color: 'neutral' } }]),
['with icon', { props: { icon: 'i-lucide-rocket' } }],
['with leading and icon', { props: { leading: true, icon: 'i-lucide-arrow-left' } }],
['with leadingIcon', { props: { leadingIcon: 'i-lucide-arrow-left' } }],
['with trailing and icon', { props: { trailing: true, icon: 'i-lucide-arrow-right' } }],
['with trailingIcon', { props: { trailingIcon: 'i-lucide-arrow-right' } }],
['with avatar', { props: { avatar: { src: 'https://github.com/vue.png' } } }],
['with avatar and leadingIcon', { props: { avatar: { src: 'https://github.com/vue.png' }, leadingIcon: 'i-lucide-arrow-left' } }],
['with avatar and trailingIcon', { props: { avatar: { src: 'https://github.com/vue.png' }, trailingIcon: 'i-lucide-arrow-right' } }],
['with as', { props: { label: 'Badge', as: 'div' } }],
['with class', { props: { label: 'Badge', class: 'rounded-full font-bold' } }],
['with ui', { props: { label: 'Badge', ui: { label: 'font-bold' } } }],
// Slots
['with default slot', { slots: { default: () => 'Default slot' } }],
['with leading slot', { slots: { leading: () => 'Leading slot' } }],
['with trailing slot', { slots: { trailing: () => 'Trailing slot' } }],
])('renders %s correctly', (name, options) => {
render(Badge, {
attrs: {
'data-testid': 'badge',
},
...options,
})
expect(screen.getByTestId('badge')).toMatchSnapshot()
})
})Contributors
barbapapazes