Density Text
Render compact text with a controlled visual density.
Preview
Import
import { DensityText } from "@sigil-ui/components";Usage
<div className="flex w-full flex-col gap-[var(--s-space-3)]">
<DensityText role="chrome">System status</DensityText>
<DensityText role="counter">519 tokens compiled</DensityText>
<DensityText role="detail">Detailed interface metadata</DensityText>
<DensityText role="nav">Documentation navigation</DensityText>
<DensityText role="body">Readable supporting copy for a product surface.</DensityText>
<DensityText role="headline" as="h3">Agent-first design.</DensityText>
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
role | DensityRole | — | The density role determines the font size and family. |
as | "span" | "p" | "div" | "h1" | "h2" | "h3" | "h4" | "label... | span | Render as a different element. |
mono | boolean | — | Mono font (for chrome/counter/detail roles). Auto-applied for chrome/counter. |
uppercase | boolean | — | Uppercase (for chrome/counter roles). Auto-applied for chrome. |
muted | boolean | false for body/base/headline, true for chrome | Muted color. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-font-mono | Font mono |
--s-font-display | Font display |
--s-text-muted | Text muted |
--s-text | Text |
--s-heading-weight | Heading weight |
--s-heading-tracking | Heading tracking |