@mshafiqyajid/react-badge
Headless badge hook and styled component. Three variants, six tones, dot indicator, count, dismissible.
Playground #
Animated count + BadgeAnchor
3
3
New feature0
Props
TSX
import { BadgeStyled } from "@mshafiqyajid/react-badge/styled";
import "@mshafiqyajid/react-badge/styles.css";
<BadgeStyled
tone="primary"
/>Install #
npm install @mshafiqyajid/react-badgeQuick start #
import { BadgeStyled } from "@mshafiqyajid/react-badge/styled";
import "@mshafiqyajid/react-badge/styles.css";
<BadgeStyled tone="success">Active</BadgeStyled>
<BadgeStyled tone="danger" variant="solid">Error</BadgeStyled>
<BadgeStyled tone="primary" dot>New</BadgeStyled>
<BadgeStyled tone="warning" dismissible onDismiss={() => {}}>Pending</BadgeStyled>Headless #
import { useBadge } from "@mshafiqyajid/react-badge";
const { badgeProps, dismissProps, isDismissed } = useBadge({
onDismiss: () => console.log("dismissed"),
});
if (isDismissed) return null;
return (
<span {...badgeProps} className="my-badge">
New
<button {...dismissProps}>×</button>
</span>
);API #
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "solid" | "subtle" | "outline" | "subtle" | Visual style |
| size | "sm" | "md" | "lg" | "md" | Size |
| tone | "neutral" | "primary" | "success" | "warning" | "danger" | "info" | "neutral" | Color tone |
| shape | "rounded" | "square" | "rounded" | Badge shape |
| dot | boolean | false | Show colored dot |
| pulse | boolean | false | Animate dot with pulsing ring |
| count | number | — | Numeric count overlay |
| maxCount | number | — | Cap count display, shows {n}+ when exceeded |
| uppercase | boolean | false | Uppercase label with wider tracking |
| dismissible | boolean | false | Show dismiss button |
| onDismiss | () => void | — | Called when dismissed |
| icon | ReactNode | — | Leading icon |
| hideOnZero | boolean | false | Render nothing when count is 0 and there is no other content. Useful for unread badges. |
| showZero | boolean | false | Force-render count={0}. Overrides hideOnZero. |
| className | string | — | Extra class on the root element |
| style | CSSProperties | — | Inline style override |
When count changes the displayed number animates with a flip transition (up when incrementing, down when decrementing).