Tag

The Tag component is a micro-typography element used to label content. It is significantly smaller than standard text and features a high-contrast border/background combination to visually separate metadata (like dates, categories, or status) from body content.

Usage

Basic Tags

Tags are uppercase, bold, and monospaced by default. They are best used for quick-scan information.

2026 Remote TypeScript

<Stack type="row" gap="2">
  <Tag>2026</Tag>
  <Tag>Remote</Tag>
  <Tag>TypeScript</Tag>
</Stack>

Custom Colors

You can override the default gray appearance using utility classes. This is useful for status indicators (e.g., “Active”, “New”).

Active Beta

<Tag class="text-green-400 border-green-400/20 bg-green-400/5">
  Active
</Tag>

Context Example

Tags are often paired with Heading or Text components to provide context.

Trading Engine

In Progress

High-frequency matching engine written in Go.

<div class="flex items-center gap-3">
  <Heading renderAs="h3">Trading Engine</Heading>
  <Tag>In Progress</Tag>
</div>

Accessibility

The Tag component uses semantic HTML elements (<span> or <p>) to ensure proper accessibility. Ensure that the content within the tag is concise and meaningful for screen readers.

Props

Prop	Type	Default	Description
renderAs	’span’ \| ‘p'	'span’	Semantic HTML
class	string	undefined	Custom styling to override colors or margins.