Badge — Frontfriend

Interactive preview

Rendered from the shared Frontfriend stories with React Base, the same preview Studio shows. Styling comes from your Design System; the code below is native to Reka UI.

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download badge -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<script setup lang="ts">
import { Badge } from "@/components/ui/badge";

const args = {
  "subtle": false,
  "bullet": false,
  "default": "Badge",
  "dismissable": false,
  "children": "Badge",
  "variant": "main",
} satisfies Partial<
  InstanceType<typeof Badge> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Badge
    :variant="args.variant"
    :bullet="args.bullet"
    :subtle="args.subtle"
    :dismissable="args.dismissable"
    >{{ args.children }}</Badge
  >
</template>

Examples

Main Doc

<script setup lang="ts">
import { Badge } from "@/components/ui/badge";

const args = {
  "subtle": false,
  "bullet": false,
  "default": "Badge",
  "dismissable": false,
  "variant": "main",
} satisfies Partial<
  InstanceType<typeof Badge> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Badge
    :variant="args.variant"
    :subtle="args.subtle"
    :bullet="args.bullet"
    :dismissable="args.dismissable"
  >
    {{ args.default }}
  </Badge>
</template>

Main

<script setup lang="ts">
import { Badge } from "@/components/ui/badge";
import { Icon } from "@/components/ui/icon";

const args = {
  "subtle": false,
  "bullet": false,
  "default": "Badge",
  "dismissable": false,
  "variant": "main",
} satisfies Partial<
  InstanceType<typeof Badge> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <div class="flex gap-12 items-center">
    <div class="flex gap-3 items-center">
      <Badge :variant="args.variant" :subtle="args.subtle" :bullet="args.bullet"
        >Badge</Badge
      >
      <Badge :variant="args.variant" :subtle="false" :bullet="true">88</Badge>
      <Badge :variant="args.variant" :subtle="false" :bullet="true"
        ><Icon name="CircleDashed"
      /></Badge>
    </div>
    <div class="flex gap-3 items-center">
      <Badge :variant="args.variant" :subtle="true" :bullet="false"
        >Badge</Badge
      >
      <Badge :variant="args.variant" :subtle="true" :bullet="true">88</Badge>
      <Badge :variant="args.variant" :subtle="true" :bullet="true"
        ><Icon name="CircleDashed"
      /></Badge>
    </div>
  </div>
</template>

Secondary

<script setup lang="ts">
import { Badge } from "@/components/ui/badge";
import { Icon } from "@/components/ui/icon";

const args = {
  "subtle": false,
  "bullet": false,
  "default": "Badge",
  "dismissable": false,
  "variant": "secondary",
} satisfies Partial<
  InstanceType<typeof Badge> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <div class="flex gap-12 items-center">
    <div class="flex gap-3 items-center">
      <Badge :variant="args.variant" :subtle="args.subtle" :bullet="args.bullet"
        >Badge</Badge
      >
      <Badge :variant="args.variant" :subtle="false" :bullet="true">88</Badge>
      <Badge :variant="args.variant" :subtle="false" :bullet="true"
        ><Icon name="CircleDashed"
      /></Badge>
    </div>
    <div class="flex gap-3 items-center">
      <Badge :variant="args.variant" :subtle="true" :bullet="false"
        >Badge</Badge
      >
      <Badge :variant="args.variant" :subtle="true" :bullet="true">88</Badge>
      <Badge :variant="args.variant" :subtle="true" :bullet="true"
        ><Icon name="CircleDashed"
      /></Badge>
    </div>
  </div>
</template>

Tertiary

<script setup lang="ts">
import { Badge } from "@/components/ui/badge";
import { Icon } from "@/components/ui/icon";

const args = {
  "subtle": false,
  "bullet": false,
  "default": "Badge",
  "dismissable": false,
  "variant": "tertiary",
} satisfies Partial<
  InstanceType<typeof Badge> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <div class="flex gap-12 items-center">
    <div class="flex gap-3 items-center">
      <Badge :variant="args.variant" :subtle="args.subtle" :bullet="args.bullet"
        >Badge</Badge
      >
      <Badge :variant="args.variant" :subtle="false" :bullet="true">88</Badge>
      <Badge :variant="args.variant" :subtle="false" :bullet="true"
        ><Icon name="CircleDashed"
      /></Badge>
    </div>
    <div class="flex gap-3 items-center">
      <Badge :variant="args.variant" :subtle="true" :bullet="false"
        >Badge</Badge
      >
      <Badge :variant="args.variant" :subtle="true" :bullet="true">88</Badge>
      <Badge :variant="args.variant" :subtle="true" :bullet="true"
        ><Icon name="CircleDashed"
      /></Badge>
    </div>
  </div>
