import clsx from 'clsx';
import './index.scss';
export interface BadgeProps {
/**
* The content to display inside the badge. Can be a string or React nodes.
*/
children?: React.ReactNode;
/**
* The type of badge, which determines its color and style.
* @default 'tip'
*/
type?: 'tip' | 'info' | 'warning' | 'danger';
/**
* The text content to display inside the badge (for backwards compatibility).
*/
text?: string;
/**
* Whether to display the badge with an outline style.
* @default false
*/
outline?: boolean;
}
/**
* A component that renders a styled badge with custom content.
*
* The Badge component displays a small, inline element with customizable content and appearance.
* It's useful for highlighting status, categories, or other short pieces of information.
*
* @param {BadgeProps} props - The properties for the Badge component.
* @returns {JSX.Element} A span element representing the badge.
*
* @example
* Using children:
* New
* Experimental
* Deprecated
* Pro Tip: Use custom elements
*
* Using text prop:
*
*
*
*/
export function Badge({
children,
type = 'tip',
text,
outline = false,
}: BadgeProps) {
const content = children || text;
return (
{content}
);
}