Text

Text is a small set of semantic text primitives with shared typography, tone, formatting, truncation, copy, and inline-editing behavior:

• Text renders inline content as a span;
• Text.P renders a paragraph as a p element;
• Text.H renders a heading from h1 through h5.

All three primitives accept the shared text properties and forward standard HTML attributes and event handlers to their semantic element.

InstallationCopy Anchor Link

import { Text } from '@mosmox/ui';

HeadingsCopy Anchor Link

Text.H supports heading levels 1 through 5. The default is level 1.

<Text.H level={1}>Page title</Text.H>
<Text.H level={2}>Section title</Text.H>
<Text.H level={3}>Subsection title</Text.H>
<Text.H level={4}>Card title</Text.H>
<Text.H level={5}>Small heading</Text.H>

The component does not currently expose an h6 level. Heading styles are responsive for h1–h3; h4 and h5 use fixed sizes.

Paragraphs and inline textCopy Anchor Link

Text.P renders a block paragraph and is full width by default. Set fullWidth={false} when the paragraph should remain inline-sized. Text renders a span for short inline content.

<Text.P>Paragraph content with the standard body rhythm.</Text.P>
<Text.P fullWidth={false}>Compact paragraph</Text.P>
<Text>Inline content inside a sentence.</Text>

Formatting and tonesCopy Anchor Link

Formatting props can be combined and are available on Text, Text.P, and Text.H:

<Text strong>Strong</Text>
<Text italic>Italic</Text>
<Text underline>Underlined</Text>
<Text delete>Deleted</Text>
<Text mark>Marked</Text>
<Text code>const ready = true;</Text>
<Text disabled>Disabled</Text>

tone controls the semantic color. The available tones are default, secondary, success, warning, and danger.

<Text.P tone="secondary">Supporting text</Text.P>
<Text.P tone="success">Saved successfully</Text.P>
<Text.P tone="warning">Check these values</Text.P>
<Text.P tone="danger">Something went wrong</Text.P>

Ellipsis and expansionCopy Anchor Link

Set ellipsis to truncate overflowing content. A boolean uses single-line ellipsis. The object form supports a multi-line clamp through rows and an optional expand/collapse action through expandable.

<Text.P ellipsis>Long content is truncated on one line.</Text.P>

<Text.P ellipsis={{ rows: 2, expandable: true }}>
  Long content is clamped to two lines and can be expanded by the user.
</Text.P>

onExpand receives the next expanded state (true or false) when the action is used. The action label changes between Expand and Collapse.

CopyingCopy Anchor Link

Set copyable to render a Copy action next to the text. With copyable={true}, the displayed text is copied and the default accessible label is Copy text.

<Text.P copyable>Copy this text</Text.P>

The object form can provide replacement text, a callback, and an accessible label:

<Text
  copyable={{
    text: 'Value copied from another source',
    label: 'Copy value',
    onCopy: () => console.log('Copied'),
  }}
>
  Copy displayed text
</Text>

The component attempts to use navigator.clipboard.writeText. The callback runs after the copy attempt, including in restricted contexts where the Clipboard API is unavailable.

EditingCopy Anchor Link

Set editable to make the text enter an inline editing mode when clicked. The editor is a textarea with Save and keyboard controls.

<Text.P editable={{ onChange: setDescription, onEnd: saveDescription }}>
  Editable description
</Text.P>

The object form supports an initial editing state, an initial value, and lifecycle callbacks:

<Text.P
  editable={{
    editing: true,
    defaultValue: 'Draft text',
    onStart: () => console.log('Editing started'),
    onChange: (value) => setDraft(value),
    onEnd: (value) => saveDraft(value),
  }}
>
  Original text
</Text.P>

• editing: true starts with the textarea open;
• defaultValue is used as the initial editable value; otherwise a string child is used;
• clicking the text starts editing and calls onStart;
• Save or Enter without Shift exits editing and calls onChange and onEnd with the current value;
• Shift+Enter inserts a newline;
• Escape exits the editor without calling onChange or onEnd.

API referenceCopy Anchor Link

Shared propertiesCopy Anchor Link

All other supported HTMLAttributes<HTMLElement> are forwarded to the rendered semantic element. children and the native color attribute are controlled by the component API.

Text.P propertiesCopy Anchor Link

Text.H propertiesCopy Anchor Link

Accessibility and markupCopy Anchor Link

Use the primitive that matches the content structure: headings for document hierarchy, paragraphs for blocks of prose, and inline Text for content inside another sentence or component. The heading level is rendered as a real HTML heading element, and the copy, expand, save, and edit controls are native buttons and textarea controls with keyboard support.