Text

When to use

• A date, a count or a name styled apart from the text around it
• A label or a value in a layout, at a size and colour from the tokens

Choosing between showing text:

Component	Use it for	Renders	For example
Heading	The title of a page or a section, at a rank in the outline	<h1>–<h6>	A page title, a card title
Paragraph	A block of running text	<p>	Body copy, a description
Text	A run of text inside other text, styled from the tokens	<span>	A date, a count, a name
Kbd	A key or a shortcut	<kbd>	Ctrl + K
Link	Text that goes somewhere	<a>	Read more

Updated 4 Oct 2026 by Ada. The build is ready to ship, with 3 warnings left.

import { Paragraph, Text } from '@arun-dev/ui';

export default function TextBasics() {
  return (
    <Paragraph>
      Updated{' '}
      <Text render={<time dateTime="2026-10-04" />} color="muted">
        4 Oct 2026
      </Text>{' '}
      by <Text weight="semibold">Ada</Text>. The build is{' '}
      <Text render={<strong />} color="accent">
        ready to ship
      </Text>
      , with{' '}
      <Text size="sm" color="secondary">
        3 warnings
      </Text>{' '}
      left.
    </Paragraph>
  );
}

Text is a <span>, which means nothing to assistive technology. When the styling carries meaning, render the element that says so: render={<strong />} for importance, render={<em />} for stress, render={<time />} for a date.

Each prop left out is inherited from the text around it.

Props

Text props

Prop	Type	Default	Description
size	'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl'	—	A step on the type scale: the --text-* token of the same name. Inherited from the text around it.
color	'primary' | 'secondary' | 'muted' | 'accent'	—	A text colour role: the --color-text-* token of the same name. Inherited from the text around it.
weight	'normal' | 'medium' | 'semibold' | 'bold'	—	A font weight: the --font-weight-* token of the same name. Inherited from the text around it.
className	string	—	Concatenated with the component's own classes, never replacing them.
render	ReactElement	—	Element or component to render instead of the default. Props, className, event handlers and ref are merged onto it.
ref	Ref<HTMLElement>	—	Ref to the rendered element. Merged with any ref on the render element.
…rest	HTMLAttributes	—	Anything else is spread onto the rendered element, so id, aria-*, data-* and event handlers all reach the DOM.

Notes

• Without React, the same classes are utilities: text-size-*, text-color-* and font-weight-*.
• To cut a line short with an ellipsis, add the truncate class to a block element.