@vertisanpro/flowbite-react
Version:
Non-Official React components built for Flowbite and Tailwind CSS
14 lines (13 loc) • 1.02 kB
JavaScript
import { twMerge } from '@vertisanpro/tailwind-merge';
import React from 'react';
import { mergeDeep } from '../../helpers/merge-deep';
import { getTheme } from '../../theme-store';
export const Badge = ({ children, color = 'info', href, icon: Icon, size = 'xs', className, theme: customTheme = {}, ...props }) => {
const theme = mergeDeep(getTheme().badge, customTheme);
const Content = () => (React.createElement("span", { className: twMerge(theme.root.base, theme.root.color[color], theme.root.size[size], theme.icon[Icon ? 'on' : 'off'], className), "data-testid": "flowbite-badge", ...props },
Icon && React.createElement(Icon, { "aria-hidden": true, className: theme.icon.size[size], "data-testid": "flowbite-badge-icon" }),
children && React.createElement("span", null, children)));
return href ? (React.createElement("a", { className: theme.root.href, href: href },
React.createElement(Content, null))) : (React.createElement(Content, null));
};
Badge.displayName = 'Badge';