@primer/react-brand/docs/components/UnorderedList/react.md

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

---
title: Unordered list
description: Use the unordered list component to present a collection of items without specific ordering.
keywords: ['bullet list']
ready: true
figma: 'https://www.figma.com/file/BJ95AjraesmRCWsKA013GS/branch/NzBMPIfPrFU9I87d3k7KVq/Primer-Brand?node-id=4045%3A17093&t=XJ9W58VgtbVo74gb-0'
source: https://github.com/primer/brand/blob/main/packages/react/src/list/UnorderedList/UnorderedList.tsx
storybook: '/brand/storybook/?path=/story/components-unorderedlist--playground'
---

```js
import {UnorderedList} from '@primer/react-brand'
```

## Examples

### Default

```jsx
<UnorderedList>
  <UnorderedList.Item>Automatic security and version updates</UnorderedList.Item>
  <UnorderedList.Item>GitHub Security Advisories</UnorderedList.Item>
  <UnorderedList.Item>Code and secret scanning</UnorderedList.Item>
  <UnorderedList.Item>Dependency review</UnorderedList.Item>
  <UnorderedList.Item>Automated authentication and identity management</UnorderedList.Item>
</UnorderedList>
```

### Checked variant

```jsx
<UnorderedList variant="checked">
  <UnorderedList.Item>Automatic security and version updates</UnorderedList.Item>
  <UnorderedList.Item>GitHub Security Advisories</UnorderedList.Item>
  <UnorderedList.Item>Code and secret scanning</UnorderedList.Item>
  <UnorderedList.Item>Dependency review</UnorderedList.Item>
  <UnorderedList.Item>Automated authentication and identity management</UnorderedList.Item>
</UnorderedList>
```

### `x` variant

```jsx
<UnorderedList variant="x">
  <UnorderedList.Item>Automatic security and version updates</UnorderedList.Item>
  <UnorderedList.Item>GitHub Security Advisories</UnorderedList.Item>
  <UnorderedList.Item>Code and secret scanning</UnorderedList.Item>
  <UnorderedList.Item>Dependency review</UnorderedList.Item>
  <UnorderedList.Item>Automated authentication and identity management</UnorderedList.Item>
</UnorderedList>
```

### Custom colors

```jsx
<UnorderedList variant="checked">
  <UnorderedList.Item leadingVisualFill="var(--brand-color-success-fg)">
    Automatic security and version updates
  </UnorderedList.Item>
  <UnorderedList.Item leadingVisualFill="var(--brand-color-success-fg)">GitHub Security Advisories</UnorderedList.Item>
  <UnorderedList.Item leadingVisualFill="var(--brand-color-success-fg)">Code and secret scanning</UnorderedList.Item>
  <UnorderedList.Item leadingVisualFill="var(--brand-color-success-fg)">Dependency review</UnorderedList.Item>
  <UnorderedList.Item leadingVisualFill="var(--brand-color-success-fg)">
    Automated authentication and identity management
  </UnorderedList.Item>
</UnorderedList>
```

## Component props

### UnorderedList

| Name        | Type                                   |  Default  | Description                                                |
| :---------- | :------------------------------------- | :-------: | :--------------------------------------------------------- |
| `className` | `string`                               |           | Sets a custom class on the root element                    |
| `variant`   | `default`, `checked` , `x`             | `default` | Specify alternative leading visual for list items          |
| `children`  | `React.ReactNode`, `React.ReactNode[]` |           | Content to be displayed within the UnorderedList component |

### UnorderedList.Item

| Name                     | Type                                   |   Default   | Description                                                                                         |
| :----------------------- | :------------------------------------- | :---------: | :-------------------------------------------------------------------------------------------------- |
| `className`              | `string`                               |             | Sets a custom class on the root element                                                             |
| `children`               | `React.ReactNode`, `React.ReactNode[]` |  `default`  | Content to be displayed within the OrderedList component                                            |
| `leadingVisual`          | `Icon`                                 | `undefined` | Sets a custom leading visual ([Octicon](https://primer.style/foundations/icons/)) for the list item |
| `leadingVisualFill`      | `string`                               | `undefined` | Sets a custom color value for the leading visual                                                    |
| `leadingVisualAriaLabel` | `string`                               | `undefined` | Sets `aria-label` on the leading visual icon                                                        |

Also forwards the `variant` prop from the [Text component](../../typography/Text/index.md).