Bulleted List

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

Props

DxcBulletedList

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>)`	Icon to be displayed as the bullet.	-

DxcBulletedList.Item

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

Props

Name	Type	Description	Default
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
- DxcBulletedList.Item
Examples
- Basic usage
- Nested list

Edit this page on GitHub

Report an issue on GitHub

Box

NextButton

Bulleted List

Props

DxcBulletedList

DxcBulletedList.Item

Props

Examples

Basic usage

Nested list

Contents