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="base" 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>