@serendie/ui
Version:
Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric
91 lines (90 loc) • 3.37 kB
TypeScript
import { ComponentProps } from 'react';
import { RecipeVariantProps } from '../../../styled-system/types';
export declare const BadgeStyle: import('../../../styled-system/types').RecipeRuntimeFn<{
size: {
small: {
height: "16px";
pr: "sd.system.dimension.spacing.twoExtraSmall";
pl: "sd.system.dimension.spacing.twoExtraSmall";
textStyle: "sd.system.typography.label.small_compact";
expanded: {
textStyle: "sd.system.typography.label.small_expanded";
};
};
medium: {
height: "24px";
pr: "sd.system.dimension.spacing.extraSmall";
pl: "sd.system.dimension.spacing.extraSmall";
textStyle: "sd.system.typography.label.medium_compact";
expanded: {
textStyle: "sd.system.typography.label.medium_expanded";
};
};
large: {
height: "32px";
pr: "sd.system.dimension.spacing.medium";
pl: "sd.system.dimension.spacing.medium";
textStyle: "sd.system.typography.label.large_compact";
expanded: {
textStyle: "sd.system.typography.label.large_expanded";
};
};
};
styleColor: {
gray: {
bg: "sd.reference.color.scale.gray.600";
color: "sd.reference.color.scale.white.1000";
};
blue: {
bg: "sd.reference.color.scale.blue.600";
color: "sd.reference.color.scale.white.1000";
};
green: {
bg: "sd.reference.color.scale.green.600";
color: "sd.reference.color.scale.white.1000";
};
yellow: {
bg: "sd.reference.color.scale.yellow.600";
color: "sd.reference.color.scale.white.1000";
};
chestnut: {
bg: "sd.reference.color.scale.chestnut.600";
color: "sd.reference.color.scale.white.1000";
};
red: {
bg: "sd.reference.color.scale.red.600";
color: "sd.reference.color.scale.white.1000";
};
"gray-subtle": {
bg: "sd.reference.color.scale.gray.100";
color: "sd.reference.color.scale.gray.800";
};
"blue-subtle": {
bg: "sd.reference.color.scale.blue.100";
color: "sd.reference.color.scale.blue.800";
};
"green-subtle": {
bg: "sd.reference.color.scale.green.100";
color: "sd.reference.color.scale.green.800";
};
"yellow-subtle": {
bg: "sd.reference.color.scale.yellow.100";
color: "sd.reference.color.scale.yellow.800";
};
"chestnut-subtle": {
bg: "sd.reference.color.scale.chestnut.100";
color: "sd.reference.color.scale.chestnut.800";
};
"red-subtle": {
bg: "sd.reference.color.scale.red.100";
color: "sd.reference.color.scale.red.800";
};
};
}>;
type BadgeProps = ComponentProps<"span"> & RecipeVariantProps<typeof BadgeStyle> & {
closeButton?: React.ReactElement<BadgeCloseButtonProps>;
};
export declare const Badge: React.FC<BadgeProps>;
type BadgeCloseButtonProps = React.FC<ComponentProps<"button">>;
export declare const BadgeCloseButton: React.FC<ComponentProps<"button">>;
export {};