Corner Indicator

Note

A badge or dot indicator that appears in a corner of a container, used to signal status, count, or activity.

Design checklist

Status	Item	Description
✔️	Anatomy	Includes descriptions of all parts of the component and its major variants.
✔️	States	Includes all applicable interaction, display and value states.
✔️	Options	Includes all relevant options (functional type, stylistic kind, semantic color, size, orientation, optional iconography, decorations, etc.)
✔️	Color schemes	Includes both light and dark color schemes.
✔️	Behaviors	Includes descriptions of behaviors related to other components and responsive behaviors related to media breakpoints, size (minimums and maximums), orientation, alignment, position and layout (wrapping, truncation, overflow).

Container: The outermost div with class corner-indicator-container (plus position modifier classes: top-right, top-left, bottom-right, bottom-left).
Badge: The badge indicator (when label is provided), rendered as a child with class badge.
Dot: The dot indicator (when label is not provided), rendered as a child with class dot.
Outline: Optional ring outline, applied via bordered class and CSS token.
Children: The wrapped content (e.g., button, avatar, etc.).

Default: Indicator is visible in the specified position.
Outlined: Outline ring is shown when outline prop is true.
Pulse: Dot indicator animates when pulse prop is true.
Disabled: If disable is true, the indicator is not rendered (children only).

label: string — Text inside the badge indicator.
icon: ReactNode — Icon for badge indicator.
outline: boolean — Show outline ring.
pulse: boolean — Pulse animation (dot only).
offset, xOffset, yOffset: number — Control indicator position offset (px).
disable: boolean — Hide indicator, show only children.
position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' — Indicator position.
color: 'gray' | 'orange' | 'violet' | 'green' | 'red' | 'yellow' | 'blue' | 'lime' | 'cyan' — Indicator color.
size: 'md' | 'sm' | 'xs' | 'lg' — Indicator size.
variant: 'solid' | 'outlined' | 'glass' — Visual style (badge only).
growDirection: 'symmetric' | 'inward' | 'outward' — Direction the indicator grows.
indicatorProps: object — Extra props for Badge/Dot (except size, color, variant, pulse).
...divProps: All native div props (className, style, ...).

Date	Type	Description	Author	Associated issue(s)
YYYY-MM-DD	new	Initial design	Oanh Nguyen	PAR-52