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.

Rby reshaped

Install

npx @21st-dev/cli add reshaped/reshaped-badge

Loading preview...

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>Status</Badge>
      </div>
    </Reshaped>
  );
}