Text List

New
Storybook Source

Semantic lists authored in Vue, with ordered, nested, and custom-marker options.

Usage

Use DtTextList when you author a list in Vue and need component-level control over its semantics, markers, spacing, tone, or nesting. It renders native ul, ol, and li elements and replaces combinations of d-ls-*, d-lst-*, and indentation utilities.

When a list is part of rendered HTML, such as Markdown output, keep its native ul, ol, and li elements inside DtProse. Do not convert it to DtTextList solely for styling.

Choose a text component

Content ownership Use
You author an individual text element in a Vue template. DtText
You author a list and its items in a Vue template. DtTextList
A renderer supplies a block of native HTML. DtProse

Guidance

  • Use DtTextListItem as the direct child of DtTextList.
  • Use type="ordered" only when item order or sequence changes the meaning.
  • Keep marker visual. The type prop controls semantics.
  • Nested lists go inside a DtTextListItem.
  • Set markerTone on the DtTextList to control all markers. Set markerTone on DtTextListItem when individual markers may differ.
  • Keep custom markers decorative. If a marker conveys status, include readable text in the item content.

Do

  • Prefer DtTextList over d-ls-* and d-lst-* utilities in Vue.
  • Use DtTextList when the Vue template owns the list structure and items.
  • Use gap for item spacing up to 400.
  • Use markerTone for semantic marker color.
  • Use DtText within each DtTextListItem when customizing list item typography.

Don’t

  • Use raw li children directly under DtTextList.
  • Convert a native ul or ol from rendered HTML into DtTextList solely for styling.
  • Use marker to imply ordered or unordered semantics.
  • Use custom markers as the only source of meaning.

Variants

Unordered

Unordered lists render a native ul by default.

Ordered

Use type="ordered" when sequence matters. start, reversed, and item value are passed only to ordered lists.

Gap

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.

Marker

Use marker for visual marker style. Unset markers progress automatically as lists nest.

Custom Markers

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.

Nested

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.

Accessibility

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.

Vue API

Text List 

import { DtTextList, DtTextListItem } from '@dialpad/dialtone-vue';

Slots

Name
Type
default

Text list items. Use DtTextListItem as the direct child.

Props

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 ul or ol.

Text List Item

Slots

Name
Type
default

Text list item content.

marker

Custom marker content. Decorative by default.

Props

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 li value for ordered lists.

Text List documentation last updated Tuesday, October 20, 2026