LanguageTag

The LanguageTag component provides a clean, consistent way to display programming language indicators. Using monospace typography and design system tokens, it integrates seamlessly with code documentation, project portfolios, and technical content.

Basic Usage

Simple language tags for content identification

TypeScript

Code

<LanguageTag language="TypeScript" />

Multiple Languages

Display multiple technologies in flexible layouts

TypeScriptJavaScriptPythonRustGoSvelte

Code


  <LanguageTag TypeScript />

  <LanguageTag JavaScript />

  <LanguageTag Python />

  <LanguageTag Rust />

  <LanguageTag Go />

  <LanguageTag Svelte />

API Reference

Props

Prop	Type	Default	Description
`language`	`string`	-	Programming language to display
`class`	`string`	`''`	Additional CSS classes

Design Specifications

Font Family: Monospace (var(–font-mono))
Typography: Caption size with design system tokens
Padding: 4px vertical, 8px horizontal
Border Radius: 4px for subtle rounding
Background: Surface secondary with border

Design Philosophy

Developer-Friendly Typography

The component uses monospace fonts to:

Match code context where tags typically appear
Provide consistent character width for alignment
Create familiar feel for technical audiences
Maintain readability at small sizes

Subtle Visual Design

Clean, minimal aesthetics that:

Don’t compete with content for attention
Integrate with existing layouts seamlessly
Follow design system patterns consistently
Work in both light and dark themes

Usage Examples

Basic Usage

<script>
import LanguageTag from '$lib/shared/components/layout/LanguageTag.svelte';
</script>

<LanguageTag language="TypeScript" />
<LanguageTag language="Python" />
<LanguageTag language="Rust" />

With Custom Styling

<LanguageTag language="JavaScript" class="highlight-tag" />

<style>
  :global(.highlight-tag) {
    background: color-mix(in oklch, var(--primary) 15%, var(--surface-secondary));
    border-color: var(--primary);
  }
</style>

In Code Documentation

<div class="code-block">
  <div class="code-header">
    <LanguageTag language="TypeScript" />
    <span class="filename">components/Button.ts</span>
  </div>
  <pre><code><!-- Your code here --></code></pre>
</div>

In Project Cards

<div class="project-card">
  <h3>Design System</h3>
  <p>Component library with modern tooling</p>
  <div class="tech-stack">
    <LanguageTag language="Svelte" />
    <LanguageTag language="TypeScript" />
    <LanguageTag language="CSS" />
  </div>
</div>