@mshafiqyajid/react-badge
Headless badge hook and styled component. Three variants, six tones, dot indicator, count, dismissible.
Playground #
New feature
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>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 |