Skip to content

Text

Body-copy primitive with responsive size, weight, alignment, role variants, and truncation.

stable
since v0.1.0
4.26 kB
typography
primitive

Preview

tsx

import { Text } from '@arshad-shah/cynosure-react';

export default function Example() {
  return <Text>Body copy renders in the Text component.</Text>;
}

Sizes

Five body sizes are available — xs, sm, md (default), lg, and xl — each pulling family, font-size, and line-height from the matching body composite tokens.

Preview

tsx

import { Text } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
      <Text size="xs">Extra small body copy</Text>
      <Text size="sm">Small body copy</Text>
      <Text size="md">Medium body copy (default)</Text>
      <Text size="lg">Large body copy</Text>
      <Text size="xl">Extra large body copy</Text>
    </div>
  );
}

Weights

Pick from regular, medium, semibold, and bold to shift emphasis without changing scale.

Preview

tsx

import { Text } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
      <Text weight="regular">Regular weight</Text>
      <Text weight="medium">Medium weight</Text>
      <Text weight="semibold">Semibold weight</Text>
      <Text weight="bold">Bold weight</Text>
    </div>
  );
}

Variants

variant layers a role on top of size: caption for de-emphasised metadata, overline for uppercase eyebrow labels, and lead for relaxed lead-in paragraphs. The default body variant leaves typography untouched.

Preview

tsx

import { Text } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
      <Text variant="overline" size="xs">
        Section eyebrow
      </Text>
      <Text variant="lead" size="lg">
        Lead paragraph carries the room with a relaxed line-height.
      </Text>
      <Text>Default body sits in between for sustained reading.</Text>
      <Text variant="caption" size="sm">
        Caption text holds metadata in muted tone.
      </Text>
    </div>
  );
}

Decorations

Combine italic, underline, and strikethrough to style inline runs. decorationColor recolours underline and strikethrough independently from the text colour.

Preview

tsx

import { Text } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
      <Text italic>Italic emphasis</Text>
      <Text underline>Underlined run</Text>
      <Text strikethrough>Struck-through value</Text>
      <Text underline strikethrough>
        Both decorations together
      </Text>
    </div>
  );
}

Truncate

Pass truncate as a boolean for single-line ellipsis or a number greater than one for multi-line clamp.

Preview

tsx

import { Text } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', maxWidth: '20rem' }}>
      <Text truncate>
        Single-line truncation keeps a label tidy when space is tight and the string runs long.
      </Text>
      <Text truncate={3}>
        Multi-line clamp lets the copy breathe for a few rows before fading out. Useful for card
        descriptions where you want a hint of the body without surrendering the layout to an
        unbounded paragraph.
      </Text>
    </div>
  );
}

Rendered element

Swap the rendered element with as (span, p, div, label, strong, em) so semantics match the surrounding flow without losing styling.

Preview

tsx

import { Text } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
      <Text as="p">Rendered as a paragraph block.</Text>
      <Text as="span">Inline span run.</Text>
      <Text as="strong" weight="semibold">
        Strong emphasis
      </Text>
      <Text as="em" italic>
        Emphasised italic
      </Text>
    </div>
  );
}

API

PropTypeDefaultDescription

size

Responsive<TextSize>

—

Body type scale step. Maps to the `body.*` composite typography tokens.

weight

Responsive<TextWeight>

—

Font-weight token. Resolves to the matching `font-weight-*` CSS variable.

align

Responsive<TextAlign>

—

Horizontal text alignment.

variant

"body"|"caption"|"overline"|"lead"

—

Semantic role atop the base size — e.g. `caption`, `overline`, `lead`.

truncate

number|boolean

—

`true` → single-line truncation; `number > 1` → multi-line line-clamp.

italic

boolean

—

Renders italic glyphs via `font-style: italic`.

underline

boolean

—

Draws a `text-decoration: underline` line.

strikethrough

boolean

—

Draws a `text-decoration: line-through` line.

decorationColor

"bg.canvas"|"bg.surface"|"bg.subtle"|"bg.muted"|"bg.raised"|"bg.overlay"|"bg.inverse"|"fg.subtle"|"fg.muted"|"fg.inverse"|"fg.default"|"fg.disabled"|"fg.onAccent"|"border.subtle"|"border.default"|"border.disabled"|"border.strong"|"border.focus"|"accent.solid"|"accent.solidHover"|"accent.solidActive"|"accent.soft"|"accent.softHover"|"accent.softActive"|"accent.ring"|"accent.onSolid"|"feedback.success.foreground"|"feedback.success.border"|"feedback.success.solid"|"feedback.success.soft"|"feedback.success.onSolid"|"feedback.danger.foreground"|"feedback.danger.border"|"feedback.danger.solid"|"feedback.danger.soft"|"feedback.danger.onSolid"|"feedback.warning.foreground"|"feedback.warning.border"|"feedback.warning.solid"|"feedback.warning.soft"|"feedback.warning.onSolid"|"feedback.info.foreground"|"feedback.info.border"|"feedback.info.solid"|"feedback.info.soft"|"feedback.info.onSolid"

—

Colour for `underline` / `strikethrough` decorations.

className

string

—

Additional class names appended after Cynosure's base classes.

style

CSSProperties

—

Inline style overrides merged last; wins over Cynosure-computed style.

children

ReactNode

—

Rendered content.

padding

Responsive<SpaceToken>

—

Padding on all four sides. Token from the spacing scale.

paddingX

Responsive<SpaceToken>

—

