Badge

Example

A component that displays a small piece of information or status indicator.

import { Badge } from "@yummacss/ui";

export default function Page() {
  return (
    <Badge variant="outline" size="xs">
      New
    </Badge>
  );
}

API reference

variant

Default value is base

(property) variant?: "destructive" | "base" | "outline" | null | undefined

size

Default value is xs

(property) size?: "xs" | "sm" | "md" | "lg" | null | undefined

Custom styling

Apply custom styles to the <Badge> component.

import { Badge } from "@yummacss/ui";

<Badge className="...">...</Badge>;

Extend properties

Extend the <Badge> component with the native <span> HTML attributes.

import { Badge } from "@yummacss/ui";

<Badge {...props}>...</Badge>;