Badge

The Badge component highlights status, labels, or categories with compact visual indicators.

Demo

React

SizeExtra SmallSmallMediumLargeExtra Large

VariantSolidSubtleOutline

NeutralSuccessWarningErrorPrimarySecondary

Vue

SizeExtra SmallSmallMediumLargeExtra Large

VariantSolidSubtleOutline

NeutralSuccessWarningErrorPrimarySecondary

Usage

React

import { Badge } from '@fintech-sandpit/ui/react';

return (
  <Badge variant="subtle" colorScheme="primary">
    New
  </Badge>
);

Vue

<script setup lang="ts">
import { Badge } from '@fintech-sandpit/ui/vue';
</script>

<template>
  <Badge variant="subtle" color-scheme="primary">
    New
  </Badge>
</template>

Props

React

Name	Type	Default	Description
colorScheme	ColorScheme	neutral	Color scheme for the badge
size	Size	md	Badge size
variant	BadgeVariant	subtle	Badge style variant

Vue

Name	Type	Default	Description
color-scheme	ColorScheme	neutral	Color scheme for the badge
size	Size	md	Badge size
variant	BadgeVariant	subtle	Badge style variant

Types

type BadgeVariant = 'solid' | 'subtle' | 'outline'
type ColorScheme = 'neutral' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger'
type Size = 'xs' | 'sm' | 'md' | 'lg'