Polarity Integration Component Library

Tag Component

A small label component with optional prefix and suffix icons.

Installation

npm install @polarityio/pi-tag

Peer Dependencies

• lit ^3.0.0

Usage

import '@polarityio/pi-tag';

<!-- Basic tag -->
<pi-tag label="Malicious"></pi-tag>

// Tag with icons (set via JavaScript property binding)
import { faShieldHalved } from '@fortawesome/free-solid-svg-icons';

const tag = document.querySelector('pi-tag');
tag.label = 'Secure';
tag.prefixIcon = faShieldHalved;

API Reference

Properties

| Property | Type | Default | Description | | ------------ | ----------------------------- | ----------- | ------------------------------------------------------------------------------------------------ | | label | string | '' | The text content of the tag | | prefixIcon | IconDefinition \| undefined | undefined | A FontAwesome IconDefinition displayed before the label (property only, not an HTML attribute) | | suffixIcon | IconDefinition \| undefined | undefined | A FontAwesome IconDefinition displayed after the label (property only, not an HTML attribute) |

CSS Custom Properties

| Property | Default | Description | | ----------------------- | ------------------- | ---------------------------- | | --pi-tag-border-color | rgb(96, 100, 112) | Border color of the tag | | --pi-tag-icon-size | 0.85em | Size of prefix/suffix icons | | --pi-tag-icon-color | currentColor | Color of prefix/suffix icons |

Theming

Customize the appearance using CSS custom properties. This component uses design tokens from @polarityio/pi-shared for consistent theming across the component library.

License

MIT