Norsk Tipping Design System

ListItem

Install

yarn add @ntds/list

Import

import { ListItem } from '@ntds/list';

Props

PropTypeDefaultDescription
showPointerOnHover?booleanWhether to show a pointer cursor on hover. Defaults to false. If a button is being rendered, it will always show a pointer cursor on hover regardless of this prop.
rightIcon?FC<IconProps> | ReactNodeAn icon to display on the far right side of the list item.
onClick?() => voidAction to perform on click.
render?(props) => ReactNodeHook into the top render method of the wrapping element.
icon?FC<IconProps> | ReactNodeAn icon to display to the left of the title.
titleReactNodeTitle of the list item
subTitle?ReactNodeSubtitle of the list item, displayed below the title.
rightItem?ReactNodeAn item displayed on the right side of the list item. This can be an icon, button, switch, or any other React node.

On this page