Badge

Displaying a colorful badge element.
stableView sourceRadix Themes
In progressIn reviewComplete
vue
<script setup lang="ts">
import { Badge } from '@typlog/ui'
</script>

<template>
  <div class="flex items-center gap-2">
    <Badge color="orange">In progress</Badge>
    <Badge color="blue">In review</Badge>
    <Badge color="green">Complete</Badge>
  </div>
</template>

API Reference ​

PropDefaultType
as"span"
AsTag

The element or component this component should render as.

asChild
–
boolean
color
–
Color

Overrides the accent color inherited from the theme.

highContrast
–
boolean

Uses a higher contrast color for the component.

radius"small"
"none""small""medium""large""full"

Overrides the radius inherited from the theme.

size"1"
"1""2""3"

Control the size of the badge.

variant"soft"
"solid""soft""outline""surface"

The visual variant to apply.

Examples ​

Size ​

Use the size prop to control the size of the badge.

In reviewIn reviewIn review
vue
<script setup lang="ts">
import { Badge } from '@typlog/ui'
</script>

<template>
  <div class="flex items-center gap-2">
    <Badge size="1">In review</Badge>
    <Badge size="2">In review</Badge>
    <Badge size="3">In review</Badge>
  </div>
</template>

Variant ​

Use the variant prop to control the visual style of the badge.

solidsoftsurfaceoutline
vue
<script setup lang="ts">
import { Badge } from '@typlog/ui'
</script>

<template>
  <div class="flex items-center gap-2">
    <Badge variant="solid">solid</Badge>
    <Badge variant="soft">soft</Badge>
    <Badge variant="surface">surface</Badge>
    <Badge variant="outline">outline</Badge>
  </div>
</template>

Radius ​

nonesmallmediumlargefull
vue
<script setup lang="ts">
import { Badge } from '@typlog/ui'
</script>

<template>
  <div class="flex items-center gap-2">
    <Badge radius="none">none</Badge>
    <Badge radius="small">small</Badge>
    <Badge radius="medium">medium</Badge>
    <Badge radius="large">large</Badge>
    <Badge radius="full">full</Badge>
  </div>
</template>