<dt-text-list> <dt-text-list-item>First item</dt-text-list-item> <dt-text-list-item>Second item</dt-text-list-item> </dt-text-list>
Use DtTextList for hand-authored text or content lists. It renders native ul, ol, and li elements, keeps marker styling in component props, and avoids the clunky d-ls-*, d-lst-*, and indentation utility class combinations.
DtTextListItem as the direct child of DtTextList.type="ordered" only when item order or sequence changes the meaning.marker visual. The type prop controls semantics.DtTextListItem.markerTone on the DtTextList to control all markers. Set markerTone on DtTextListItem when individual markers may differ.DtTextList over d-ls-* and d-lst-* utilities in Vue.gap for item spacing up to 400.markerTone for semantic marker color.DtText within each DtTextListItem when customizing list item typography.li children directly under DtTextList.marker to imply ordered or unordered semantics.Unordered lists render a native ul by default.
<dt-text-list> <dt-text-list-item>Route customer questions to the right team.</dt-text-list-item> <dt-text-list-item>Summarize every conversation after it ends.</dt-text-list-item> <dt-text-list-item>Keep notes available across channels.</dt-text-list-item> </dt-text-list>
Use type="ordered" when sequence matters. start, reversed, and item value are passed only to ordered lists.
<dt-text-list type="ordered"> <dt-text-list-item>Invite the workspace owners.</dt-text-list-item> <dt-text-list-item>Map inboxes to support queues.</dt-text-list-item> <dt-text-list-item>Review routing before launch.</dt-text-list-item> </dt-text-list> <dt-text-list type="ordered" start="4"> <dt-text-list-item>Invite the workspace owners.</dt-text-list-item> <dt-text-list-item>Map inboxes to support queues.</dt-text-list-item> <dt-text-list-item>Review routing before launch.</dt-text-list-item> </dt-text-list>
Use gap to add space between items and before nested lists. Values come from the spacing scale up to 400. There is no default gap, effectively 0.
<dt-text-list> <dt-text-list-item>Default gap</dt-text-list-item> <dt-text-list-item>No added space.</dt-text-list-item> <dt-text-list-item>Natural line flow.</dt-text-list-item> </dt-text-list> <dt-text-list gap="200"> <dt-text-list-item>Gap 200</dt-text-list-item> <dt-text-list-item>Space between items.</dt-text-list-item> <dt-text-list-item>None before or after.</dt-text-list-item> </dt-text-list>
Use marker for visual marker style. Unset markers progress automatically as lists nest.
<dt-text-list marker="square" marker-tone="secondary" > <dt-text-list-item>Square marker</dt-text-list-item> <dt-text-list-item marker-tone="critical">Item marker tone override</dt-text-list-item> </dt-text-list> <dt-text-list type="ordered" marker="lower-alpha" > <dt-text-list-item>Lower alpha marker</dt-text-list-item> <dt-text-list-item>Native ordered semantics</dt-text-list-item> </dt-text-list>
Use the item marker slot to replace an item's visual marker while preserving ul or ol semantics. The marker slot is freeform, so you can use icons, images, or any other content. Use marker-tone to control the color of the marker.
<dt-text-list marker-tone="positive" > <dt-text-list-item> <template #marker> <dt-icon name="check" size="200" /> </template> Included in every plan. </dt-text-list-item> <dt-text-list-item> <template #marker> <dt-icon name="check" size="200" /> </template> Unlimited team members. </dt-text-list-item> <dt-text-list-item marker-tone="critical"> <template #marker> <dt-icon name="close" size="200" /> </template> Requires admin approval. </dt-text-list-item> </dt-text-list>
Nested lists go inside item content. Unset markers advance by depth: unordered lists use disc, circle, then square; ordered lists use decimal, lower-alpha, then lower-roman.
<dt-text-list> <dt-text-list-item> Prepare the launch workspace. <dt-text-list type="ordered" > <dt-text-list-item>Confirm owners.</dt-text-list-item> <dt-text-list-item>Publish onboarding notes.</dt-text-list-item> </dt-text-list> </dt-text-list-item> <dt-text-list-item> Track unresolved tasks. <dt-text-list> <dt-text-list-item>Permissions</dt-text-list-item> <dt-text-list-item>Billing handoff</dt-text-list-item> </dt-text-list> </dt-text-list-item> </dt-text-list>
DtTextList always renders native list elements. When markers are visually removed through marker="none", the component also applies role="list" so Safari with VoiceOver still announces list semantics.
Custom marker wrappers are considered decorative and will not be announced to assistive technology. Do not rely on a marker alone to communicate state.
import { DtTextList, DtTextListItem } from '@dialpad/dialtone-vue';
Name
|
Type
|
|---|---|
default | Text list items. Use DtTextListItem as the direct child. |
Name
|
Default
|
Type
|
|---|---|---|
gap |
"0"
|
"1"
|
"25"
|
"50"
|
"75"
|
"100"
|
"125"
|
"150"
|
"175"
|
"200"
|
"250"
|
"300"
|
"350"
|
"400"
Space between list items and before nested lists. | |
marker |
"disc"
|
"circle"
|
"square"
|
"decimal"
|
"lower-alpha"
|
"upper-alpha"
|
"lower-roman"
|
"upper-roman"
|
"none"
Visual marker style. Leave unset for automatic depth-aware markers. | |
markerTone |
"primary"
|
"secondary"
|
"tertiary"
|
"muted"
|
"disabled"
|
"placeholder"
|
"critical"
|
"critical-strong"
|
"positive"
|
"positive-strong"
|
"warning"
|
"info"
|
"info-strong"
|
"neutral-black"
|
"neutral-white"
Marker foreground tone. Uses the same tone vocabulary as DtText. | |
reversed | false | boolean Reverse ordered list numbering. |
start | number Starting number for ordered lists. | |
type | DT_TEXT_LIST_DEFAULT_TYPE |
"unordered"
|
"ordered"
Semantic list type. Sets the rendered element to |
Name
|
Type
|
|---|---|
default | Text list item content. |
marker | Custom marker content. Decorative by default. |
Name
|
Default
|
Type
|
|---|---|---|
contentClass | '' | string|array|object Additional class name for the content wrapper. |
markerClass | '' | string|array|object Additional class name for the marker wrapper. |
markerTone |
"primary"
|
"secondary"
|
"tertiary"
|
"muted"
|
"disabled"
|
"placeholder"
|
"critical"
|
"critical-strong"
|
"positive"
|
"positive-strong"
|
"warning"
|
"info"
|
"info-strong"
|
"neutral-black"
|
"neutral-white"
Marker foreground tone for this item. Overrides the parent DtTextList markerTone. | |
value | number Native |
Text List documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope