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/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="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>

Import

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

Usage

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

<Text>Your content here</Text>

Semantic HTML

The `variant` prop controls visual styling only; it does not determine the HTML element rendered. Use `as` to choose the semantic element when text should contribute to the document outline.

<Text variant="heading1" as="h1">Page Title</Text>
<Text variant="heading2" as="h2">Section Title</Text>
<Text variant="heading1" as="span">Big bold card label</Text>
<Text variant="heading1" as="h3">Visually large, semantically h3</Text>

Restrictions

The `bold` and `size` props are intended for body-style variants. Monospace variants can use `size="lg"`; headings should use their variant and semantic `as` element.

<Text size="sm" bold>Body</Text>
<Text variant="secondary" bold>Body secondary</Text>
<Text variant="success" size="lg">Success</Text>
<Text variant="mono" size="lg">Monospace</Text>

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

Text

Prop	Type	Default
variant	`KumoTextVariant`	`KUMO_TEXT_DEFAULT_VARIANTS.variant`
size	`KumoTextSize`	`KUMO_TEXT_DEFAULT_VARIANTS.size`
bold	`boolean`	`false`
truncate	`boolean`	`false`
as	`TextElement`	—
class	`string`	—
children	`Snippet`	—