Wrapping row of tinted tags in five tones, each optionally removable.
The import and the props worth knowing about, in one place.
import { Badge1 } from "@/components/beste/piece/badge1";
<Badge1
tags={[
{
"label": "design",
"tone": "primary"
},
{
"label": "shipped",
"tone": "success"
},
{
"label": "needs review",
"tone": "warning"
},
{
"label": "archived",
"tone": "muted"
}
]}
removable={true}
/>Split chip with a monospace version string and a colored stage tag like NEW or BETA.
Dashed-border tag with a monospace code on the left and a colored discount callout on the right.