Badge Abzeichen
Feedback
Rein darstellend
Einführung
Ein kleines visuelles Element, das Inhalte kennzeichnet oder kategorisiert.
Verwendung
New
Active
Error
import { Badge } from "../components/ui";
export default function MyPage() {
return (
<Badge colorPalette="blue" variant="solid">
New
</Badge>
);
}
CMS-Seitenbauer
Diese Komponente ist als badge-Block im Seitenbauer (content/pages/*.json) verfügbar:
{
"type": "badge",
"text": "New",
"colorPalette": "blue",
"variant": "solid"
}
Eigenschaften
| Eigenschaft | Typ | Beschreibung |
|---|---|---|
children | any | Inhalt, der innerhalb der Komponente gerendert wird. |
class | string | Benutzerdefinierte CSS-Klassen. |
colorPalette | string | Das Farbschema des Abzeichens. |
| variant | `"solid" \ | "subtle" \ | "surface" \ | "outline"` | Der visuelle Stil. |
| size | `"sm" \ | "md" \ | "lg" \ | "xl" \ | "2xl"` | Die Größe des Abzeichens. |
| interactive | boolean | Legt fest, ob die clientseitige Hydration aktiviert wird. |