Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | 12x 12x 4x | import { styled, GetProps, Text, XStack } from 'tamagui';
const BadgeContainer = styled(XStack, {
name: 'Badge',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 9999,
paddingHorizontal: '$2',
paddingVertical: '$1',
variants: {
variant: {
default: { backgroundColor: '$color3' },
primary: { backgroundColor: '$primaryLight' },
success: { backgroundColor: '$greenLight' },
warning: { backgroundColor: '$yellowLight' },
error: { backgroundColor: '$redLight' },
info: { backgroundColor: '$blueLight' },
},
size: {
sm: { paddingHorizontal: '$1.5', paddingVertical: 2 },
md: { paddingHorizontal: '$2', paddingVertical: '$1' },
lg: { paddingHorizontal: '$2.5', paddingVertical: '$1.5' },
},
outline: {
true: {
backgroundColor: 'transparent',
borderWidth: 1,
},
},
} as const,
defaultVariants: {
variant: 'default',
size: 'md',
},
});
const BadgeText = styled(Text, {
name: 'BadgeText',
fontWeight: '500',
variants: {
variant: {
default: { color: '$color11' },
primary: { color: '$primaryDark' },
success: { color: '$success8' },
warning: { color: '$warning8' },
error: { color: '$error8' },
info: { color: '$info8' },
},
size: {
sm: { fontSize: '$1' },
md: { fontSize: '$2' },
lg: { fontSize: '$3' },
},
} as const,
defaultVariants: {
variant: 'default',
size: 'md',
},
});
type BadgeProps = GetProps<typeof BadgeContainer> & {
children: React.ReactNode;
};
export function Badge({
children,
variant = 'default',
size = 'md',
outline,
...props
}: BadgeProps) {
return (
<BadgeContainer
variant={variant}
size={size}
outline={outline}
borderColor={outline ? `$${variant === 'default' ? 'color6' : variant}` : undefined}
{...props}
>
<BadgeText variant={variant} size={size}>
{children}
</BadgeText>
</BadgeContainer>
);
}
|