Text and Heading
Body text and headings on the type scale. Text picks size, tone and weight; Heading picks the level.
Examples
Headings
Visual size follows the level unless size overrides it. Sentence case, semibold.
Servers
Connected agents
Authentication
Routing hint
Servers
Connected agents
Authentication
Routing hint
<Heading level={1}>Servers</Heading>
<Heading level={2}>Connected agents</Heading>
<Heading level={3}>Authentication</Heading>
<Heading level={4}>Routing hint</Heading>Sizes and tones
14px is the content size. 13 for secondary text, 12 for meta.
GitHub
Tools for issues, pull requests and code search.
Added by you. Last used 2 hours ago.
12 tools
The token was rejected. Paste a new one under Authentication.
GitHub
Tools for issues, pull requests and code search.
Added by you. Last used 2 hours ago.
12 tools
The token was rejected. Paste a new one under Authentication.
<Text size="lg" weight="medium">GitHub</Text>
<Text>Tools for issues, pull requests and code search.</Text>
<Text size="sm" tone="ink-2">Added by you. Last used 2 hours ago.</Text>
<Text size="xs" tone="ink-3">12 tools</Text>
<Text size="sm" tone="danger">The token was rejected. Paste a new one under Authentication.</Text>Identifiers and numbers
Mono for things people type elsewhere. Numeric for figures that line up in columns. Truncate needs a width.
https://api.githubcopilot.com/mcp
1,284 calls today
Use for anything about repositories, issues and pull requests on GitHub.
https://api.githubcopilot.com/mcp
1,284 calls today
Use for anything about repositories, issues and pull requests on GitHub.
<Text mono>https://api.githubcopilot.com/mcp</Text>
<Text numeric>1,284 calls today</Text>
<Text truncate style={{ width: '220px' }}>
Use for anything about repositories, issues and pull requests on GitHub.
</Text>Usage
import { Text, Heading } from '@switchboard/ui'
<Heading level={2}>{server.name}</Heading>
<Text size="sm" tone="ink-2">{server.description}</Text>Props
Every component also takes mix, for css() and mixins applied after its own style.
Text
| Prop | Type | Default | Description |
|---|---|---|---|
| as | 'p' | 'span' | 'div' | 'label' | 'small' | 'strong' | 'em' | 'code' | 'figcaption' | 'dd' | 'dt' | 'li' | 'p' | Element to render. A <p> is capped at 72ch. |
| size | 'xs' | 'sm' | 'base' | 'lg' | 'base' | 12, 13, 14 or 16px with matching line height. |
| tone | 'ink' | 'ink-2' | 'ink-3' | 'accent' | 'success' | 'warning' | 'danger' | – | Text colour. Inherits when unset. |
| weight | 'regular' | 'medium' | 'semibold' | – | Font weight. Inherits when unset. |
| mono | boolean | – | Plex Mono at 0.93em, for URLs, tool names and slugs. |
| numeric | boolean | – | Tabular figures. |
| truncate | boolean | – | One line with an ellipsis. Becomes a block; needs a bounded width. |
| mix | Mix | – | Extra css() or mixins, applied after the text style. |
Also accepts every attribute of the rendered element.
Heading
| Prop | Type | Default | Description |
|---|---|---|---|
| level | 1 | 2 | 3 | 4 | 2 | Semantic level: renders <h1> to <h4>. |
| size | 'xl' | 'lg' | 'base' | 'sm' | – | Visual size. Defaults to xl, lg, base, sm for levels 1 to 4. |
| mix | Mix | – | Extra css() or mixins, applied after the heading style. |
Also accepts every <h1>–<h4> attribute.
Accessibility
- Heading renders a real <h1>–<h4>; pick the level from the page outline and change the look with size.
- Keep one <h1> per page.
- The *-ink tones meet contrast on page and surface backgrounds in both themes; ink-3 is for meta text only.
- Truncated text is cut visually only; put the full value in a title or a details view.
Guidance
Do
- Write in sentence case: "Connected agents", not "Connected Agents".
- Use tone and size for hierarchy before reaching for weight.
Don’t
- Skip heading levels to get a smaller size; set size instead.
- Set mono on prose or labels.
- Bold body text for emphasis.