Kappa / Text

Clear copy keeps an interface easy to scan.

<script setup>
import { Text } from "@dicehub/kappa/components/text";
</script>

<template>
  <Text>Clear copy keeps an interface easy to scan.</Text>
</template>

Installation

Text is part of the main Kappa package. It renders guarded native HTML and has no Ark UI state machine or additional runtime dependency.

Barrel

import { Text } from "@dicehub/kappa";

Granular

import { Text } from "@dicehub/kappa/components/text";

Usage

Body copy renders as a paragraph by default. Text forwards native attributes, data attributes, event listeners, consumer classes, and inline styles to the selected element.

Changes are saved automatically.

<script setup>
import { Text } from "@dicehub/kappa/components/text";
</script>

<template>
  <Text>Changes are saved automatically.</Text>
</template>

Composition

Typical part hierarchy

Text <p | span | semantic text element>
└── default slot

Text supports semantic elements and uses Kappa's dense type scale and status tokens. Ark UI has no Text primitive.

Text styles one interface string. It does not manage vertical prose rhythm. For articles, rendered Markdown, or streaming content, use semantic HTML and set typography and spacing on the container.

Examples

Overview

Compare every current treatment and size in one place. Each row shows the prop combination, rendered result, font size, and weight.

heading · baseHeading16 px · 650

heading · lgHeading large20 px · 650

body · xs

Body extra small

12 px · 400

body · sm

Body small

13 px · 400

body · base

Body

14 px · 400

body · lg

Body large

16 px · 400

body · bold

Body bold

14 px · 550

secondary

Secondary

14 px · 400

mono · baseMonospace13 px · 400

mono · lgMonospace large14 px · 400

mono-secondaryMonospace secondary13 px · 400

success

Success

14 px · 400

error

Error

14 px · 400

<script setup>
import { Text } from "@dicehub/kappa/components/text";
</script>

<template>
  <div class="text-overview">
    <Text variant="heading" as="h3">Heading</Text>
    <Text variant="heading" size="lg" as="h3">Heading large</Text>
    <Text size="xs">Body extra small</Text>
    <Text size="sm">Body small</Text>
    <Text>Body</Text>
    <Text size="lg">Body large</Text>
    <Text bold>Body bold</Text>
    <Text variant="secondary">Secondary</Text>
    <Text variant="mono">Monospace</Text>
    <Text variant="mono" size="lg">Monospace large</Text>
    <Text variant="mono-secondary">Monospace secondary</Text>
    <Text variant="success">Success</Text>
    <Text variant="error">Error</Text>
  </div>
</template>

<style scoped>
.text-overview {
  display: grid;
  gap: 0.75rem;
}
</style>

Use heading for compact titles, secondary for supporting copy, and status variants only when nearby text or semantics also state the result. Numbered heading variants remain as deprecated migration aliases.

heading

Project status

body

All systems are available.

secondary

Checked a few seconds ago

success

Connection restored

error

Connection failed

<script setup>
import { Text } from "@dicehub/kappa/components/text";
</script>

<template>
  <div class="text-stack">
    <Text variant="heading" as="h3">Project status</Text>
    <Text>All systems are available.</Text>
    <Text variant="secondary">Checked a few seconds ago</Text>
    <Text variant="success">Connection restored</Text>
    <Text variant="error">Connection failed</Text>
  </div>
</template>

Sizes

The compact 12–16 px scale supports dense application controls and metadata.

xsExtra small · 12 px

smSmall · 13 px

baseBase · 14 px

lgLarge · 16 px

<script setup>
import { Text } from "@dicehub/kappa/components/text";
</script>

<template>
  <div class="text-stack">
    <Text size="xs">Extra small · 12 px</Text>
    <Text size="sm">Small · 13 px</Text>
    <Text size="base">Base · 14 px</Text>
    <Text size="lg">Large · 16 px</Text>
  </div>
</template>

Semantic HTML

Variant controls appearance only. Set as from the document outline and content model. Heading and monospace variants default to a span so they never create an implicit heading.

Account security

Review active sessions and recovery methods.

<script setup>
import { Text } from "@dicehub/kappa/components/text";
</script>

<template>
  <section>
    <Text variant="heading" size="lg" as="h2">Account security</Text>
    <Text as="p">Review active sessions and recovery methods.</Text>
  </section>
