# @spark-web/text

> --- title: Text storybookPath: typography-text--default isExperimentalPackage: false ---

Latest version **5.3.1** (published 2026-04-14) · 0 weekly downloads

## Install

```sh
npm install @spark-web/text
pnpm add @spark-web/text
yarn add @spark-web/text
bun add @spark-web/text
```

## Health

**Score 55/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 5.3.1 |
| Published | 2026-04-14 |
| First published | 2022-04-20 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=14 |
| Dependencies | 5 |
| Unpacked size | 65.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | brighte, brighte-release-bot |

## Links

- npm: https://www.npmjs.com/package/@spark-web/text
- Repository: https://github.com/brighte-labs/spark-web
- Homepage: https://github.com/brighte-labs/spark-web#readme
- Issues: https://github.com/brighte-labs/spark-web/issues
- npm.io page: https://npm.io/package/@spark-web/text

## Dependencies (5)

- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.25.0
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.14.0
- [@spark-web/box](https://npm.io/package/@spark-web/box.md) ^6.0.1
- [@spark-web/theme](https://npm.io/package/@spark-web/theme.md) ^5.13.0
- [@spark-web/utils](https://npm.io/package/@spark-web/utils.md) ^5.1.0

## Recent versions

- 5.3.1 (latest) — 2026-04-14
- 0.0.0-snapshot-release-20260827022754 (snapshot-release) — 2026-08-27
- 5.3.0-rc.0 (rc) — 2025-07-24
- 0.0.0-snapshot-release-20260409073509 — 2026-04-09
- 0.0.0-snapshot-release-20260409063015 — 2026-04-09
- 0.0.0-snapshot-release-20260409051926 — 2026-04-09
- 0.0.0-snapshot-release-20260409001813 — 2026-04-09
- 5.3.0 — 2026-01-15
- 5.2.3 — 2025-10-20
- 5.2.1 — 2025-09-19
- 5.2.0 — 2025-02-21
- 5.1.0 — 2025-02-18
- 5.0.0 — 2025-02-10
- 5.0.0-rc.31 — 2025-02-10
- 5.0.0-rc.29 — 2025-02-06
- … 40 more at https://npm.io/package/@spark-web/text/versions

## README

---
title: Text
storybookPath: typography-text--default
isExperimentalPackage: false
---

Constrained, purposeful text styles as a component.

## Examples

```jsx live
const textSizes = ['large', 'standard', 'small', 'xsmall'];

return (
  <Columns collapseBelow="tablet" gap="xlarge">
    <Stack gap="large">
      {textSizes.map(textSize => (
        <Text key={textSize} size={textSize} weight="regular">
          Text {textSize} regular
        </Text>
      ))}
    </Stack>
    <Stack gap="large">
      {textSizes.map(textSize => (
        <Text key={textSize} size={textSize} weight="semibold">
          Text {textSize} regular
        </Text>
      ))}
    </Stack>
  </Columns>
);
```

### Align

Text can be aligned with the `align` prop.

```jsx live
<Stack gap="large" dividers>
  <Text align="left">Left (default)</Text>
  <Text align="center">Center</Text>
  <Text align="right">Right</Text>
</Stack>
```

### Overflow strategy

Use the `overflowStrategy` prop to manage how `Text` behaves with regard to
overflow.

```jsx live
const overflowStrategies = ['truncate', 'nowrap', 'breakword'];

return (
  <Stack gap="large" style={{ width: 200 }}>
    <Stack gap="small">
      <Text weight="semibold">Default</Text>
      <Text>The quick brown fox jumps over the lazy dog.</Text>
    </Stack>
    {overflowStrategies.map(overflowStrategy => (
      <Stack key={overflowStrategy} gap="small">
        <Text weight="semibold">{overflowStrategy}</Text>
        <Text overflowStrategy={overflowStrategy}>
          The quick brown fox jumps over the lazy dog.
        </Text>
      </Stack>
    ))}
  </Stack>
);
```

### Tone

The foreground colour of text can be set by applying a `tone`. In addition to
the foundation tones, “muted” provides a way to de-emphasise text.

```jsx live
const textTones = [
  'neutral', // Default
  'accent',
  'caution',
  'critical',
  'disabled',
  'fieldAccent',
  'info',
  'link',
  'muted',
  'placeholder',
  'positive',
  'primary',
  'primaryActive',
  'primaryHover',
  'secondary',
  'secondaryActive',
  'secondaryHover',
];

return (
  <Columns collapseBelow="tablet" gap="large" template={[1, 1]}>
    {textTones.map(tone => (
      <Text key={tone} tone={tone}>
        {tone}
      </Text>
    ))}
  </Columns>
);
```

### Weight

Text is available in two weight: `regular` and `semibold`.

```jsx live
<Inline gap="small">
  <Text weight="regular">Regular</Text>
  <Text weight="semibold">Semibold</Text>
</Inline>
```

### Contrast

To ensure text has sufficient contrast, when on a dark background the foreground
tones “neutral” and “muted” will be inverted.

```jsx live
<Inline gap="large">
  <Box background="neutral" padding="small" borderRadius="small">
    <Text>neutral</Text>
  </Box>
  <Box background="neutral" padding="small" borderRadius="small">
    <Text tone="muted">muted</Text>
  </Box>
</Inline>
```

## Props

<PropsTable displayName="Text" />

Extra props are also passed into the underlying [`Box`](/package/box) component.

[brighte-theme]:
  https://github.com/brighte-labs/spark-web/blob/e503bea4f7668d187ec7a78f99c5ed374417588b/packages/theme/src/makeTheme.ts#L158
[data-attribute-map]:
  https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1

---
_Source: https://npm.io/package/@spark-web/text · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._