Text

Text primitive with consistent sizes, weights and tones.

Import

import { Text } from '@marbleui/ui'

Props

<Text>

Prop	Type	Default
as	`'div' \| 'small' \| 'span' \| 'label' \| 'em' \| 'p' \| 'strong'`	`'p'`
size	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'sm'`
tabular	`boolean`	`—`
tone	`'default' \| 'accent' \| 'success' \| 'danger' \| 'muted' \| 'subtle'`	`'default'`
truncate	`boolean`	`—`
weight	`'medium' \| 'normal' \| 'semibold'`	`'normal'`

Also accepts HTML element props (278).

Usage notes

Text primitive for consistent size, tone and weight. For headings use Heading; for long-form HTML or Markdown use Prose.

<Text tone="muted">Secondary text</Text>
<Text as="span" size="xs" tone="danger" weight="medium">Something went wrong</Text>

as is p (default), span, div, label, small, strong or em.
size is xs, sm (default), md or lg; tone is default, muted, subtle, accent, danger or success; weight is normal, medium or semibold.
truncate clips to one line with an ellipsis (the element needs a constrained width); tabular uses tabular numerals for aligned figures.
Check contrast when using subtle for text that matters.

Example source · show

import { Text } from './text'

export const styles = {
  Tones: () => (
    <div className="flex flex-col gap-1">
      <Text>Default body text</Text>
      <Text tone="muted">Muted secondary text</Text>
      <Text tone="subtle" size="xs">Subtle helper text</Text>
      <Text tone="accent" weight="medium">Accent emphasis</Text>
      <Text tone="danger" size="xs">Something went wrong</Text>
    </div>
  ),
  Sizes: () => (
    <div className="flex max-w-sm flex-col gap-2">
      <Text size="lg">Large lead paragraph for introductions and marketing copy.</Text>
      <Text size="md">Medium body for long-form reading.</Text>
      <Text size="sm" tone="muted">Small UI text for dense interfaces.</Text>
      <Text as="span" tabular weight="semibold">$1,204,330.00</Text>
    </div>
  ),
}

Source: packages/ui/src/text/text.tsx

Catalog