</template>

Inline Text

Render a span when Kappa treatment belongs inside an existing paragraph.

The export finished in 42 seconds.

<script setup>
import { Text } from "@dicehub/kappa/components/text";
</script>

<template>
  <p>
    The export finished in
    <Text as="span" variant="success" bold>42 seconds</Text>.
  </p>
</template>

Monospace

Use monospace for identifiers, timestamps, and short code values. The optical size is one step smaller than body copy, and numerals align in tabular columns.

job_01K41Q7Z 2026-08-28 16:40 CEST

<script setup>
import { Text } from "@dicehub/kappa/components/text";
</script>

<template>
  <div class="text-stack">
    <Text variant="mono" as="code">job_01K41Q7Z</Text>
    <Text variant="mono-secondary" as="time" datetime="2026-08-28T16:40:00+02:00">
      2026-08-28 16:40 CEST
    </Text>
  </div>
</template>

Truncate

Truncation needs a constrained inline size. Keep the full value available through adjacent detail, an accessible disclosure, or a suitable native title for non-critical copy.

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

<script setup>
import { Text } from "@dicehub/kappa/components/text";
</script>

<template>
  <div class="truncate-demo">
    <Text
      truncate
      title="This is a long piece of text that will be truncated with an ellipsis when it overflows its container."
    >
      This is a long piece of text that will be truncated with an ellipsis when it overflows its
      container.
    </Text>
  </div>
</template>

<style scoped>
.truncate-demo {
  inline-size: 16rem;
  padding: 1rem;
  border: 1px solid var(--kappa-line);
  border-radius: 0.5rem;
}
</style>

Right to Left

Text inherits language, writing direction, and logical layout from its document context.

حالة المشروع

تم التحديث قبل لحظات

<script setup>
import { Text } from "@dicehub/kappa/components/text";
</script>

<template>
  <div dir="rtl" lang="ar">
    <Text variant="heading" as="h3">حالة المشروع</Text>
    <Text variant="secondary">تم التحديث قبل لحظات</Text>
  </div>
</template>

Accessibility

Choose the native element from content meaning, not visual size.
Keep heading levels ordered. Do not use a larger style to change the outline.
Do not communicate status by color alone.
Keep essential text readable without truncation or provide a clear full-value path.
Set lang and dir on the nearest suitable ancestor.

API Reference

Text

Renders a guarded native text element. Native attributes and listeners pass to the root.

Prop	Type	Default	Description
`variant`	`"heading" \| "body" \| "secondary" \| "success" \| "error" \| "mono" \| "mono-secondary" \| deprecated numbered headings`	`"body"`	Sets visual typography only. It does not set document structure.
`size`	`"xs" \| "sm" \| "base" \| "lg"`	`"base"`	Sets compact copy size. Heading and monospace variants accept only their documented large option.
`bold`	`boolean`	`false`	Uses medium weight on body, secondary, success, or error copy.
`truncate`	`boolean`	`false`	Clips one overflowing line and shows an ellipsis.
`as`	`"h1"–"h6" \| "p" \| "span" \| supported semantic text element`	`"p" or "span"`	Selects a guarded native element. Body copy defaults to p; heading and monospace copy default to span.

Slots

Slot	Description
`default`	Text content and inline semantic markup.

Data Slots

Slot	Element	Description
`text`	`selected native element`	Polymorphic text root.

Exports

Export	Description
`Text`	Polymorphic interface-text component.
`TextProps / TextSlots`	Public Vue prop and slot contracts.
`TextVariant / TextSize / TextElement`	Public variant, size, and element unions.
`TEXT_VARIANTS / TEXT_SIZES / TEXT_ELEMENTS`	Supported public values.
`TEXT_DEFAULT_VARIANTS / KAPPA_TEXT_DEFAULT_VARIANTS`	Default body and base-size values.
`KAPPA_TEXT_VARIANTS / KAPPA_TEXT_STYLING`	Structured typography metadata.
`textVariants`	Builds deterministic Kappa Text classes.
`isTextVariant / isTextSize / isTextElement`	Public value guards.
`resolveTextVariant / resolveTextSize / resolveTextElement`	Safe runtime resolvers.