Tag

Usage

import { Tag } from '@acronis-platform/shadcn-uikit';

Default

Tags in all available color variants.

View source

import { Tag } from '@acronis-platform/shadcn-uikit/react';

export function TagDefault() {
  return (
    <div className="flex flex-wrap gap-3">
      <Tag variant="success">Success</Tag>
      <Tag variant="info">Info</Tag>
      <Tag variant="warning">Warning</Tag>
      <Tag variant="critical">Critical</Tag>
      <Tag variant="danger">Danger</Tag>
      <Tag variant="neutral">Neutral</Tag>
    </div>
  );
}

Small

Tags in the smaller size variant.

View source

import { Tag } from '@acronis-platform/shadcn-uikit/react';

export function TagSmall() {
  return (
    <div className="flex flex-wrap gap-3">
      <Tag variant="success" size="small">
        Success
      </Tag>
      <Tag variant="info" size="small">
        Info
      </Tag>
      <Tag variant="warning" size="small">
        Warning
      </Tag>
      <Tag variant="critical" size="small">
        Critical
      </Tag>
      <Tag variant="danger" size="small">
        Danger
      </Tag>
      <Tag variant="neutral" size="small">
        Neutral
      </Tag>
    </div>
  );
}

With Icons

Tags with leading icons.

View source

import { Tag } from '@acronis-platform/shadcn-uikit/react';
import {
  CheckCircleIcon,
  CircleIcon,
  ExclamationCircleIcon,
  InfoIcon,
  TimesCircleIcon,
  WarningCircleIcon,
} from '@acronis-platform/shadcn-uikit';
export function TagWithIcons() {
  return (
    <div className="flex flex-wrap gap-3">
      <Tag variant="success" icon={<CheckCircleIcon className="h-4 w-4" />}>
        Active
      </Tag>
      <Tag variant="info" icon={<InfoIcon className="h-4 w-4" />}>
        Info
      </Tag>
      <Tag variant="warning" icon={<WarningCircleIcon className="h-4 w-4" />}>
        Warning
      </Tag>
      <Tag
        variant="critical"
        icon={<ExclamationCircleIcon className="h-4 w-4" />}
      >
        Critical
      </Tag>
      <Tag variant="danger" icon={<TimesCircleIcon className="h-4 w-4" />}>
        Error
      </Tag>
      <Tag variant="neutral" icon={<CircleIcon className="h-4 w-4" />}>
        Neutral
      </Tag>
    </div>
  );
}

Small With Icons

Small-sized tags with icons.

View source

import { Tag } from '@acronis-platform/shadcn-uikit/react';
import {
  CheckCircleIcon,
  CircleIcon,
  ExclamationCircleIcon,
  InfoIcon,
  TimesCircleIcon,
  WarningCircleIcon,
} from '@acronis-platform/shadcn-uikit';
export function TagSmallWithIcons() {
  return (
    <div className="flex flex-wrap gap-3">
      <Tag
        variant="success"
        size="small"
        icon={<CheckCircleIcon className="size-3" />}
      >
        Active
      </Tag>
      <Tag variant="info" size="small" icon={<InfoIcon className="size-3" />}>
        Info
      </Tag>
      <Tag
        variant="warning"
        size="small"
        icon={<WarningCircleIcon className="size-3" />}
      >
        Warning
      </Tag>
      <Tag
        variant="critical"
        size="small"
        icon={<ExclamationCircleIcon className="size-3" />}
      >
        Critical
      </Tag>
      <Tag
        variant="danger"
        size="small"
        icon={<TimesCircleIcon className="size-3" />}
      >
        Error
      </Tag>
      <Tag
        variant="neutral"
        size="small"
        icon={<CircleIcon className="size-3" />}
      >
        Neutral
      </Tag>
    </div>
  );
}

Status

Tags used to indicate status (active, pending, error, etc.).

View source

import { Tag } from '@acronis-platform/shadcn-uikit/react';
import {
  CheckCircleIcon,
  CircleIcon,
  ClockIcon,
  TimesCircleIcon,
  WarningCircleIcon,
} from '@acronis-platform/shadcn-uikit';
export function TagStatus() {
  return (
    <div className="flex flex-wrap gap-3">
      <Tag variant="success" icon={<CheckCircleIcon className="h-4 w-4" />}>
        Completed
      </Tag>
      <Tag variant="info" icon={<ClockIcon className="h-4 w-4" />}>
        In Progress
      </Tag>
      <Tag variant="warning" icon={<WarningCircleIcon className="h-4 w-4" />}>
        Pending
      </Tag>
      <Tag variant="danger" icon={<TimesCircleIcon className="h-4 w-4" />}>
        Failed
      </Tag>
      <Tag variant="neutral" icon={<CircleIcon className="h-4 w-4" />}>
        Draft
      </Tag>
    </div>
  );
}

Priority

Tags for priority levels.

View source

