List item component is a simple list item that can be used to make a checklist or a list of items.
Variants can be set to info, pass, fail, notapplicable, empty, number. It changes the icon of the list item. These are the built in variants, any other custom icon can be used.
Number variant is special, it can be used to show a number in the list item with the number attribute.
Status can be set to neutral, brand, positive, negative. It basically changes the color of the list item icon.
Background shade can be set to none, subtle, base, medium, strong. It changes the background color of the list item.
Alignment can be set to horizontal or vertical. It changes the alignment of the content of the list item.
Interactive can be set to true to make the list item interactive. This will render an anchor tag instead of a div, and it can accept any link attributes.
However this can be changed also by the renderAs attribute which can be changed to button.
Custom icon can be set by using the icon attribute or adding content to the slot='icon'. It can be any svg icon.
import { DapDSListItem } from 'dap-design-system'
import { DapDSListItemReact } from 'dap-design-system/react'
For optimal bundle sizes, use the tree-shakeable import syntax:
import { DapDSListItem } from 'dap-design-system/components'
| Property | Type | Default | Description |
|---|---|---|---|
variant | 'info', 'pass' , 'fail' , 'notapplicable' , 'empty' , 'number' | 'info' | The variant of the list item. |
shade | 'none', 'subtle' , 'base' , 'medium' , 'strong' | 'base' | The background strongness of the list item. |
status | 'transparent', 'brand' , 'neutral' , 'positive' , 'negative' | 'neutral' | The status of the list item. |
alignment | 'horizontal', 'vertical' | 'horizontal' | The alignment of the list item. |
title | string | The title of the list item. | |
icon | string | The icon of the list item. This is an icon name from the built in icons. | |
number | number | The number of the list item. Only used when variant is 'number'. | |
interactive | boolean | Whether the list item is interactive. Generates an anchor tag. | |
target | '_blank', '_self' , '_parent' , '_top' | '_self' | The link target of the list item when interactive. |
href | string | The href of the list item when interactive | |
rel | string | 'noreferrer noopener' | The rel of the list item when interactive |
noIcon | boolean | Whether the list item has an icon. | |
noPadding | boolean | Whether the list item has no padding. | |
renderAs | 'a', 'button' | 'a' | The render as type of the list item, only applicable when interactive. |
| Name | Description |
|---|---|
(default) | The content of the list item. |
icon | The icon of the list item. |
title | The title of the list item. |
actions | The actions of the list item. |
No custom events available.
| Part Name | Description |
|---|---|
base | The main list item container. |
icon | The icon of the list item. |
title | The title of the list item. |
description | The description of the list item. |
container | The container of the list item. |
list-item-base | The base list item container. |
icon-container | The container of the icon. |
title-container | The container of the title. |
description-container | The container of the description. |
actions-container | The container of the actions. |
iteractive-indicator-container | The container of the interactive indicator. |
You can style CSS parts using the ::part() pseudo-element selector:
/* Target a specific part */
.my-custom-dap-ds-list-item::part(base) {
/* Your custom styles */
}
/* Target multiple parts */
.my-custom-dap-ds-list-item::part(base),
.my-custom-dap-ds-list-item::part(icon) {
/* Shared styles */
}
Example usage:
<dap-ds-list-item class="my-custom-dap-ds-list-item">
List item
</dap-ds-list-item>
.my-custom-dap-ds-list-item::part(base) {
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
CSS parts allow you to style internal elements of the component while maintaining encapsulation. Learn more in our styling guide.
| Property Name | Description |
|---|---|
--dds-list-item-gap | Gap between list item elements (default: var(--dds-spacing-200)) |
--dds-list-item-content-gap | Gap between content elements (default: var(--dds-spacing-200)) |
--dds-list-item-horizontal-gap | Gap for horizontal alignment (default: var(--dds-spacing-300)) |
--dds-list-item-vertical-gap | Gap for vertical alignment (default: var(--dds-spacing-200)) |
--dds-list-item-icon-size | Size of the icon (default: var(--dds-spacing-600)) |
--dds-list-item-number-size | Size of the number icon (default: 20px) |
--dds-list-item-actions-gap | Gap between action elements (default: var(--dds-spacing-400)) |
--dds-list-item-actions-padding | Padding for the actions container (default: var(--dds-spacing-100)) |
--dds-list-item-background-base | Background color for base shade (default: var(--dds-background-neutral-base)) |
--dds-list-item-background-subtle | Background color for subtle shade (default: var(--dds-background-neutral-subtle)) |
--dds-list-item-background-medium | Background color for medium shade (default: var(--dds-background-neutral-medium)) |
--dds-list-item-background-strong | Background color for strong shade (default: var(--dds-background-neutral-strong)) |
--dds-list-item-icon-brand | Color for brand icon (default: var(--dds-icon-brand-subtle)) |
--dds-list-item-icon-neutral | Color for neutral icon (default: var(--dds-icon-neutral-base)) |
--dds-list-item-icon-positive | Color for positive icon (default: var(--dds-icon-positive-subtle)) |
--dds-list-item-icon-negative | Color for negative icon (default: var(--dds-icon-negative-subtle)) |
--dds-list-item-title-color | Title text color (default: var(--dds-text-neutral-strong)) |
--dds-list-item-description-color | Description text color (default: var(--dds-text-neutral-base)) |
--dds-list-item-number-text-color | Number text color (default: var(--dds-text-neutral-inverted)) |
CSS custom properties (CSS variables) can be set directly on the component or in your stylesheet:
Method 1: Inline styles (Quick customization)
<dap-ds-list-item
style="--dds-list-item-gap: value; --dds-list-item-content-gap: value;">
List item
</dap-ds-list-item>
Method 2: CSS classes (Reusable styles)
.my-custom-dap-ds-list-item {
--dds-list-item-gap: value;
--dds-list-item-content-gap: value;
--dds-list-item-horizontal-gap: value;
}
<dap-ds-list-item class="my-custom-dap-ds-list-item">
List item
</dap-ds-list-item>
Method 3: Global theme customization
/* Apply to all instances */
dap-ds-list-item {
--dds-list-item-gap: value;
--dds-list-item-content-gap: value;
}
CSS custom properties inherit through the Shadow DOM, making them perfect for theming. Changes apply immediately without rebuilding.
