diff --git a/packages/ui/src/v2/components/badge-v2.css b/packages/ui/src/v2/components/badge-v2.css
index 748c08a7116..44dfc7489d7 100644
--- a/packages/ui/src/v2/components/badge-v2.css
+++ b/packages/ui/src/v2/components/badge-v2.css
@@ -25,3 +25,9 @@
[data-component="tag"][data-high-contrast] {
border-color: var(--v2-border-border-strong);
}
+
+[data-component="tag"][data-variant="accent"] {
+ border: 0;
+ background: var(--v2-background-bg-accent);
+ color: var(--v2-text-text-inverse);
+}
diff --git a/packages/ui/src/v2/components/badge-v2.stories.tsx b/packages/ui/src/v2/components/badge-v2.stories.tsx
index 084838c0e19..19af508bc2d 100644
--- a/packages/ui/src/v2/components/badge-v2.stories.tsx
+++ b/packages/ui/src/v2/components/badge-v2.stories.tsx
@@ -8,10 +8,11 @@ Use alongside headings or lists for quick metadata.
### API
- Accepts standard span props.
+- Optional: \`variant\` is \`neutral\` (default) or \`accent\`.
- Optional: \`data-high-contrast\` attribute for stronger border contrast.
### Variants and states
-- Single size style.
+- Neutral and accent variants.
- Optional high-contrast border style.
### Behavior
@@ -52,3 +53,7 @@ export const HighContrast = {
),
}
+
+export const Accent = {
+ render: () => New,
+}
diff --git a/packages/ui/src/v2/components/badge-v2.tsx b/packages/ui/src/v2/components/badge-v2.tsx
index 3bb06259e1f..8583d46da9f 100644
--- a/packages/ui/src/v2/components/badge-v2.tsx
+++ b/packages/ui/src/v2/components/badge-v2.tsx
@@ -1,14 +1,17 @@
import { type ComponentProps, splitProps } from "solid-js"
import "./badge-v2.css"
-export interface TagProps extends ComponentProps<"span"> {}
+export interface TagProps extends ComponentProps<"span"> {
+ variant?: "neutral" | "accent"
+}
export function Tag(props: TagProps) {
- const [split, rest] = splitProps(props, ["class", "classList", "children"])
+ const [split, rest] = splitProps(props, ["class", "classList", "children", "variant"])
return (