import { Tag } from '@acronis-platform/shadcn-uikit/react';
import {
  ExclamationCircleIcon,
  WarningCircleIcon,
} from '@acronis-platform/shadcn-uikit';
import { TrendingDownIcon, TrendingUpIcon } from '../icons/missing-icons';
export function TagPriority() {
  return (
    <div className="flex flex-wrap gap-3">
      <Tag variant="danger" icon={<TrendingUpIcon className="h-4 w-4" />}>
        Urgent
      </Tag>
      <Tag
        variant="critical"
        icon={<ExclamationCircleIcon className="h-4 w-4" />}
      >
        High
      </Tag>
      <Tag variant="warning" icon={<WarningCircleIcon className="h-4 w-4" />}>
        Medium
      </Tag>
      <Tag variant="info" icon={<TrendingDownIcon className="h-4 w-4" />}>
        Low
      </Tag>
    </div>
  );
}

Security

Tags for security severity levels.

View source

import { Tag } from '@acronis-platform/shadcn-uikit/react';
import {
  ExclamationCircleIcon,
  LockIcon,
  ShieldIcon,
} from '@acronis-platform/shadcn-uikit';
import { UnlockIcon } from '../icons/missing-icons';
export function TagSecurity() {
  return (
    <div className="flex flex-wrap gap-3">
      <Tag variant="success" icon={<ShieldIcon className="h-4 w-4" />}>
        Verified
      </Tag>
      <Tag variant="info" icon={<LockIcon className="h-4 w-4" />}>
        Encrypted
      </Tag>
      <Tag variant="warning" icon={<UnlockIcon className="h-4 w-4" />}>
        Unlocked
      </Tag>
      <Tag
        variant="danger"
        icon={<ExclamationCircleIcon className="h-4 w-4" />}
      >
        Vulnerable
      </Tag>
    </div>
  );
}

Feature

Tags for labeling feature types.

View source

import { Tag } from '@acronis-platform/shadcn-uikit/react';
import { StarIcon } from '@acronis-platform/shadcn-uikit';
import { ZapIcon } from '../icons/missing-icons';
export function TagFeature() {
  return (
    <div className="flex flex-wrap gap-3">
      <Tag variant="success" icon={<StarIcon className="h-4 w-4" />}>
        Premium
      </Tag>
      <Tag variant="info" icon={<ZapIcon className="h-4 w-4" />}>
        Fast
      </Tag>
      <Tag variant="warning" size="small">
        Beta
      </Tag>
      <Tag variant="neutral" size="small">
        Legacy
      </Tag>
    </div>
  );
}

Environment

Tags for deployment environments.

View source

import { Tag } from '@acronis-platform/shadcn-uikit/react';

export function TagEnvironment() {
  return (
    <div className="flex flex-wrap gap-3">
      <Tag variant="success">Production</Tag>
      <Tag variant="warning">Staging</Tag>
      <Tag variant="info">Development</Tag>
      <Tag variant="neutral">Testing</Tag>
    </div>
  );
}

Version

Tags for version labels.

View source

import { Tag } from '@acronis-platform/shadcn-uikit/react';

export function TagVersion() {
  return (
    <div className="flex flex-wrap gap-3">
      <Tag variant="success" size="small">
        v2.0
      </Tag>
      <Tag variant="info" size="small">
        v1.5
      </Tag>
      <Tag variant="neutral" size="small">
        v1.0
      </Tag>
      <Tag variant="warning" size="small">
        Deprecated
      </Tag>
    </div>
  );
}

Mixed Sizes

Tags of different sizes used together.

View source

import { Tag } from '@acronis-platform/shadcn-uikit/react';
import { CheckCircleIcon, ClockIcon } from '@acronis-platform/shadcn-uikit';
export function TagMixedSizes() {
  return (
    <div className="space-y-4">
      <div className="rounded-lg border p-4">
        <div className="mb-2 flex items-center justify-between">
          <h4 className="font-semibold">Project Alpha</h4>
          <Tag variant="success" icon={<CheckCircleIcon className="h-4 w-4" />}>
            Active
          </Tag>
        </div>
        <p className="mb-3 text-sm text-gray-600">
          A high-priority project with multiple components.
        </p>
        <div className="flex flex-wrap gap-2">
          <Tag variant="danger" size="small">
            Urgent
          </Tag>
          <Tag variant="info" size="small">
            Frontend
          </Tag>
          <Tag variant="success" size="small">
            Backend
          </Tag>
          <Tag variant="warning" size="small">
            v2.0
          </Tag>
        </div>
      </div>

      <div className="rounded-lg border p-4">
        <div className="mb-2 flex items-center justify-between">
          <h4 className="font-semibold">Project Beta</h4>
          <Tag variant="warning" icon={<ClockIcon className="h-4 w-4" />}>
            In Progress
          </Tag>
        </div>
        <p className="mb-3 text-sm text-gray-600">
          A medium-priority project in development phase.
        </p>
        <div className="flex flex-wrap gap-2">
          <Tag variant="info" size="small">
            Medium
          </Tag>
          <Tag variant="neutral" size="small">
            Design
          </Tag>
          <Tag variant="info" size="small">
            Development
          </Tag>
          <Tag variant="warning" size="small">
            Beta
          </Tag>
        </div>
      </div>
    </div>
  );
}

API Reference

Tag

Prop

Type

Edit on GitHub

Tag

On this page