Text
kumo-svelte

Text

A typography component for various heading and copy styles.

Heading 1

text-3xl (30px)

Heading 2

text-2xl (24px)

Heading 3

text-lg (16px)

Body

text-base (14px)

Body bold

text-base (14px)

Body lg

text-lg (16px)

Body sm

text-sm (13px)

Body xs

text-xs (12px)

Body secondary

text-base (14px)
Monospace text-sm (13px)
Monospace lg text-base (14px)
Monospace secondary text-sm (13px)

Success

text-base (14px)

Error

text-base (14px)
<script lang="ts">
  import { Text } from 'kumo-svelte';
</script>

<div class="grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
  <div class="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
    <Text variant="heading1" as="h1">Heading 1</Text>
    <Text variant="mono-secondary">text-3xl (30px)</Text>
  </div>
  <div class="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
    <Text variant="heading2" as="h2">Heading 2</Text>
    <Text variant="mono-secondary">text-2xl (24px)</Text>
  </div>
  <div class="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
    <Text variant="heading3" as="h3">Heading 3</Text>
    <Text variant="mono-secondary">text-lg (16px)</Text>
  </div>
  <div class="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
    <Text>Body</Text>
    <Text variant="mono-secondary">text-base (14px)</Text>
  </div>
  <div class="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
    <Text bold>Body bold</Text>
    <Text variant="mono-secondary">text-base (14px)</Text>
  </div>
  <div class="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
    <Text size="lg">Body lg</Text>
    <Text variant="mono-secondary">text-lg (16px)</Text>
  </div>
  <div class="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
    <Text size="sm">Body sm</Text>
    <Text variant="mono-secondary">text-sm (13px)</Text>
  </div>
  <div class="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
    <Text size="xs">Body xs</Text>
    <Text variant="mono-secondary">text-xs (12px)</Text>
  </div>
  <div class="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
    <Text variant="secondary">Body secondary</Text>
    <Text variant="mono-secondary">text-base (14px)</Text>
  </div>
  <div class="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
    <Text variant="mono">Monospace</Text>
    <Text variant="mono-secondary">text-sm (13px)</Text>
  </div>
  <div class="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
    <Text variant="mono" size="lg">Monospace lg</Text>
    <Text variant="mono-secondary">text-base (14px)</Text>
  </div>
  <div class="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
    <Text variant="mono-secondary">Monospace secondary</Text>
    <Text variant="mono-secondary">text-sm (13px)</Text>
  </div>
  <div class="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
    <Text variant="success">Success</Text>
    <Text variant="mono-secondary">text-base (14px)</Text>
  </div>
  <div class="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
    <Text variant="error">Error</Text>
    <Text variant="mono-secondary">text-base (14px)</Text>
  </div>
</div>

Installation

Barrel

import { Text } from 'kumo-svelte';

Granular

import { Text } from 'kumo-svelte/components/text';

Usage

<script lang="ts">  import { Text } from 'kumo-svelte';</script><Text>Your content here</Text>

Semantic HTML

The variant prop controls visual styling only - it does not determine the HTML element rendered. Heading variants require the as prop to avoid silently excluding real section headings from the document outline. Body and monospace variants have sensible defaults (<p> and <span> respectively) and accept as optionally.

<!-- Heading variants REQUIRE `as` — TypeScript will flag usages missing it --><Text variant="heading1">Page Title</Text> <!-- Doesn't compile --><!-- Real section headings (contribute to the document outline) --><Text variant="heading1" as="h1">Page Title</Text><Text variant="heading2" as="h2">Section Title</Text><!-- Decorative heading-styled text that is NOT a section heading --><Text variant="heading1" as="span">Big bold card label</Text><!-- Visually one size, semantically another --><Text variant="heading1" as="h3">Visually large, but semantically h3</Text>

The as prop accepts: "h1" through "h6", "p", and "span". Body variants default to "p", monospace variants default to "span", and heading variants have no default - you must choose explicitly.

Restrictions

The bold and size props are intentionally restricted to the base, secondary, success, and error text variants.

<Text size="sm" bold>Body</Text><Text variant="secondary" bold>Body secondary</Text><Text variant="success" size="lg">Success</Text><Text variant="error">Error</Text>

Monospace variants (mono and mono-secondary) can only set size to lg and cannot use the bold prop:

<Text variant="mono">Monospace</Text><Text variant="mono" size="lg">Monospace</Text><Text variant="mono" bold>Monospace</Text> // Doesn't compile

Headings (i.e. heading1, heading2 and heading3 variants) cannot use these props at all:

<Text variant="heading1" bold>  Heading 1</Text> // Doesn't compile

Truncate

Use the `truncate` prop to clip overflowing text with an ellipsis. This adds `truncate min-w-0` classes, which is useful when `Text` is inside a flex or grid container.

This is a long piece of text that will be truncated with an ellipsis when it overflows its container.

<script lang="ts">
  import { Text } from 'kumo-svelte';
</script>

<div class="w-64 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
  <Text truncate>
    This is a long piece of text that will be truncated with an ellipsis when it overflows its container.
  </Text>
</div>
<Text truncate>This is a long piece of text that will be truncated...</Text>

API Reference

PropTypeDefaultDescription
variant 'heading1' | 'heading2' | 'heading3' | 'body' | 'secondary' | 'mono' | 'mono-secondary' | 'success' | 'error'"body"Visual variant.
size 'xs' | 'sm' | 'base' | 'lg'"base"Size preset.
bold booleanfalseWhether to use medium font weight for copy variants.
truncate booleanfalseTruncates overflowing text with an ellipsis.
as TextElement-HTML element to render.
children Snippet-Text content.
DANGEROUS_className string-Escape hatch for additional classes.
DANGEROUS_style string-Escape hatch for inline styles.