</template>

Brand

<script setup lang="ts">
import { Badge } from "@/components/ui/badge";
import { Icon } from "@/components/ui/icon";

const args = {
  "subtle": false,
  "bullet": false,
  "default": "Badge",
  "dismissable": false,
  "variant": "brand",
} satisfies Partial<
  InstanceType<typeof Badge> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <div class="flex gap-12 items-center">
    <div class="flex gap-3 items-center">
      <Badge :variant="args.variant" :subtle="args.subtle" :bullet="args.bullet"
        >Badge</Badge
      >
      <Badge :variant="args.variant" :subtle="false" :bullet="true">88</Badge>
      <Badge :variant="args.variant" :subtle="false" :bullet="true"
        ><Icon name="CircleDashed"
      /></Badge>
    </div>
    <div class="flex gap-3 items-center">
      <Badge :variant="args.variant" :subtle="true" :bullet="false"
        >Badge</Badge
      >
      <Badge :variant="args.variant" :subtle="true" :bullet="true">88</Badge>
      <Badge :variant="args.variant" :subtle="true" :bullet="true"
        ><Icon name="CircleDashed"
      /></Badge>
    </div>
  </div>
</template>

Success

<script setup lang="ts">
import { Badge } from "@/components/ui/badge";
import { Icon } from "@/components/ui/icon";

const args = {
  "subtle": false,
  "bullet": false,
  "default": "Badge",
  "dismissable": false,
  "variant": "success",
} satisfies Partial<
  InstanceType<typeof Badge> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <div class="flex gap-12 items-center">
    <div class="flex gap-3 items-center">
      <Badge :variant="args.variant" :subtle="args.subtle" :bullet="args.bullet"
        >Badge</Badge
      >
      <Badge :variant="args.variant" :subtle="false" :bullet="true">88</Badge>
      <Badge :variant="args.variant" :subtle="false" :bullet="true"
        ><Icon name="CircleDashed"
      /></Badge>
    </div>
    <div class="flex gap-3 items-center">
      <Badge :variant="args.variant" :subtle="true" :bullet="false"
        >Badge</Badge
      >
      <Badge :variant="args.variant" :subtle="true" :bullet="true">88</Badge>
      <Badge :variant="args.variant" :subtle="true" :bullet="true"
        ><Icon name="CircleDashed"
      /></Badge>
    </div>
  </div>
</template>

Warning

<script setup lang="ts">
import { Badge } from "@/components/ui/badge";
import { Icon } from "@/components/ui/icon";

const args = {
  "subtle": false,
  "bullet": false,
  "default": "Badge",
  "dismissable": false,
  "variant": "warning",
} satisfies Partial<
  InstanceType<typeof Badge> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <div class="flex gap-12 items-center">
    <div class="flex gap-3 items-center">
      <Badge :variant="args.variant" :subtle="args.subtle" :bullet="args.bullet"
        >Badge</Badge
      >
      <Badge :variant="args.variant" :subtle="false" :bullet="true">88</Badge>
      <Badge :variant="args.variant" :subtle="false" :bullet="true"
        ><Icon name="CircleDashed"
      /></Badge>
    </div>
    <div class="flex gap-3 items-center">
      <Badge :variant="args.variant" :subtle="true" :bullet="false"
        >Badge</Badge
      >
      <Badge :variant="args.variant" :subtle="true" :bullet="true">88</Badge>
      <Badge :variant="args.variant" :subtle="true" :bullet="true"
        ><Icon name="CircleDashed"
      /></Badge>
    </div>
  </div>
</template>

Destructive

<script setup lang="ts">
import { Badge } from "@/components/ui/badge";
import { Icon } from "@/components/ui/icon";

