Text

The Text component is the foundation for all text rendering in the design system. It provides consistent typography with semantic color and size options. Aidos is designed and documented with Geist Sans, while library components inherit the host application's font family.

Props

Semantic components

For most use cases, prefer the semantic wrapper components over the base Text component. They provide sensible size defaults and render the appropriate HTML elements. Heading weight remains explicit rather than being inferred from document rank.

import { H1, H2, H3, H4, P, Span, Li, Label } from "aidos-ui";

<H1>Page Title</H1>           // xxlarge, renders <h1>
<H2>Section Heading</H2>      // xlarge, renders <h2>
<H3>Subsection</H3>           // large, renders <h3>
<H4>Component title</H4>      // medium, renders <h4>
<P>Body text paragraph</P>    // medium, renders <p>
<Span>Inline text</Span>      // medium, renders <span>, ellipsis enabled
<Li>List item</Li>            // medium, renders <li>
<Label>Form label</Label>     // medium, renders <label>

Use bold when the visual treatment should also be heading-like:

<H1 bold>Visually emphasized page title</H1>
<H2 bold>Visually emphasized section title</H2>

Sizes

Each size defines both font size and proportional line height. Font sizes map to CSS custom properties. Heading level and weight remain separate: H1 through H4 choose a semantic element and default size, while bold or jss controls emphasis.

<Text size="xsmall">Fine print</Text>
<Text size="small">Secondary text</Text>
<Text size="medium">Body text</Text>
<Text size="large">Emphasized</Text>
<Text size="xlarge">Subheading</Text>
<Text size="xxlarge">Title</Text>
<Text size="xxxlarge">Hero</Text>

Colors

Semantic colors ensure text adapts correctly to light and dark themes.

<Text color="primary">Main content</Text>
<Text color="secondary">Supporting info</Text>
<Text color="highlight">Accent text</Text>
<Text color="negative">Error message</Text>
<Text color="subtle">Disabled text</Text>

Bold text

<Text bold>Important information</Text>
<Text>Regular text</Text>

Ellipsis truncation

By default, Span and Label components truncate text with ellipsis. Other components wrap by default.

// Truncates by default
<Span>Long text that will be truncated...</Span>

// Force truncation on any text component
<P ellipsis>This paragraph will truncate</P>

// Disable truncation on span
<Span ellipsis={false}>This span will wrap</Span>

Custom HTML element

Override the rendered HTML element while keeping the same styling using the type prop.

// Render H1 styling but use h2 element (for accessibility)
<H1 type="h2">Visually large, semantically h2</H1>

// Render span styling as a label
<Span type="label" htmlFor="email">Email address</Span>