Reshaped Badge

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.

import { Reshaped } 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" }}>
        <Badge onClick={() => {}}>Status</Badge>
      </div>
    </Reshaped>
  );
}