import React from 'react'
import { Badge, Space, Switch } from "antd";
import { ClockCircleOutlined } from "@ant-design/icons";
const BadgeComponent = () => {
const [show, setShow] = React.useState(true);
return (
<Space>
<Switch checked={show} onChange={() => setShow(!show)} />
<Badge count={show ? 25 : 0} />
<Badge
count={
show ? <ClockCircleOutlined style={{ color: "#f5222d" }} /> : 0
}
/>
<Badge
className="site-badge-count-109"
count={show ? 109 : 0}
style={{ backgroundColor: "#52c41a" }}
/>
</Space>
);
}
export default BadgeComponent
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter