Badge
자식 요소 오른쪽 상단에 유저의 이목을 끄는 작은 배지를 생성합니다.
Example
It can only be viewed in a mobile.
Steps
Add type
types/index.d.ts
interface ReactProps {
children?: ReactNode
}Copy Code
components/Badge/index.tsx
export interface Props extends ReactProps {}
function Badge({ children }: Props) {
return (
<span className="relative inline-block">
{children}
<span className="absolute right-0 top-0 -mr-1 -mt-1 flex h-3 w-3">
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-red-400 opacity-75" />
<span className="relative inline-flex h-3 w-3 rounded-full bg-red-500" />
</span>
</span>
)
}
export default BadgeUsage
<Badge>
<BellIcon className="h-5 w-5" />
</Badge>Props
| Name | Type | Default |
|---|---|---|
| children | ReactNode |