Component reference

Text

One run of copy in a theme text role.

Preview

Roles between components

Five roles cover the copy a host places between components. Headings stay with Section and PageHeader, field labels with Field, and code with the code components.

packages/meowtail/stories/typography.stories.tsxline 17tsx

render: () => (
  <Specimens>
    <Specimen label="Roles" width="content">
      <Stack gap="compact">
        <Text variant="eyebrow">Eyebrow · labels a group</Text>
        <Text>Body · the default reading copy for a sentence or two.</Text>
        <Text variant="secondary">
          Secondary · supporting copy that explains the line above it.
        </Text>
        <Text variant="label">Label · a name in a compact surface.</Text>
        <Text variant="caption">Caption · receipts, counts and fine print.</Text>
      </Stack>
    </Specimen>
    <Specimen
      label="One header unit"
      note="Eyebrow, title, description, then content: one start edge, tight inside, a section step apart."
      width="content"
    >
      <Card>
        <Stack gap="normal">
          <Stack gap="compact">
            <Text variant="eyebrow">Workspace · Delivery</Text>
            <Inline gap="compact" align="center">
              <Text as="span">
                <strong>Weekly digest</strong>
              </Text>
              <Status state="success" label="On" />
            </Inline>
            <Text variant="secondary">
              A summary of progress, decisions and upcoming milestones, sent every Monday.
            </Text>
          </Stack>
          <ActionRow>
            <Button size="small">Edit schedule</Button>
            <Button size="small" variant="quiet">
              Preview
            </Button>
          </ActionRow>
          <Text variant="caption">Last sent on Monday at 09:00.</Text>
        </Stack>
      </Card>
    </Specimen>
  </Specimens>
)

Installation

bun add meowtail

Usage

Taken from the examples on this page.

usage.tsxtsx

import { Text } from "meowtail";

<Text variant="eyebrow">Eyebrow · labels a group</Text>

Examples

The other stories that show this component.

The type ramp

Every piece of text is one of these styles. Each binds a size to its line box, weight and tracking; titles close up slightly, and all of it is set in the UI face.

packages/meowtail/stories/typography.stories.tsxline 165tsx

render: () => (
  <Specimens>
    <Specimen label="Styles" width="content">
      <Stack gap="normal">
        {ramp.map((style) => (
          <Stack gap="compact">
            <span
              style={{
                color: "var(--ui-ink-primary)",
                font: `${style.weight} ${style.size} / ${style.line} ${"mono" in style ? t.mono : t.sans}`,
                letterSpacing:
                  "tight" in style
                    ? `${t.trackingTight}`
                    : "caps" in style
                      ? `${t.trackingCaps}`
                      : undefined,
                textTransform: "caps" in style ? "uppercase" : undefined,
              }}
            >
              {style.sample}
            </span>
            <Text variant="caption">
              <code>{style.name}</code> · {style.spec}
            </Text>
          </Stack>
        ))}
      </Stack>
    </Specimen>
  </Specimens>
)

API reference

Emphasis and fine print keep their native elements (strong, em, small) inside it.

Props

Prop	Type	Default
`variant`	`"body" \| "secondary" \| "label" \| "caption" \| "eyebrow"`	`"body"`
`as`A paragraph by default; `span` for a run inside a line, `div` for a block that holds other blocks.	`"p" \| "span" \| "div"`	`"p"`

Also takes className, children and the attributes and events of its root element.

DOM parts

root

Registry

The component is registered as text in the meowtail component registry.