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, TextField } from "reshaped/bundle";
import Badge from "@/components/ui/reshaped-badge";

export default function Demo() {
  return (
    <Reshaped theme="slate">
      <div style={{ maxWidth: 360, width: "100%", margin: "0 auto", padding: 24 }}>
        <TextField
          name="food"
          startSlot={
            <Badge
              onDismiss={() => {}}
              dismissAriaLabel="Remove ice-cream from selection"
            >
              Ice-cream
            </Badge>
          }
          placeholder="Placeholder"
        />
      </div>
    </Reshaped>
  );
}