Horizontal padding (left + right). Overrides `padding` on the X axis.

paddingY

Responsive<SpaceToken>

—

Vertical padding (top + bottom). Overrides `padding` on the Y axis.

paddingTop

Responsive<SpaceToken>

—

Padding on the top edge. Beats `padding` / `paddingY`.

paddingRight

Responsive<SpaceToken>

—

Padding on the right (inline-end in RTL) edge.

paddingBottom

Responsive<SpaceToken>

—

Padding on the bottom edge.

paddingLeft

Responsive<SpaceToken>

—

Padding on the left (inline-start in RTL) edge.

margin

Responsive<MarginValue>

—

Margin on all four sides. Accepts the spacing scale or `"auto"`.

marginX

Responsive<MarginValue>

—

Horizontal margin (left + right). Use `"auto"` to centre.

marginY

Responsive<MarginValue>

—

Vertical margin (top + bottom).

marginTop

Responsive<MarginValue>

—

Margin on the top edge.

marginRight

Responsive<MarginValue>

—

Margin on the right edge.

marginBottom

Responsive<MarginValue>

—

Margin on the bottom edge.

marginLeft

Responsive<MarginValue>

—

Margin on the left edge.

width

Responsive<SizeValue>

—

Element width. Accepts a `SpaceToken`, `LengthValue`, or named alias.

height

Responsive<SizeValue>

—

Element height. Accepts a `SpaceToken`, `LengthValue`, or named alias.

minWidth

Responsive<SizeValue>

—

Minimum width — useful for preventing flex children from collapsing.

maxWidth

Responsive<SizeValue>

—

Maximum width — `"prose"` caps to a comfortable reading measure.

minHeight

Responsive<SizeValue>

—

Minimum height.

maxHeight

Responsive<SizeValue>

—

Maximum height.

background

Responsive<ColorToken>

—

Background colour. Use a `ColorToken` like `"bg.surface"` for theme awareness.

color

Responsive<ColorToken>

—

Text colour. Inherits unless set.

borderColor

Responsive<ColorToken>

—

Border colour. Pair with `borderWidth` to make the border visible.

borderWidth

Responsive<BorderWidth>

—

Border thickness in scale steps.

borderStyle

Responsive<BorderStyle>

—

Border line style.

borderRadius

Responsive<RadiusToken>

—

Corner rounding token.

boxShadow

Responsive<ShadowToken>

—

Drop-shadow token from the elevation scale.

opacity

Responsive<number | `${number}`>

—

Opacity 0–1. Use sparingly — prefer surface tokens over translucency.

overflow

Responsive<Overflow>

—

How content that exceeds the box is handled.

overflowX

Responsive<Overflow>

—

Horizontal-axis overflow control. Overrides `overflow` for the X axis.

overflowY

Responsive<Overflow>

—

Vertical-axis overflow control.

display

Responsive<Display>

—

CSS `display` value. `"contents"` removes the element's box from layout.

position

Responsive<Position>

—

CSS `position`. Pair with `top`/`right`/`bottom`/`left` for placement.

top

Responsive<InsetValue>

—

Top inset (when positioned). Accepts a `SpaceToken`, `"auto"`, `"0"`, or `LengthValue`.

right

Responsive<InsetValue>

—

Right inset (when positioned).

bottom

Responsive<InsetValue>

—

Bottom inset (when positioned).

left

Responsive<InsetValue>

—

Left inset (when positioned).

zIndex

Responsive<ZIndexToken>

—

Stacking-context layer token (`"modal"`, `"tooltip"`, …).

gridColumn

Responsive<string>

—

Grid-column shorthand (e.g. `"1 / 3"`, `"span 2"`).

gridRow

Responsive<string>

—

Grid-row shorthand.

gridArea

Responsive<string>

—

Named grid area.

flex

Responsive<"1" | "none" | "auto" | "initial" | (string & {})>

—

Shorthand: `1 | auto | none | initial | <css>`. Resolves to `flex` on the child.

flexGrow

Responsive<number | `${number}`>

—

Grow factor inside a flex container.

flexShrink

Responsive<number | `${number}`>

—

Shrink factor inside a flex container.

flexBasis

Responsive<"content" | SizeValue>

—

Initial main-axis size before grow/shrink.

alignSelf

Responsive<AlignSelf>

—

Override `align-items` for a single child.

justifySelf

Responsive<JustifySelf>

—

Override `justify-items` for a single child (grid).

order

Responsive<number | `${number}`>

—

Flex/grid child reorder index.

asChild

boolean

—

When `true`, renders the primitive's single React child via `Slot`, forwarding className/style/ref/event handlers onto it.

as

"strong"|"span"|"p"|"div"|"label"|"em"

"span"

Rendered intrinsic element. Restricted to inline-friendly tags.

Accessibility

Choose the rendered element via as so the document outline stays meaningful — use p for paragraphs, span for inline runs, label only inside form contexts.
Avoid Text where a heading belongs; reach for the Heading component when content introduces a section.
Keep size + weight combinations above the platform contrast minimum; variant="caption" and variant="lead" use the muted foreground token and should stay on backgrounds that preserve contrast.
truncate hides overflow visually only — supply the full string in the DOM (or title) so assistive tech still receives the complete content.

Recipes

Pair Text with Heading to build a readable title-and-body grouping.
Use variant="overline" with size="xs" for tight section eyebrows above a Heading.
Drop asChild onto a framework link to project Text’s typography onto a routed element without an extra wrapper.
For long-form prose, constrain the parent width so line length stays readable.