Tag Component

Tags are used to label, categorize, or organize items using keywords that describe them.

<Tag>Default</Tag>
<Tag variant="feature">Feature</Tag>
<Tag variant="success">Success</Tag>
<Tag variant="warning">Warning</Tag>
<Tag variant="error">Error</Tag>
<Tag variant="info">Info</Tag>

<Tag size="small" variant="feature">Small Tag</Tag>
<Tag size="medium" variant="feature">Medium Tag</Tag>

interface TagProps {
  children: React.ReactNode;
  variant?: 'default' | 'feature' | 'success' | 'warning' | 'error' | 'info';
  size?: 'small' | 'medium';
}

function Tag({ children, variant = 'default', size = 'medium' }: TagProps) {
  return (
    <span className={`circuit-tag circuit-tag--${variant} circuit-tag--${size}`}>
      {children}
    </span>
  );
}

Add this CSS to your app/styles/circuit.css file:

.circuit-tag {
  display: inline-flex;
  align-items: center;
  font: var(--font-body-small);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: var(--sds-size-radius-50);
  border: 1px solid;
  transition: all 0.2s ease;
}

/* Sizes */
.circuit-tag--small {
  padding: var(--sds-size-space-25) var(--sds-size-space-100);
  font-size: 0.75rem;
}

.circuit-tag--medium {
  padding: var(--sds-size-space-50) var(--sds-size-space-150);
  font-size: 0.8rem;
}

/* Variants */
.circuit-tag--default {
  background: var(--surface-preview-background);
  color: var(--text-secondary);
  border-color: var(--border-default);
}

.circuit-tag--feature {
  background: var(--theme-info-bg);
  color: var(--theme-info-primary);
  border-color: var(--theme-info-border);
}

.circuit-tag--success {
  background: var(--theme-success-bg);
  color: var(--theme-success-primary);
  border-color: var(--theme-success-border);
}

.circuit-tag--warning {
  background: var(--theme-warning-bg);
  color: var(--theme-warning-primary);
  border-color: var(--theme-warning-border);
}

.circuit-tag--error {
  background: var(--theme-error-bg);
  color: var(--theme-error-primary);
  border-color: var(--theme-error-border);
}

.circuit-tag--info {
  background: var(--theme-info-bg);
  color: var(--theme-info-primary);
  border-color: var(--theme-info-border);
}

• Use Sparingly: Too many tags can create visual clutter
• Consistent Variants: Use semantic variants consistently across your app
• Readable Text: Ensure good contrast between text and background
• Grouping: Group related tags together with consistent spacing
• Truncation: Keep tag text concise - truncate long labels