Text - Kumo Svelte

Heading text-lg (16px)

Heading large

text-xl (20px)

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/components/text';
</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="heading">Heading</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 variant="heading" size="lg" as="h2">Heading large</Text>
    <Text variant="mono-secondary">text-xl (20px)</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; use as to choose semantic HTML. The heading variant defaults to a <span> so decorative heading text does not silently enter the document outline. Body and monospace variants default to <p> and <span> respectively.

<!-- Real section headings (contribute to the document outline) --><Text variant="heading" size="lg" as="h1">Page Title</Text><Text variant="heading" as="h2">Section Title</Text><!-- Decorative heading-styled text that is NOT a section heading --><Text variant="heading">Card label</Text><!-- Visually one size, semantically another --><Text variant="heading" size="lg" as="h3">Large presentation, semantic h3</Text>

The as prop accepts headings ("h1" through "h6") and common inline or block text elements. The legacy heading1, heading2, and heading3 variants remain available for compatibility but are deprecated and still require as.

Restrictions

The bold and full size range are restricted to body, secondary, success, and error text variants. The new heading variant accepts only size="lg"; omit it for the default 16px heading.

<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

Deprecated numbered headings cannot use bold or size:

<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/components/text';
</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

Prop	Type	Default	Description
variant	`'heading' \| 'heading1' \| 'heading2' \| 'heading3' \| 'body' \| 'secondary' \| 'mono' \| 'mono-secondary' \| 'success' \| 'error'`	`"body"`	Visual variant. Numbered heading variants are deprecated; use heading with size and as.
size	`'xs' \| 'sm' \| 'base' \| 'lg'`	`"base"`	Size preset. Heading accepts lg for a 20px heading; its default is 16px.
bold	`boolean`	`false`	Whether to use medium font weight for copy variants.
truncate	`boolean`	`false`	Truncates 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.