//
Displays a badge notification on the corner of an element, typically used for counters or status dots.
bun add xiod-ui1import { CornerBadge, CornerBadgeAnchor } from "xiod-ui/corner-badge";1<CornerBadgeAnchor>2 {/* Your anchored element */}3 <CornerBadge />4</CornerBadgeAnchor>| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default"| "secondary"| "success"| "warning"| "destructive"| "info"| "outline"| "error"| null| undefined | - | |
size | "default"| "sm"| "lg"| null| undefined | - | |
position | "top-left"| "top-right"| "bottom-left"| "bottom-right"| null| undefined | top-right | |
overlap | "rectangle"| "circular"| null| undefined | rectangle | |
dot | boolean| undefined | false | |
invisible | boolean| undefined | - | |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |