Tag

The Tag component displays labels, categories, or tags with support for left/right icons and close functionality.

Demo

React

VariantSolidSubtleOutline

Color schemeNeutralPrimarySecondarySuccessWarningDanger

SizeSmallMediumLarge

Default TagWith Left IconWith Right IconClosable Tag

Vue

VariantSolidSubtleOutline

Color schemeNeutralPrimarySecondarySuccessWarningDanger

SizeSmallMediumLarge

Default Tag With Left Icon With Right Icon Closable Tag

Usage

React

import { Tag } from '@fintech-sandpit/ui/react';
import { faTag } from '@fortawesome/free-solid-svg-icons';

return (
  <Tag
    colorScheme="primary"
    leftIcon={faTag}
  >
    Label
  </Tag>
);

Vue

<script setup lang="ts">
import { Tag } from '@fintech-sandpit/ui/vue';
import { faTag } from '@fortawesome/free-solid-svg-icons';
</script>

<template>
  <Tag
    color-scheme="primary"
    :left-icon="faTag"
  >
    Label
  </Tag>
</template>

Props

React

Name	Type	Default	Description
colorScheme	ColorScheme	neutral	Color scheme
size	Size	md	Tag size
variant	TagVariant	subtle	Visual variant
leftIcon	IconDefinition		Left icon definition 1
rightIcon	IconDefinition		Right icon definition 1
closable	boolean	false	Whether the tag can be closed

Vue

Name	Type	Default	Description
color-scheme	ColorScheme	neutral	Color scheme
size	Size	md	Tag size
variant	TagVariant	subtle	Visual variant
left-icon	IconDefinition		Left icon definition 1
right-icon	IconDefinition		Right icon definition 1
closable	boolean	false	Whether the tag can be closed

1. See Icons for the list of available icon definitions.

Events

React

Name	Type	Description
onClose	() => void	Close event

Vue

Name	Payload	Description
close	void	Close event

Types

type ColorScheme = 'neutral' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger'
type TagSize = 'sm' | 'md' | 'lg'
type TagVariant = 'subtle' | 'solid' | 'outline'