<dt-text> ... </dt-text>
Use in place of manually applying Text Styles. Examples of manual application you should avoid include:
class="d-text-body--md"class="d-fs-300 d-fw-semibold d-lh-300".foo { font: var(--dt-typography-body-md); }.DtText over individual typography utility classes to keep implementations aligned with token updates.text prop provides a simple fallback string when no slot content is present.as prop to match the semantic HTML element (e.g., h1, label, p).variant for complete text compositions and pair size with variant only when a raw font-size override is needed.d- typography classes with a single dt-text instance.variant that conveys the desired hierarchy.size with variant when the composition is right but the font size needs a token-backed override.tone for semantic color tokens instead of standalone d-fc-* classes.DtText with conflicting typography utilities (e.g., d-fs-*).as="div" for top-level titles).text prop when the content requires inline formatting; slot it instead.Use variant to apply a complete text composition, including font family, font size, font weight, and line height. Default will inherit styles from the parent.
<dt-text variant="headline-md" as="h3">Headline</dt-text> <dt-text variant="body-md">Body</dt-text> <dt-text variant="label-md">Label</dt-text> <dt-text variant="code-md">Code</dt-text> <dt-text>Default (inherits)</dt-text>
Using size with variant acts as an override of the font-size over its composed default. It applies a raw font-size token while keeping the rest of the composition. size will not work by itself, as it requires pairing with variant, or with legacy kind when migrating older usages.
| Size | Output | Example |
|---|---|---|
50 | 10px | Text |
75 | 11px | Text |
100 | 12px | Text |
125 | 13px | Text |
150 | 14px | Text |
200 | 16px | Text |
250 | 18px | Text |
300 | 20px | Text |
350 | 22px | Text |
400 | 26px | Text |
450 | 29px | Text |
500 | 32px | Text |
550 | 36px | Text |
600 | 42px | Text |
650 | 46px | Text |
700 | 52px | Text |
750 | 58px | Text |
800 | 66px | Text |
<dt-text variant="body-xs" size="125" > Body composition with font-size override to fall between "body-xs" and "body-sm" </dt-text>
<!-- Legacy, still supported --> <dt-text kind="body" size="300">Body medium composition</dt-text> <!-- Preferred --> <dt-text variant="body-md">Body medium composition</dt-text>
T-shirt sizes such as xs, sm, md, and lg belong in variant names for new usage. Numeric size values are raw font-size tokens when paired with variant; with legacy kind, they keep the historical composition mapping.
The numeric prop applies styles that ensure that each number is set with consistent width, making them align properly when displayed together. Ideal for displaying aligned data such as phone numbers or numbers in a table.
<dt-text numeric>(913) 555-3170</dt-text>
Override the font-weight of the text. Applies to any kind/size combination. If omitted, the default weight from the typography token is used.
<dt-text strength="{{strength}}">...</dt-text>
Override the line-height of the text. Applies to any kind/size combination. If omitted, the default line-height from the typography token is used.
<dt-text density="{{density}}">...</dt-text>
Override the font family. By default, DtText does not emit a font-family class and inherits naturally from the parent.
<dt-text family="mono">...</dt-text>
Use the italic prop to apply italic font style. When omitted or false, DtText does not emit a font-style override.
<dt-text italic>...</dt-text>
Use tone to declare the text's tone, which will map to a foreground color. By default, the tone is inherited from its parent.
<dt-text>primary</dt-text> <dt-text tone="secondary">secondary</dt-text> <dt-text tone="tertiary">tertiary</dt-text> <dt-text tone="muted">muted</dt-text> <dt-text tone="disabled">disabled</dt-text> <dt-text tone="placeholder">placeholder</dt-text> <dt-text tone="positive">positive</dt-text> <dt-text tone="positive-strong">positive-strong</dt-text> <dt-text tone="warning">warning</dt-text> <dt-text tone="critical">critical</dt-text> <dt-text tone="critical-strong">critical-strong</dt-text> <dt-text tone="info">info</dt-text> <dt-text tone="info-strong">info-strong</dt-text>
Rather than use the -inverted tone variants, use the v-dt-mode directive.
<dt-text v-dt-mode:invert tone="critical" >critical tone on contrasting surface</dt-text>
Use as to declare the underlying HTML tag that the component should render, independent of the visual styling. Defaults to span.
<dt-stack class="d-w100p" gap="200"> <dt-stack gap="100"> <dt-text variant="headline-xl" as="h1">The Complete Agentic AI Platform</dt-text> <dt-text variant="body-md" as="p">Our AI Agents come equipped with the core skills businesses need to deliver seamless customer experiences.</dt-text> </dt-stack> <dt-stack direction="row" gap="500" align="start"> <dt-stack gap="100"> <dt-text variant="headline-md" as="h2" density="200">Try before you AI</dt-text> <dt-text variant="body-sm" as="p">Build, run and optimize your agents - no code, just your expertise and our built-in intelligence.</dt-text> </dt-stack> <dt-stack gap="100"> <dt-text variant="headline-md" as="h2" density="200">Great minds sync alike</dt-text> <dt-text variant="body-sm" as="p">Our AI learns and balances speed with quality using one data plane that keeps customers coming back.</dt-text> </dt-stack> <dt-stack gap="100"> <dt-text variant="headline-md" as="h2" density="200">History repeats itself. Customers shouldn't.</dt-text> <dt-text variant="body-sm" as="p">Whatever your customer types or says, our AI and your human agents stay in sync.</dt-text> </dt-stack> </dt-stack> </dt-stack>
Since DtText's default element is a <span>, which is inline by default, the align prop will only work if its element is styled in a block context.
<dt-text align="start">....</dt-text> <dt-text align="center">....</dt-text> <dt-text align="end">....</dt-text> <dt-text align="justify">....</dt-text>
Since DtText's default element is a <span>, the truncate will only work if its element is in block or inline-block context, e.g. <div>...</div>.
<div class="d-w-700"> <dt-text as="p" truncate>Welcome to Dialpad, the most modern, AI-powered business communications platform. We've taken every form of communication that you rely on and unified it into one app.</dt-text> </div>
<dt-text as="p" :max-lines="4">....</dt-text>
Control text wrapping behavior. Particularly useful for headlines where balanced line lengths improve readability.
Since DtText's default element is a <span>, which is inline by default, the wrap prop will only work if its element is styled in a block context.
<dt-text>....</dt-text> <dt-text wrap="balance">....</dt-text> <dt-text wrap="pretty">....</dt-text> <dt-text wrap="nowrap">....</dt-text>
Remove extra leading space above and/or below text. Useful for tight component layouts where text needs to align precisely with adjacent elements.
Text box trim will only affect elements with block or inline-block styled context. It may have no effect on elements with inline or flex context.
<dt-text as="p" text-box-trim="start">....</dt-text> <dt-text as="p" text-box-trim="end">....</dt-text> <dt-text as="p" text-box-trim="both">....</dt-text>
text-box-trim="both" when text needs to align flush with container's top and/or bottom edges.<dt-stack gap="200"> <dt-stack gap="100" justify="space-between"> <dt-stack> <dt-text as="h2" variant="headline-xl" size="400" strength="medium" density="200"> Katie Rodriguez </dt-text> <dt-stack direction="row" gap="75"> <dt-text tone="positive"> Available </dt-text> <dt-text>•</dt-text> <dt-text tone="tertiary"> Working from coffee shop </dt-text> </dt-stack> </dt-stack> <dt-stack gap="25"> <dt-text variant="body-md" density="200" strength="semibold" tone="tertiary"> Chief Customer Success Officer </dt-text> <dt-text variant="body-sm" density="200"> <dt-text strength="semibold"> 6:19 am </dt-text> local time </dt-text> </dt-stack> </dt-stack> <dt-stack gap="100" direction="row" class="d-jc-space-between"> <dt-button class="d-fl1" kind="muted" importance="outlined"> <template #startIcon="{ iconSize }"> <dt-icon-phone :size="iconSize" /> </template> Call </dt-button> <dt-button class="d-fl1" kind="muted" importance="outlined"> <template #startIcon="{ iconSize }"> <dt-icon-quick-reply :size="iconSize" /> </template> Message </dt-button> <dt-button class="d-fl1" kind="muted" importance="outlined"> <template #startIcon="{ iconSize }"> <dt-icon-video :size="iconSize" /> </template> Meet </dt-button> </dt-stack> </dt-stack>
<dt-stack gap="100" class="d-w-700"> <dt-text as="h2" variant="headline-lg">Saturday, May 24, 2025</dt-text> <dt-stack direction="row" gap="150"> <dt-avatar full-name="Ashanti Trevor" /> <dt-stack class="d-fl1"> <dt-text variant="body-sm" strength="bold">Ashanti Trevor</dt-text> <dt-stack direction="row" gap="50"> <dt-stack direction="row" gap="100"> <dt-icon name="phone-outgoing" size="200" class="d-fc-tertiary" /> <dt-text variant="body-xs" tone="tertiary">Outgoing call</dt-text> </dt-stack> <dt-text variant="body-xs" tone="tertiary">•</dt-text> <dt-text variant="body-xs" tone="tertiary">2 minutes 10 seconds</dt-text> </dt-stack> </dt-stack> <dt-text variant="body-sm" tone="tertiary">3:23 pm</dt-text> <dt-badge kind="count" type="bulletin" text="6" /> </dt-stack> </dt-stack>
as (e.g., screen readers expect heading levels to be sequential).truncate, provide another way to access the full content (tooltip, detail view, or explicit aria-label). DtText does not apply alternative access to the full string, so consuming applications should opt in.numeric prop when aligning tables or numbers that dynamically update.import { DtText } from '@dialpad/dialtone-vue';
Name
|
Type
|
|---|---|
default | Default slot for text content |
Name
|
Default
|
Type
|
|---|---|---|
align | null |
"start"
|
"center"
|
"end"
|
"justify"
Logical text alignment. Requires block/inline-block context. |
as | 'span' |
"span"
|
"p"
|
"h1"
|
"h2"
|
"h3"
|
"h4"
|
"h5"
|
"h6"
|
"label"
|
"div"
|
"component"
HTML tag or component used for rendering. |
density | null |
"100"
|
"200"
|
"300"
|
"400"
|
"500"
|
"600"
Overrides line-height. Applies to any kind/size combination. |
family | null |
"inherit"
|
"custom"
|
"sans"
|
"mono"
|
"expressive"
Overrides font-family. By default, no font-family class is emitted and text inherits naturally. |
italic | false | boolean Applies italic font style when true. |
maxLines | null | number Applies multi-line truncation (i.e. clamp) when greater than zero; requires block/inline-block context. |
numeric | false | boolean Renders numeric content with tabular figures. |
size | null |
"50"
|
"75"
|
"100"
|
"125"
|
"150"
|
"200"
|
"250"
|
"300"
|
"350"
|
"400"
|
"450"
|
"500"
|
"550"
|
"600"
|
"650"
|
"700"
|
"750"
|
"800"
Raw font-size token. Must be paired with |
strength | null |
"bold"
|
"semibold"
|
"medium"
|
"normal"
Overrides font-weight. Applies to any kind/size combination. |
textBoxTrim | null |
"start"
|
"end"
|
"both"
Controls text-box-trim (leading space above/below text). Useful for tight component layouts. |
tone | null |
"primary"
|
"secondary"
|
"tertiary"
|
"muted"
|
"disabled"
|
"placeholder"
|
"critical"
|
"critical-strong"
|
"positive"
|
"positive-strong"
|
"warning"
|
"info"
|
"info-strong"
|
"neutral-black"
|
"neutral-white"
Semantic foreground color. |
truncate | false | boolean Enables single-line truncation (i.e. ellipsis) when true; requires block/inline-block context. |
variant | null |
"headline-3xl"
|
"headline-2xl"
|
"headline-xl"
|
"headline-lg"
|
"headline-md"
|
"headline-sm"
|
"headline-xs"
|
"body-lg"
|
"body-md"
|
"body-sm"
|
"body-xs"
|
"label-lg"
|
"label-md"
|
"label-sm"
|
"label-xs"
|
"code-lg"
|
"code-md"
|
"code-sm"
|
"code-xs"
Typography variant mapping to a complete token-backed composition. |
wrap | null |
"wrap"
|
"nowrap"
|
"balance"
|
"pretty"
Controls text wrapping behavior. |
kind Deprecated | null |
"headline"
|
"body"
|
"label"
|
"code"
Typography kind mapping to headline/body/label/code token sets. Use variant instead |
Class
|
Applies to
|
Description
|
|---|
Text documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope