padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(ui): Improve Badge component styling and variants

Browse source 
- Change Badge component from div to span for semantic correctness
- Add whitespace-nowrap to prevent text wrapping
- Remove unnecessary shadow classes from default and destructive variants
- Enhance outline variant with border and hover states
- Update variant prop handling in Badge component
This commit is contained in:
padreug 2025-03-09 15:04:08 +01:00
parent 903636b6f9
commit ea03290f84
2 changed files with 6 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/ui/badge/Badge.vue
View file

@ -10,7 +10,7 @@ const props = defineProps<{
</script>
<template>
<div :class="cn(badgeVariants({ variant }), props.class)">
<span :class="cn(badgeVariants({ variant: props.variant }), props.class)">
<slot />
</div>
</span>
</template>

8
src/components/ui/badge/index.ts
View file

@ -3,17 +3,17 @@ import { cva, type VariantProps } from 'class-variance-authority'
export { default as Badge } from './Badge.vue'
export const badgeVariants = cva(
'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
'inline-flex items-center whitespace-nowrap rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
{
variants: {
variant: {
default:
'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
secondary:
'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
destructive:
'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
outline: 'text-foreground',
'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
outline: 'border-border text-foreground hover:bg-accent hover:text-accent-foreground',
},
},
defaultVariants: {