The Badge component is used to display a small badge with various style variants.
import { Badge } from "mogora-ui";
export default function BadgeDemo() {
return (
<Badge variant={"primary"}>Badge</Badge>
)
}
A badge component that can be customized with various variants.
| Prop | Type | Description |
|---|---|---|
| className | string | (Optional) Adds a custom class for styling |
| children | ReactNode | Content inside the badge. |
| variant | "primary" | "secondary" | "outline" | "ghost" | Badge appearance variants. |
| Variant | Description |
|---|---|
| primary | Background bg-primary, text text-white. |
| secondary | Background bg-secondary, text text-secondary-foreground. |
| outline | Text colored text-foreground, without a background. |
| ghost | Text colored text-primary, without a background. |