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

Example

React

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

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

Vue

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

<template>
  <Badge
    color-scheme="primary"
    size="md"
    variant="subtle"
  >
    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'