Badge

Simple badge component.

Usage

<script setup>
import { Badge } from 'gurunkit';
</script>

<template>
  <Badge>Text</Badge>
</template>

Text

Color

Set badge color using color props. Supported values: primary, light, error, warning, success.

It's also supports dark mode, enable it by adding dark class to html tag.

<script setup>
import { Badge } from 'gurunkit';
</script>

<template>
  <Badge color="primary">Primary Badge</Badge>
  <Badge color="warning">Warning Badge</Badge>
  <Badge color="error">Error Badge</Badge>
  <Badge color="light">Light Badge</Badge>
  <Badge color="success">Success Badge</Badge>
</template>

Primary BadgeWarning BadgeError BadgeLight BadgeSuccess Badge

API

Props

Name	Type	Required	Default	Description
color	primary, light, success, warning, error	❌	primary	Badge color