Reshaped Badge

Component

About

Renders its children as text content for communicating an object's status. Comes in multiple colors with faded and outline variants, three sizes, a rounded notification-bubble mode, start/end icons, onClick/href interactions, a dismiss button and a Badge.Container compound component for corner positioning.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Reshaped Badge to your project and fits it to your theme.

Code

How Reshaped Badge is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Reshaped, View } from "reshaped/bundle";
import Badge from "@/components/ui/reshaped-badge";

export default function Demo() {
  return (
    <Reshaped theme="slate">
      <div style={{ margin: "0 auto", padding: 24, display: "flex", justifyContent: "center" }}>
        <View gap={3} direction="row">
          <Badge size="small" color="critical" rounded>
            24
          </Badge>
          <Badge size="medium" color="primary">
            Status
          </Badge>
          <Badge size="large">New version</Badge>
        </View>
      </div>
    </Reshaped>
  );
}