1. Home
2. Components
3. Typography
4. Span

Span

A span element with control for typographic attributes.

Generally, span tags will go inside p tags and inherit whatever typographical attributes that paragraph has. But because spans are not limited to being inside paragraphs, this elements also allows you to control typographic attributes.

Features

• Drop-in replacement for the native <span> element.
• Automatically inherits the parent's design tokens (just like a normal span tag).
• Allows control of size, weight, alignment, and tracking.

Parts and their API

The tracking's default value depends on the size prop and is controlled through CSS variables: check out the styling section.

Usage

<P>
	<Span>This is a span.</Span>
</P>

Here's the <Span /> component in action.

This is a span.

Source

import { forwardRef, type HTMLAttributes } from 'react'
import { cn } from '#app/utils/tailwind-merge.ts'

/**
 * A span component.
 */
const Span = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLSpanElement>>(({ className, ...props }, ref) => <span ref={ref} className={cn('span', className)} {...props} />)
Span.displayName = 'Span'

export { Span }