Use in place of manually applying Text Styles. Examples of manual application you should avoid include:
Applying Text Styles classes, e.g. class="d-text-body--md" Combinations of CSS Utilities, e.g. class="d-fs-300 d-fw-semibold d-lh-300" Custom CSS, e.g. .foo { font: var(--dt-typography-body-md); }. Prefer DtText over individual typography utility classes to keep implementations aligned with token updates. Use the default slot for rich content. The text prop provides a simple fallback string when no slot content is present. Choose the as prop to match the semantic HTML element (e.g., h1, label, p). All properties are optional, as they layer in on top of each other.
Do
Replace multiple d- typography classes with a single dt-text instance. Pick the smallest kind/size combination that conveys the desired hierarchy. Use tone for semantic color tokens instead of standalone d-fc-* classes.
Don’t
Mix DtText with conflicting typography utilities (e.g., d-fs-*). Render headings with non-heading tags (e.g., avoid as="div" for top-level titles). Depend on the text prop when the content requires inline formatting; slot it instead. Declare the role of the content. Default will inherit styles from the parent.
< dt-textkind = " headline" as = " span" > </ dt-text> < dt-textkind = " body" > </ dt-text> < dt-textkind = " label" > </ dt-text> < dt-textkind = " code" > </ dt-text> < dt-text> </ dt-text>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
All kinds support size prop, but not all sizes are available for each kind. When kind is set, size defaults to 300 if not specified.
100200300400500600700headlineText Text Text Text Text Text Text bodyText
Text
Text
Text
- - - labelText
Text
Text
Text
- - - codeTextTextTextText- - -
< dt-textkind = " {kind}" :size = " {size}" > </ dt-text> 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-textnumeric > </ dt-text>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
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-textstrength = " {{strength}}" > </ dt-text>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
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.
100 The quick brown fox jumped over the lazy dog.
200 The quick brown fox jumped over the lazy dog.
300 The quick brown fox jumped over the lazy dog.
400 The quick brown fox jumped over the lazy dog.
500 The quick brown fox jumped over the lazy dog.
600 The quick brown fox jumped over the lazy dog.
< dt-textdensity = " {{density}}" > </ dt-text>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
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> </ dt-text> < dt-texttone = " secondary" > </ dt-text> < dt-texttone = " tertiary" > </ dt-text> < dt-texttone = " muted" > </ dt-text> < dt-texttone = " disabled" > </ dt-text> < dt-texttone = " placeholder" > </ dt-text> < dt-texttone = " positive" > </ dt-text> < dt-texttone = " positive-strong" > </ dt-text> < dt-texttone = " warning" > </ dt-text> < dt-texttone = " critical" > </ dt-text> < dt-texttone = " critical-strong" > </ dt-text> < dt-texttone = " info" > </ dt-text> < dt-texttone = " info-strong" > </ dt-text>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
Rather than use the -inverted tone variants, use the v-dt-mode directive.
critical tone on default surface
critical tone on contrasting surface
< dt-textv-dt-mode: inverttone = " critical" > </ dt-text>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
Use as to declare the underlying HTML tag that the component should render, independent of the visual styling. Defaults to span.
The Complete Agentic AI Platform Our AI Agents come equipped with the core skills businesses need to deliver seamless customer experiences.
Try before you AI Build, run and optimize your agents - no code, just your expertise and our built-in intelligence.
Great minds sync alike Our AI learns and balances speed with quality using one data plane that keeps customers coming back.
History repeats itself. Customers shouldn't. Whatever your customer types or says, our AI and your human agents stay in sync.
< dt-stackclass = " d-w100p" gap = " 200" > < dt-stackgap = " 100" > < dt-textkind = " headline" as = " h1" :size = " 600" > </ dt-text> < dt-textkind = " body" as = " p" :size = " 400" > </ dt-text> </ dt-stack> < dt-stackdirection = " row" gap = " 500" align = " start" > < dt-stackgap = " 100" > < dt-textkind = " headline" as = " h2" :size = " 500" density = " 200" > </ dt-text> < dt-textkind = " body" as = " p" > </ dt-text> </ dt-stack> < dt-stackgap = " 100" > < dt-textkind = " headline" as = " h2" :size = " 500" density = " 200" > </ dt-text> < dt-textkind = " body" as = " p" > </ dt-text> </ dt-stack> < dt-stackgap = " 100" > < dt-textkind = " headline" as = " h2" :size = " 500" density = " 200" > </ dt-text> < dt-textkind = " body" as = " p" > </ dt-text> </ dt-stack> </ dt-stack> </ dt-stack>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
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.
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.
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.
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.
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-textalign = " start" > </ dt-text> < dt-textalign = " center" > </ dt-text> < dt-textalign = " end" > </ dt-text> < dt-textalign = " justify" > </ dt-text>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
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>.
< divclass = " d-w-700" > < dt-textas = " p" truncate > </ dt-text> </ div>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
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. Calling a client? Meeting with your team? Texting a colleague? It's all here, on all your devices. AI is by your side to transform your conversations into something you can see and use, giving you and your team a deeper look into action items and insights. Dialpad AI does the legwork to capture the details that matter most while you make and receive calls, send messages, and join meetings in an instant. 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. Calling a client? Meeting with your team? Texting a colleague? It's all here, on all your devices. AI is by your side to transform your conversations into something you can see and use, giving you and your team a deeper look into action items and insights. Dialpad AI does the legwork to capture the details that matter most while you make and receive calls, send messages, and join meetings in an instant. 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. Calling a client? Meeting with your team? Texting a colleague? It's all here, on all your devices. AI is by your side to transform your conversations into something you can see and use, giving you and your team a deeper look into action items and insights. Dialpad AI does the legwork to capture the details that matter most while you make and receive calls, send messages, and join meetings in an instant.
< dt-textas = " 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.
Default . Lorem ipsum dolor sit amet consectetur adipisicing consequatur deleniti non doloremque autem adipisci in omnis voluptatibus
Balance . Lorem ipsum dolor sit amet consectetur adipisicing consequatur deleniti non doloremque autem adipisci in omnis voluptatibus
Pretty . Lorem ipsum dolor sit amet consectetur adipisicing consequatur deleniti non doloremque autem adipisci in omnis voluptatibus
No Wrap . Lorem ipsum dolor sit amet consectetur adipisicing consequatur deleniti non doloremque autem adipisci in omnis voluptatibus
< dt-text> </ dt-text> < dt-textwrap = " balance" > </ dt-text> < dt-textwrap = " pretty" > </ dt-text> < dt-textwrap = " nowrap" > </ dt-text>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
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-textas = " p" text-box-trim = " start" > </ dt-text> < dt-textas = " p" text-box-trim = " end" > </ dt-text> < dt-textas = " p" text-box-trim = " both" > </ dt-text>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
Do
Use text-box-trim="both" when text needs to align flush with container's top and/or bottom edges.
Don’t
Apply text-box-trim to body copy that benefits from natural line spacing. Use text-box-trim as a substitute for proper layout spacing. Browser Support
Text box trim requires modern browser support for text-box-trim. Chrome 133+, Edge 132+, Safari 18.2+ as of November 2025. Otherwise, it will gracefully fallback to default rendering with half-leading above and below.
Katie Rodriguez
Available
•
Working from coffee shop
Chief Customer Success Officer
6:19 am
local time
< dt-stackgap = " 500" > < dt-stackgap = " 400" justify = " space-between" > < dt-stack> < dt-textas = " h2" kind = " headline" :size = " 500" strength = " medium" density = " 200" class = " d-fs-400" > </ dt-text> < dt-stackdirection = " row" gap = " 350" > < dt-texttone = " positive" > </ dt-text> < dt-text> • </ dt-text> < dt-texttone = " tertiary" > </ dt-text> </ dt-stack> </ dt-stack> < dt-stackgap = " 200" > < dt-textkind = " body" :size = " 300" density = " 200" strength = " semibold" tone = " tertiary" > </ dt-text> < dt-textkind = " body" :size = " 200" density = " 200" > < dt-textstrength = " semibold" > </ dt-text> </ dt-text> </ dt-stack> </ dt-stack> < dt-stackgap = " 400" direction = " row" class = " d-jc-space-between" > < dt-buttonclass = " d-fl1" kind = " muted" importance = " outlined" > < template#startIcon = " { iconSize }" > < dt-icon-phone:size = " iconSize" /> </ template> </ dt-button> < dt-buttonclass = " d-fl1" kind = " muted" importance = " outlined" > < template#startIcon = " { iconSize }" > < dt-icon-quick-reply:size = " iconSize" /> </ template> </ dt-button> < dt-buttonclass = " d-fl1" kind = " muted" importance = " outlined" > < template#startIcon = " { iconSize }" > < dt-icon-video:size = " iconSize" /> </ template> </ dt-button> </ dt-stack> </ dt-stack>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
< dt-stackgap = " 100" class = " d-w-700" > < dt-textas = " h2" kind = " headline" :size = " 400" > </ dt-text> < dt-stackdirection = " row" gap = " 150" > < dt-avatarfull-name = " Ashanti Trevor" /> < dt-stackclass = " d-fl1" > < dt-textkind = " body" :size = " 200" strength = " bold" > </ dt-text> < dt-stackdirection = " row" gap = " 50" > < dt-stackdirection = " row" gap = " 100" > < dt-iconname = " phone-outgoing" size = " 200" class = " d-fc-tertiary" /> < dt-textkind = " body" :size = " 100" tone = " tertiary" > </ dt-text> </ dt-stack> < dt-textkind = " body" :size = " 100" tone = " tertiary" > • </ dt-text> < dt-textkind = " body" :size = " 100" tone = " tertiary" > </ dt-text> </ dt-stack> </ dt-stack> < dt-textkind = " body" :size = " 200" tone = " tertiary" > </ dt-text> < dt-badgekind = " count" type = " bulletin" text = " 6" /> </ dt-stack> </ dt-stack>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.
Maintain semantic structure via as (e.g., screen readers expect heading levels to be sequential). When using 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. Allow numeric content to remain readable by enabling the numeric prop when aligning tables or numbers that dynamically update. import { DtText } from '@dialpad/dialtone-vue' ;