Badge
Default Badge
const ButtonExample = () =>
<Badge badgeComponent={1}>
<div style={{ padding: '2rem', backgroundColor: 'gray', borderRadius: '8px' }}>
Badge
</div>
</Badge>
1
Badge
Badge with icon
const ButtonExample = () =>
<Badge badgeComponent={
<span style={{ display: 'flex', alignItems: 'center', padding: '0.5rem 0' }}>
🥰
1000
</span>
}>
<div style={{ padding: '2rem', backgroundColor: 'gray', borderRadius: '8px' }}>
Badge
</div>
</Badge>
🥰 1000
Badge
Animated Badge
slide
const BadgeExample = () =>
<Badge
animationProps={{
hover: {
key: 'slide',
option: {
duration: '1s',
delay: '0s',
direction: 'top',
},
},
}}
>
hover me!
</Badge>
duration 1 s
newBadge
duration 2 s
newBadge
duration 3 s
newBadge
duration 4 s
newBadge
duration 5 s
newBadge
squeeze
const BadgeExample = () =>
<Badge
animationProps={{
hover: {
key: 'squeeze',
option: {
duration: '1s',
delay: '0s',
direction: 'top',
},
},
}}
>
hover me!
</Badge>
duration 1 s
newBadge
duration 2 s
newBadge
duration 3 s
newBadge
duration 4 s
newBadge
duration 5 s
newBadge
bgColorFade
const BadgeExample = () =>
<Badge
animationProps={{
hover: {
key: 'bgColorFade',
option: {
duration: '1s',
delay: '0s',
direction: 'top',
},
},
}}
>
hover me!
</Badge>
duration 1 s
newBadge
duration 2 s
newBadge
duration 3 s
newBadge
duration 4 s
newBadge
duration 5 s
newBadge
shake
const BadgeExample = () =>
<Badge
animationProps={{
hover: {
key: 'shake',
option: {
duration: '1s',
delay: '0s',
direction: 'top',
},
},
}}
>
hover me!
</Badge>
duration 1 s
newBadge
duration 2 s
newBadge
duration 3 s
newBadge
duration 4 s
newBadge
duration 5 s
newBadge