OverviewIntroductionIntroductionUsageUsageThemeThemeLayoutBoxBoxContainerContainerFlexFlex GridGridSectionSectionTypographyTextText HeadingHeadingComponentsAccordionAccordionAlert DialogAlert DialogAvatarAvatarBadgeBadgeBlockquoteBlockquoteButtonButton CalloutCallout CardCard CheckboxCheckbox ChipChip Code BlockCode Block Code EditorCode Editor Color FieldColor Field Data ListData ListDefinition ListDefinition ListDialogDialogHover CardHover CardIcon ButtonIcon Button InsetInset Image FieldImage Field LabelLabel MarkerMarkerPermanent LinkPermanent LinkPopoverPopoverProgressProgressRadio Card GroupRadio Card GroupScreenshotScreenshotScroll AreaScroll AreaSegmented ControlSegmented ControlSelectSelectSeparatorSeparator SkeletonSkeleton SpinnerSpinner StatusStatus SwitchSwitch TableTableTabsTabsText AreaText Area Text FieldText FieldTooltipTooltipZoomableZoomableFormattingCodeCodeEmEmKbdKbdQuoteQuoteStrongStrongIconsLogo IconLogo IconFeature IconFeature IconProvider IconProvider IconIcon PanelIcon PanelNavigationPage NavPage NavQuick NavQuick NavUtilitiesDesign System ProviderDesign System ProviderRecipesCopy ButtonCopy Button Copy ChipCopy Chip Theme ToggleTheme Toggle

Marker

Displays a list item marker to use with a number, a letter, or an icon.

 <Marker>1</Marker>

API Reference

Prop	Type	Default
`color`	`"gray" \| "purple" \| "blue" \| "green" \| "yellow" \| "red"`	`–`
`highContrast`	`boolean`	`–`
`size`	`"1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9"`	`–`

This component is based on the span element and supports common margin props m, mx, my, ml, mr, mt, mb. View source

Examples

Colors

Use the color prop to control the color of the marker.

A. B. C.

 <Flex align="center" gap="4">
  <Marker color="gray">A</Marker>
  <Marker color="green">B</Marker>
  <Marker color="red">C</Marker>
</Flex>

Use the green and red markers with icons to indicate the status of a list item. The Marker automatically provides an appropriate icon size so that its shape remains a circle.

Success

Error

 <Flex align="center" gap="5">
  <Flex align="center" gap="2">
    <Marker color="green" size="4">
      <CheckIcon />
    </Marker>
    <Text weight="bold" size="4">
      Success
    </Text>
  </Flex>
  <Flex align="center" gap="2">
    <Marker color="red" size="4">
      <Cross2Icon />
    </Marker>
    <Text weight="bold" size="4">
      Error
    </Text>
  </Flex>
</Flex>

Use the high-contrast marker to indicate an active list item.

Create an integration system user

Create a security group

Add domain security policies

4. Create and populate custom reports

5. Add an authorized user

6. Confirmation

 <Flex direction="column" gap="3">
  <Flex align="center" gap="3">
    <Marker color="green">
      <CheckIcon />
    </Marker>
    <Text size="3">Create an integration system user</Text>
  </Flex>

  <Flex align="center" gap="3">
    <Marker color="green">
      <CheckIcon />
    </Marker>
    <Text size="3">Create a security group</Text>
  </Flex>

  <Flex align="center" gap="3">
    <Marker color="red">
      <Cross2Icon />
    </Marker>
    <Text size="3">Add domain security policies</Text>
  </Flex>

  <Flex align="center" gap="3">
    <Marker highContrast>4</Marker>
    <Text size="3" weight="bold">
      Create and populate custom reports
    </Text>
  </Flex>

  <Flex align="center" gap="3">
    <Marker color="gray">5</Marker>
    <Text color="gray" size="3">
      Add an authorized user
    </Text>
  </Flex>

  <Flex align="center" gap="3">
    <Marker color="gray">6</Marker>
    <Text color="gray" size="3">
      Confirmation
    </Text>
  </Flex>
</Flex>

Sizes

Use the size prop to control the size of the Marker. Otherwise, the Marker size will be based on the font size of the parent element.

1. 2. 3. 4. 5. 6. 7. 8. 9.

 <Flex align="center" gap="4">
  <Marker size="1">1</Marker>
  <Marker size="2">2</Marker>
  <Marker size="3">3</Marker>
  <Marker size="4">4</Marker>
  <Marker size="5">5</Marker>
  <Marker size="6">6</Marker>
  <Marker size="7">7</Marker>
  <Marker size="8">8</Marker>
  <Marker size="9">9</Marker>
</Flex>

Within Text

Compose the Marker directly within Text or Heading components when you need to inherit the font size. The Marker will be automatically centered with the line of text.

5. The quick brown fox

4. The quick brown fox

3. The quick brown fox

2. The quick brown fox

1. The quick brown fox

 <Flex direction="column" gap="2">
  <Text as="div" size="5">
    <Marker mr="3">5</Marker>
    The quick brown fox
  </Text>
  <Text as="div" size="4">
    <Marker mr="3">4</Marker>
    The quick brown fox
  </Text>
  <Text as="div" size="3">
    <Marker mr="3">3</Marker>
    The quick brown fox
  </Text>
  <Text as="div" size="2">
    <Marker mr="3">2</Marker>
    The quick brown fox
  </Text>
  <Text as="div" size="1">
    <Marker mr="3">1</Marker>
    The quick brown fox
  </Text>
</Flex>