Badge

The Badge component is a small visual indicator used to highlight status, notifications, or counts in your application.

Basic Usage

import { Badge, ThemeProvider } from "@carton-org/react-neumorphism";

const MyComponent = () => {
  return <Badge size="md">New</Badge>;
};

New

Name	Type	Description	Required	Default Value
`inset`	`boolean`	Whether to use inset style for the badge	No	`false`
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	Size of the badge. Can be one of the predefined sizes from the theme	No	`"sm"`
`children`	`React.ReactNode`	Content to be displayed inside the badge	Yes	-
`badgeStyle`	`React.CSSProperties`	Custom styles to apply to the badge container	No	-
`badgeLabelStyle`	`React.CSSProperties`	Custom styles to apply to the badge label/text	No	-

Small

Medium

Large

Default

Inset

New Feature