Bulleted List

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

Props

Name	Type	Description	Default
type	`'disc' \| 'circle' \| 'square' \| 'number' \| 'icon'`	Defines the style of the bullet point in the list.	`'disc'`
icon	`string \| (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.ReactNode`	Contains one or more `DxcBulletedList.Item`.	-

DxcBulletedList.Item

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

Props

Name	Type	Description	Default
Required children	`React.ReactNode`	Text 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>
  );
}

() => {
  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>
  );
}

() => {
  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>
  );
}

Props
DxcBulletedList.Item
- Props
Examples
- Basic usage
- Nested list

Edit this page on GitHub

Report an issue on GitHub

Breadcrumbs

NextButton

Bulleted List

Props

DxcBulletedList.Item

Props

Examples

Basic usage

Nested list

Contents