A rotating circular text badge with a center icon for editorial seals and open for work stamps.
The import and the props worth knowing about, in one place.
import { Badge10 } from "@/components/beste/component/badge10";
import { Sparkle } from "lucide-react";
// End the text with a separator so the loop reads cleanly.
<Badge10 text="Open for work • Available now • " size={120} />
<Badge10
text="Award winning studio • Est. 2019 • "
icon={Sparkle} // center icon (default: Asterisk)
tone="muted" // "foreground" (default) | "muted" | "primary"
duration={20} // seconds per rotation
size={140} // diameter in px
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
text* | string | — | Circular text. End with a separator (e.g. "Open for work • ") so the loop reads cleanly |
size | number | — | Diameter in pixels |
duration | number | — | Seconds per full rotation |
icon | LucideIcon | — | Center icon (defaults to Asterisk) |
tone | "foreground" | "muted" | "primary" | — | Text and icon color |
className | string | — | Additional classes merged onto the root |