Badge

Displays a badge or a component that looks like a badge.

Installation

Run the following cli command or copy/paste the component code into your project

qwik-ui add badge

import { component$, type PropsOf, Slot } from '@builder.io/qwik';
import { cn } from '@qwik-ui/utils';
import { cva, type VariantProps } from 'class-variance-authority';
 
export const badgeVariants = cva(
  'inline-flex items-center rounded-sm px-2.5 py-0.5 text-xs font-semibold shadow-sm transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
  {
    variants: {
      look: {
        primary: 'bg-primary text-primary-foreground hover:bg-primary/80',
        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
        alert: 'bg-alert text-alert-foreground hover:bg-alert/80',
        outline: 'border text-foreground',
      },
    },
    defaultVariants: {
      look: 'primary',
    },
  },
);
 
type BadgeProps = PropsOf<'div'> & VariantProps<typeof badgeVariants>;
 
export const Badge = component$<BadgeProps>(({ look, ...props }) => {
  return (
    <div {...props} class={cn(badgeVariants({ look }), props.class)}>
      <Slot />
    </div>
  );
});

Examples

Primary

Badge

import { component$ } from '@builder.io/qwik';
import { Badge } from '~/components/ui';

export default component$(() => {
  return <Badge>Badge</Badge>;
});

Secondary

Badge

import { component$ } from '@builder.io/qwik';
import { Badge } from '~/components/ui';

export default component$(() => {
  return <Badge look="secondary">Badge</Badge>;
});

Alert

Badge

import { component$ } from '@builder.io/qwik';
import { Badge } from '~/components/ui';

export default component$(() => {
  return <Badge look="alert">Badge</Badge>;
});

Outline

Badge

import { component$ } from '@builder.io/qwik';
import { Badge } from '~/components/ui';

export default component$(() => {
  return <Badge look="outline">Badge</Badge>;
});