Overview

Introduction

UsageComing soon

Theme

Layout

Box

ContainerComing soon

Flex

Grid

SectionComing soon

Typography

Components

BlockquoteComing soon

ComboboxComing soon

JSON Path SelectorComing soon

ZoomableComing soon

Formatting

CodeComing soon

EmComing soon

KbdComing soon

QuoteComing soon

StrongComing soon

Icons

Logo IconComing soon

Feature IconComing soon

Provider Icon

Icon Panel

Navigation

Page NavComing soon

Quick NavComing soon

Utilities

DS ProviderComing soon

Recipes

Copy Button

Copy Chip

Theme Toggle

Marker

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

 <Marker>1</Marker>

Props

`color`

grayyellowredpurplebluegreen

`highContrast`

boolean

`size`

123456789

`withIcon`

boolean

Also supports MarginProps: `m`, `mb`, `ml`, `mr`, `mt`, `mx`, `my`

Usage

Colors

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

 <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.

 <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.

 <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.

 <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.

 <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>

Variants

Dashboard

12 variants found

Success marker in Legacy Verified Domain Migrationdashboard

color=green

Warning size 1 marker in Edit Brandingdashboard

/branding/edit

color=yellowsize=1

Warning size 1 marker in Edit Brandingdashboard

/branding/edit

color=yellowsize=1

size 5 marker in Create Application Dialogdashboard

/:environmentId/applications

size=5

size 5 marker in Impersonate Userland User Dialogdashboard

size=5

Primary marker in Complete Launch Checklist Onboarding Step Contentdashboard

color=purple

Primary marker in Complete Launch Checklist Onboarding Step Contentdashboard

color=purple

Destructive marker in Cname Statusdashboard

/domains

color=red

Destructive marker in Verify Custom Domain Dialog Contentdashboard

/domains

color=red

Success size 8 marker in Pagedashboard

/stripe-connect-callback

color=greensize=8

Destructive size 8 marker in Pagedashboard

/stripe-connect-callback

color=redsize=8

size 1 marker in Branding Update Groupdashboard

size=1

Admin Portal

3 variants found

Success marker in Domain Statusadmin-portal

/p/:portalSessionId/domain-verification

color=green

Success size 8 marker in Pageadmin-portal

/p/:portalSessionId/certificate-renewal/:connectionId/completed

color=greensize=8

Destructive size 8 marker in Failed Session Page Componentadmin-portal

/p/:portalSessionId/sso/:connectionId/verification/failed/:sessionId

color=redsize=8

Context

Prop	Type	Default	Required
`color`	`"gray" \| "yellow" \| "red" \| "purple" \| "blue" \| "green"`	—	no
`highContrast`	`boolean`	—	no
`size`	`Responsive<"1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9">`	—	no
`withIcon`	`boolean`	—	no

Also supports MarginProps: m, mb, ml, mr, mt, mx, my

Usage

Used 100 times across 2 packages

Dashboard

Admin Portal

Variant Distribution

color

green

35%

purple

29%

red

14%

gray

13%

yellow

10%

size

11%

15%

28%

30%

Where it's used

62 files

packages/dashboard/src/components/test-sso/service-provider-initiated-content.tsx6

packages/dashboard/src/components/onboarding-flows/complete-launch-checklist-onboarding-step-content.tsx4

packages/dashboard/src/components/authentication/configure-email-password-dialog.tsx3

packages/dashboard/src/components/authentication/configure-impersonation-dialog.tsx3

packages/dashboard/src/components/authentication/onboard-impersonation-dialog.tsx3

packages/dashboard/src/components/flags/onboarding-card.tsx3

packages/dashboard/src/components/get-started/get-started.tsx3

packages/dashboard/src/components/onboarding-flows/audit-logs-complete-your-integration-onboarding-step-content.tsx3

packages/dashboard/src/components/onboarding-flows/dsync-complete-your-integration-onboarding-step-content.tsx3

packages/dashboard/src/components/onboarding-flows/sso-complete-your-integration-onboarding-step-content.tsx3

Show 52 more files

Marker

On this page

Props

`color`

`highContrast`

`size`

`withIcon`

Usage

Colors

Sizes

Within Text

Variants

Dashboard

Admin Portal

Context

Full API Reference

Usage Statistics

Usage

Variant Distribution

Where it's used