Bulleted List

Bulleted list are used to display text items in a bulleted format.

Props

NameTypeDescriptionDefault
type'disc' | 'circle' | 'square' | 'number' | 'icon'Defines the style of the bullet point in the list.'disc'
iconstring | (React.ReactNode & React.SVGProps<SVGSVGElement>)Material Symbol name or SVG element to be displayed as the bullet. When using Material Symbols, replace spaces with underscores. By default they are outlined if you want it to be filled prefix the symbol name with "filled_".-
Required
children
React.ReactNodeContains one or more DxcBulletedList.Item.-

DxcBulletedList.Item

Everything between the tags will be displayed as a text item in the list.

Props

NameTypeDescriptionDefault
Required
children
React.ReactNodeText to be shown in the list.-

Examples

Basic usage

() => {
  return (
    <DxcInset space="2rem">
      <DxcBulletedList type="number">
        <DxcBulletedList.Item>Code</DxcBulletedList.Item>
        <DxcBulletedList.Item>Usage</DxcBulletedList.Item>
        <DxcBulletedList.Item>Specifications</DxcBulletedList.Item>
      </DxcBulletedList>
    </DxcInset>
  );
}

Nested list

() => {
  return (
    <DxcInset space="2rem">
      <DxcBulletedList type="square">
        <DxcBulletedList.Item>Code</DxcBulletedList.Item>
        <DxcBulletedList.Item>
          Usage
          <DxcBulletedList type="circle">
            <DxcBulletedList.Item>Usage for admins.</DxcBulletedList.Item>
            <DxcBulletedList.Item>Usage for non-admins.</DxcBulletedList.Item>
          </DxcBulletedList>
        </DxcBulletedList.Item>
        <DxcBulletedList.Item>Specifications</DxcBulletedList.Item>
      </DxcBulletedList>
    </DxcInset>
  );
}