const args = {
  "subtle": false,
  "bullet": false,
  "default": "Badge",
  "dismissable": false,
  "variant": "destructive",
} satisfies Partial<
  InstanceType<typeof Badge> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <div class="flex gap-12 items-center">
    <div class="flex gap-3 items-center">
      <Badge :variant="args.variant" :subtle="args.subtle" :bullet="args.bullet"
        >Badge</Badge
      >
      <Badge :variant="args.variant" :subtle="false" :bullet="true">88</Badge>
      <Badge :variant="args.variant" :subtle="false" :bullet="true"
        ><Icon name="CircleDashed"
      /></Badge>
    </div>
    <div class="flex gap-3 items-center">
      <Badge :variant="args.variant" :subtle="true" :bullet="false"
        >Badge</Badge
      >
      <Badge :variant="args.variant" :subtle="true" :bullet="true">88</Badge>
      <Badge :variant="args.variant" :subtle="true" :bullet="true"
        ><Icon name="CircleDashed"
      /></Badge>
    </div>
  </div>
</template>

Info

<script setup lang="ts">
import { Badge } from "@/components/ui/badge";
import { Icon } from "@/components/ui/icon";

const args = {
  "subtle": false,
  "bullet": false,
  "default": "Badge",
  "dismissable": false,
  "variant": "informative",
} satisfies Partial<
  InstanceType<typeof Badge> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <div class="flex gap-12 items-center">
    <div class="flex gap-3 items-center">
      <Badge :variant="args.variant" :subtle="args.subtle" :bullet="args.bullet"
        >Badge</Badge
      >
      <Badge :variant="args.variant" :subtle="false" :bullet="true">88</Badge>
      <Badge :variant="args.variant" :subtle="false" :bullet="true"
        ><Icon name="CircleDashed"
      /></Badge>
    </div>
    <div class="flex gap-3 items-center">
      <Badge :variant="args.variant" :subtle="true" :bullet="false"
        >Badge</Badge
      >
      <Badge :variant="args.variant" :subtle="true" :bullet="true">88</Badge>
      <Badge :variant="args.variant" :subtle="true" :bullet="true"
        ><Icon name="CircleDashed"
      /></Badge>
    </div>
  </div>
</template>

Highlight

<script setup lang="ts">
import { Badge } from "@/components/ui/badge";
import { Icon } from "@/components/ui/icon";

const args = {
  "subtle": false,
  "bullet": false,
  "default": "Badge",
  "dismissable": false,
  "variant": "highlight",
} satisfies Partial<
  InstanceType<typeof Badge> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <div class="flex gap-12 items-center">
    <div class="flex gap-3 items-center">
      <Badge :variant="args.variant" :subtle="args.subtle" :bullet="args.bullet"
        >Badge</Badge
      >
      <Badge :variant="args.variant" :subtle="false" :bullet="true">88</Badge>
      <Badge :variant="args.variant" :subtle="false" :bullet="true"
        ><Icon name="CircleDashed"
      /></Badge>
    </div>
    <div class="flex gap-3 items-center">
      <Badge :variant="args.variant" :subtle="true" :bullet="false"
        >Badge</Badge
      >
      <Badge :variant="args.variant" :subtle="true" :bullet="true">88</Badge>
      <Badge :variant="args.variant" :subtle="true" :bullet="true"
        ><Icon name="CircleDashed"
      /></Badge>
    </div>
  </div>
</template>

Dismissable

<script setup lang="ts">
import { Badge } from "@/components/ui/badge";

const args = {
  "subtle": false,
  "bullet": false,
  "default": "Badge",
  "dismissable": true,
  "variant": "main",
} satisfies Partial<
  InstanceType<typeof Badge> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Badge
    :variant="args.variant"
    :subtle="args.subtle"
    :bullet="args.bullet"
    :dismissable="args.dismissable"
  >
    {{ args.default }}
  </Badge>
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

Prop	Type	Default	Description
`as`	`keyof HTMLElementTagNameMap`	`—`
`asChild`	`boolean`	`—`
`bullet`	`boolean`	`—`
`class`	`string`	`—`
`dismissable`	`boolean`	`—`
`subtle`	`boolean`	`—`
`variant`	`BadgeVariants["variant"]`	`—`	Variant of the badge

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.